Merge branch 'main' into inhwa/refine_desc

Author: inhwaS

package-lock.json

@@ -9,8 +9,12 @@
     "axios": "^1.7.7",
     "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"
   },
@@ -44,11 +48,6 @@
   },
   "devDependencies": {
     "eslint-config-prettier": "^8.8.0",
-    "husky": "^8.0.0",
-    "lint-staged": "^13.0.0",
     "prettier": "2.8.8"
-  },
-  "lint-staged": {
-    "**/*": "prettier --write --ignore-unknown"
   }
 }

package.json

@@ -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.js

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

src/App.test.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function Reorder({ index, reorderObj, children }) {
+  return (
+    <div
+      draggable
+      onDragStart={() => (reorderObj.onCardRef.current = index)}
+      onDragEnter={() => (reorderObj.overCardRef.current = index)}
+      onDragEnd={reorderObj.handleSwap}
+      onDragOver={(e) => e.preventDefault()}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Reorder;

src/Reorder/Reorder.js

@@ -0,0 +1,59 @@
+import { useRef, useState } from "react";
+
+const useReorder = (items, setItems, sectionType) => {
+  const onCardRef = useRef(0);
+  const overCardRef = useRef(0);
+  const timeoutRef = useRef(null);
+  const [response, setResponse] = useState(null);
+  const [error, setError] = useState(null);
+
+  const handleSwap = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    const updatedItems = [...items];
+    const temp = updatedItems[onCardRef.current];
+    updatedItems[onCardRef.current] = updatedItems[overCardRef.current];
+    updatedItems[overCardRef.current] = temp;
+
+    setItems(updatedItems);
+
+    timeoutRef.current = setTimeout(() => {
+      handleRequest(sectionType);
+    }, 3000);
+  };
+
+  const handleRequest = async (sectionType) => {
+    // sectionType must be a valid resume section, e.g. education, experience, skills
+
+    const baseURL = "http://localhost:5000/resume/";
+    try {
+      const response = await fetch(`${baseURL}${sectionType}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ data: items }),
+      });
+
+      if (!response.ok)
+        throw new Error(`HTTP error! Status: ${response.status}`);
+
+      const data = await response.json();
+      setResponse(data);
+      setError(null);
+    } catch (error) {
+      setError(error);
+      console.error(error);
+    }
+  };
+
+  return {
+    response,
+    error,
+    reorderObj: { handleSwap, onCardRef, overCardRef },
+  };
+};
+
+export default useReorder;

src/Reorder/useReorder.js

@@ -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/Dropzone.jsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import RefineDescription from "../../RefineDescription";
+import { useState } from "react";
+import Dropzone from "../Dropzone";
 
 function ExperienceForm({ onSubmit, onCancel }) {
   const [formData, setFormData] = useState({
@@ -160,19 +162,20 @@ function ExperienceForm({ onSubmit, onCancel }) {
             />
             Current Job
           </label>
-
           <label className="fullWidth">
-            Description:
-            <textarea
-              name="description"
-              value={formData.description}
-              onChange={handleChange}
-              style={{ width: '100%', height: '100px' }} 
-            />
-            <RefineDescription 
-              description={formData.description} 
-              setDescription={(refinedDescription) => setFormData(prev => ({ ...prev, description: refinedDescription }))} 
-            />  
+              Description:
+              <textarea
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                style={{ width: '100%', height: '100px' }} 
+              />
+              <RefineDescription 
+                description={formData.description} 
+                setDescription={(refinedDescription) => setFormData(prev => ({ ...prev, description: refinedDescription }))} 
+              />  
+            <h2>Logo</h2>
+            <Dropzone/>
           </label>
 
           <div className="buttonRow">

src/components/education/EducationForm.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"