Feature: Drag and Drop for logos

package.json

@@ -8,8 +8,12 @@
     "@testing-library/user-event": "^13.2.1",
     "eslint": "^8.40.0",
     "eslint-plugin-react": "^7.32.2",
-    "react": "^18.3.1",
+
+    "husky": "^9.1.6",
+    "react": "^18.2.0",
+
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.6",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"
   },
@@ -43,11 +47,6 @@
   },
   "devDependencies": {
     "eslint-config-prettier": "^8.8.0",
-    "prettier": "2.8.8",
-    "husky": "^8.0.0",
-    "lint-staged": "^13.0.0"
-  },
-  "lint-staged": {
-    "**/*": "prettier --write --ignore-unknown"
+    "prettier": "2.8.8"
   }
 }

src/App.js

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import "./App.css";
-import AddSkillForm from "./components/skills/AddSkillForm";
-import SkillView from "./components/skills/SkillView";
-import SkillEditPage from "./components/skills/SkillEditPage";
+import User from "./components/User/page";
+import EducationEditPage from "./components/education/EducationEditPage";
 import EducationForm from "./components/education/EducationForm";
 import EducationView from "./components/education/EducationView";
-import EducationEditPage from "./components/education/EducationEditPage";
-import ExperienceForm from "./components/experience/ExperienceForm";
-import ViewExperience from "./components/experience/ViewExperience";
-import User from "./components/User/page";
+
+import AddSkillForm from "./components/skills/AddSkillForm";
+import SkillEditPage from "./components/skills/SkillEditPage";
+import SkillView from "./components/skills/SkillView";
+
 
 function App() {
   const [showEducationForm, setShowEducationForm] = useState(false);
@@ -141,4 +141,4 @@ function App() {
     );
   };
 
-export default App;
+export default App;

src/App.test.js

@@ -223,3 +223,4 @@ describe("ExperienceForm", () => {
     expect(mockSubmit).not.toHaveBeenCalled();
   });
 });
+

src/components/Dropzone.jsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+
+const Dropzone = () => {
+  const [files, setFiles] = useState([]);
+  const [rejected, setRejected] = useState([]);
+  const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
+    if (acceptedFiles?.length) {
+      setFiles((previousFiles) => [
+        ...previousFiles,
+        ...acceptedFiles.map((file) =>
+          Object.assign(file, { preview: URL.createObjectURL(file) })
+        ),
+      ]);
+    }
+
+    if (rejectedFiles?.length) {
+      setRejected((previousFiles) => [...previousFiles, ...rejectedFiles]);
+    }
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  return (
+    <form>
+      <div {...getRootProps()}>
+        <input {...getInputProps()} />
+        {isDragActive ? (
+          <p>Drop the files here ...</p>
+        ) : (
+          <p>Drag 'n' drop some files here, or click to select files</p>
+        )}
+      </div>
+      {/* Preview */}
+      <ul>
+        {files.map((file) => (
+          <li key={file.name}>{file.name}</li>
+        ))}
+      </ul>
+    </form>
+  );
+};
+export default Dropzone;

src/components/education/EducationForm.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import Dropzone from "../Dropzone";
 
 const EducationForm = () => {
   const [formData, setFormData] = useState({
@@ -93,13 +94,9 @@ const EducationForm = () => {
             %
           </label>
           <label>
-            <h2>Logo URL</h2>
-            <input
-              type="text"
-              value={formData.logo}
-              placeholder="Logo URL"
-              onChange={handleChange("logo")}
-            />
+            <h2>Logo</h2>
+              <Dropzone/>
+
           </label>
 
           <button onSubmit={handleSubmit}>Submit Education</button>

src/components/skills/SkillEditPage.jsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import Dropzone from "../Dropzone";
 import "./SkillEditPage.css";
 
 function SkillEditPage() {
@@ -135,14 +136,8 @@ function SkillEditPage() {
                   />
                 </div>
                 <div className="form-field">
-                  <label htmlFor="logo">Logo URL:</label>
-                  <input
-                    id="logo"
-                    name="logo"
-                    value={formData.logo}
-                    onChange={handleInputChange}
-                    required
-                  />
+                  <label htmlFor="logo">Logo:</label>
+                  <Dropzone/>
                 </div>
                 <button
                   type="submit"