chore: updates on the handle delete functionality

README.md

@@ -72,3 +72,9 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `yarn build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+What the project goals are
+
+What does it look like
+
+What are the prerequisites that are required (for example node v12+)

package.json

@@ -11,6 +11,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

src/App.js

@@ -1,42 +1,87 @@
 import ExperienceForm from "./components/experience/ExperienceForm";
 import ViewExperience from "./components/experience/ViewExperience";
 import "./App.css";
-import { useState } from "react";
+import { useCallback, useState } from "react";
+import EditExperienceForm from "./components/experience/EditExperienceForm";
 
 function App() {
   const [experiences, setExperiences] = useState([]);
-  const [showForm, setShowForm] = useState(false);
-
-  const handleAddExperience = () => {
-    setShowForm(true);
-  };
+  const [activeTab, setActiveTab] = useState("");
 
   const handleSubmitExperience = (experienceData) => {
     setExperiences([...experiences, experienceData]);
-    setShowForm(false);
+    setActiveTab("view");
   };
 
   const handleCancel = () => {
-    setShowForm(false);
+    setActiveTab("view");
   };
 
+  const [selectedExperience, setSelectedExperience] = useState(null);
+
+  const handleEdit = useCallback(
+    (newItem) => {
+      const updatedExperiences = experiences.map((experience) =>
+        experience.id === newItem.id ? newItem : experience
+      );
+      setExperiences(updatedExperiences);
+      setActiveTab("view");
+
+      console.log({ experiences });
+    },
+    [experiences]
+  );
+
+  const handleDelete = useCallback(
+    (id) => {
+      const filtered = () =>
+        experiences.filter((experience) => experience.id !== id);
+      setExperiences(filtered);
+    },
+    [experiences]
+  );
+
+  const experienceTabs = {
+    form: (
+      <ExperienceForm
+        onSubmit={handleSubmitExperience}
+        onCancel={handleCancel}
+        setSelectedExperience={setSelectedExperience}
+      />
+    ),
+    view: (
+      <>
+        <ViewExperience
+          experiences={experiences}
+          setSelectedExperience={setSelectedExperience}
+          setActiveTab={setActiveTab}
+          onDelete={handleDelete}
+        />
+      </>
+    ),
+    edit: (
+      <EditExperienceForm
+        experience={selectedExperience}
+        onSubmit={handleEdit}
+      />
+    ),
+  };
+
+  console.log({ experiences });
   return (
     <div className="App">
       <h1>Resume Builder</h1>
       <div className="resumeSection">
         <h2>Experience</h2>
 
-        {showForm ? (
-          <ExperienceForm
-            onSubmit={handleSubmitExperience}
-            onCancel={handleCancel}
-          />
-        ) : (
-          <>
-            <button onClick={handleAddExperience}>Add Experience</button>
-            <ViewExperience experiences={experiences} />
-          </>
-        )}
+        <button
+          onClick={() => setActiveTab("form")}
+          style={{ marginBottom: "20px" }}
+        >
+          Add Experience
+        </button>
+
+        {experienceTabs[activeTab]}
       </div>
 
       <div className="resumeSection">

src/components/experience/EditExperienceForm.js

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+
+function EditExperienceForm({ experience, onSubmit, onCancel }) {
+  const [formData, setFormData] = useState({
+    title: experience.title ?? "",
+    company: experience.company ?? "",
+    start_date: experience.start_date ?? "",
+    end_date: experience.end_date ?? "",
+    description: experience.description ?? "",
+    logo: experience.logo ?? "",
+    isCurrent: experience.isCurrent ?? false,
+  });
+
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFormData({ ...formData, logo: reader.result });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleCheckboxChange = () => {
+    setFormData((prev) => ({
+      ...prev,
+      isCurrent: !prev.isCurrent,
+      end_date: "",
+    }));
+  };
+
+  const validateDates = () => {
+    if (!formData.isCurrent && formData.end_date) {
+      if (new Date(formData.end_date) < new Date(formData.start_date)) {
+        setErrors({ end_date: "End date cannot be earlier than start date" });
+        return false;
+      }
+    }
+    setErrors({});
+    return true;
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!validateDates()) return;
+
+    const experienceData = {
+      title: formData.title,
+      company: formData.company,
+      start_date: formData.start_date,
+      end_date: formData.isCurrent ? "Present" : formData.end_date,
+      description: formData.description,
+      logo: formData.logo,
+      id: experience.id,
+    };
+
+    onSubmit(experienceData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="experienceForm">
+      {formData.logo && (
+        <div className="logoPreviewContainer">
+          <img src={formData.logo} alt="Logo" className="logoPreview" />
+        </div>
+      )}
+      <div className="fileUploadContainer">
+        <label className="fullWidth">
+          Logo:
+          <input type="file" name="logo" onChange={handleFileChange} />
+        </label>
+      </div>
+      <div className="row">
+        <label>
+          Title:
+          <input
+            type="text"
+            name="title"
+            value={formData.title}
+            onChange={handleChange}
+            required
+          />
+        </label>
+        <label>
+          Company:
+          <input
+            type="text"
+            name="company"
+            value={formData.company}
+            onChange={handleChange}
+            required
+          />
+        </label>
+      </div>
+
+      <div className="row">
+        <label>
+          Start Date:
+          <input
+            type="date"
+            name="start_date"
+            value={formData.start_date}
+            onChange={handleChange}
+            required
+          />
+        </label>
+        <label>
+          End Date:
+          <input
+            type="date"
+            name="end_date"
+            value={formData.isCurrent ? "" : formData.end_date}
+            onChange={handleChange}
+            disabled={formData.isCurrent}
+          />
+          {errors.end_date && (
+            <span className="error" style={{ color: "red" }}>
+              {errors.end_date}
+            </span>
+          )}
+        </label>
+      </div>
+
+      <label>
+        <input
+          type="checkbox"
+          name="isCurrent"
+          checked={formData.isCurrent}
+          onChange={handleCheckboxChange}
+        />
+        Current Job
+      </label>
+
+      <label className="fullWidth">
+        Description:
+        <textarea
+          name="description"
+          value={formData.description}
+          onChange={handleChange}
+        />
+      </label>
+
+      <div className="buttonRow">
+        <button type="submit">Submit</button>
+        <button type="button" onClick={onCancel}>
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default EditExperienceForm;

src/components/experience/ExperienceForm.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { v4 as uuid } from "uuid";
 
 function ExperienceForm({ onSubmit, onCancel }) {
   const [formData, setFormData] = useState({
@@ -60,6 +61,7 @@ function ExperienceForm({ onSubmit, onCancel }) {
       end_date: formData.isCurrent ? "Present" : formData.end_date,
       description: formData.description,
       logo: formData.logo,
+      id: uuid(),
     };
 
     onSubmit(experienceData);

src/components/experience/ViewExperience.js

@@ -1,6 +1,12 @@
 import React from "react";
 
-function ViewExperience({ experiences, onEdit, onDelete }) {
+function ViewExperience({
+  experiences,
+  onEdit,
+  onDelete,
+  setSelectedExperience,
+  setActiveTab,
+}) {
   const sortedExperiences = experiences.sort((a, b) => {
     const isACurrent = a.end_date === "Present";
     const isBCurrent = b.end_date === "Present";
@@ -37,8 +43,15 @@ function ViewExperience({ experiences, onEdit, onDelete }) {
           </div>
 
           <div className="experienceActions">
-            <button onClick={() => onEdit(index)}>Edit</button>
-            <button onClick={() => onDelete(index)}>Delete</button>
+            <button
+              onClick={() => {
+                setSelectedExperience(experience);
+                setActiveTab("edit");
+              }}
+            >
+              Edit
+            </button>
+            <button onClick={() => onDelete(experience.id)}>Delete</button>
           </div>
         </div>
       ))}

yarn.lock

@@ -8816,6 +8816,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"