Edit existing education

package.json

@@ -6,10 +6,12 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "axios": "^1.6.7",
     "eslint": "^8.40.0",
     "eslint-plugin-react": "^7.32.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"
   },

src/App.css

@@ -2,7 +2,8 @@ body {
   background-color: rgb(29, 83, 159);
 }
 
-.App {
+.App,
+.sectionContainer {
   text-align: center;
   color: white;
 }
@@ -22,8 +23,106 @@ body {
   font-style: italic;
 }
 
+.form {
+  border-radius: 5px;
+  background-color: #f2f2f2;
+  padding: 20px;
+}
+
+.inputContent {
+  text-align: left;
+  margin-bottom: 10px;
+}
+
+.sectionList {
+  text-align: left;
+  padding: 0px 20px;
+  list-style: none;
+}
+
+.sectionList .list {
+  margin-bottom: 20px;
+}
+
+.sectionList .content {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sectionList .imageDescWrap {
+  display: flex;
+}
+
+.sectionList .title {
+  font-weight: bold;
+}
+
+.sectionList .subTitle {
+  font-style: italic;
+  font-size: 16px;
+}
+
+.sectionList .date {
+  display: block;
+  text-transform: uppercase;
+  margin-top: 8px;
+  color: #aaa;
+  font-size: 14px;
+}
+
+.sectionList .logo {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+}
+
+.error {
+  display: block;
+  font-size: 14px;
+  margin: 20px;
+  color: #ff0000;
+}
+
+input[type="text"],
+input[type="date"],
+textarea,
+select {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+input[type="submit"] {
+  width: 100%;
+  background-color: #4caf50;
+  color: white;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type="submit"]:hover {
+  background-color: #45a049;
+}
+
+input::placeholder {
+  color: #ccc;
+}
+
+label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
 button {
   padding: 10px;
   border-radius: 4px;
   background-color: rgb(248 185 42);
+  cursor: pointer;
 }

src/App.js

@@ -1,6 +1,17 @@
+import {
+  createBrowserRouter,
+  RouterProvider,
+  useNavigate,
+} from "react-router-dom";
+
+import { AddEducation, EditEducation, ShowEducation } from "./pages";
+import { ContextProvider } from "./provider/ContextProvider";
+
 import "./App.css";
 
-function App() {
+const Home = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="App">
       <h1>Resume Builder</h1>
@@ -12,8 +23,10 @@ function App() {
       </div>
       <div className="resumeSection">
         <h2>Education</h2>
-        <p>Education Placeholder</p>
-        <button>Add Education</button>
+        <ShowEducation />
+        <button onClick={() => navigate("/education/add")}>
+          Add Education
+        </button>
         <br></br>
       </div>
       <div className="resumeSection">
@@ -26,6 +39,35 @@ function App() {
       <button>Export</button>
     </div>
   );
+};
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+
+  {
+    path: "/education",
+    children: [
+      {
+        path: "add",
+        element: <AddEducation />,
+      },
+      {
+        path: "edit/:id",
+        element: <EditEducation />,
+      },
+    ],
+  },
+]);
+
+function App() {
+  return (
+    <ContextProvider>
+      <RouterProvider router={router} />
+    </ContextProvider>
+  );
 }
 
 export default App;

src/components/Input.js

@@ -0,0 +1,24 @@
+export default function Input({
+  label,
+  id,
+  type = "text",
+  value,
+  placeholder,
+  handleChange,
+}) {
+  return (
+    <div className="inputContent">
+      <label htmlFor={id}>{label}</label>
+      <input
+        type={type}
+        id={id}
+        name={id}
+        value={value}
+        placeholder={placeholder}
+        onChange={handleChange}
+        minLength={2}
+        required={true}
+      />
+    </div>
+  );
+}

src/components/index.js

@@ -0,0 +1 @@
+export { default as Input } from "./Input";

src/constants.js

@@ -0,0 +1,34 @@
+export const educationFormList = [
+  {
+    id: "school",
+    label: "School Name",
+    placeholder: "Stanford University",
+  },
+  {
+    id: "logo",
+    label: "School Logo",
+    placeholder: "https://standford_university_logo.jpg",
+    value:
+      "https://png.pngtree.com/png-vector/20211011/ourmid/pngtree-school-logo-png-image_3977360.png",
+  },
+  {
+    id: "course",
+    label: "Course",
+    placeholder: "Computer Science",
+  },
+  {
+    id: "grade",
+    label: "Grade",
+    placeholder: "86",
+  },
+  {
+    id: "startDate",
+    label: "Start Date",
+    type: "date",
+  },
+  {
+    id: "endDate",
+    label: "End Date",
+    type: "date",
+  },
+];

src/pages/education/AddEducation.js

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Input } from "../../components";
+import { useAppContext } from "../../provider/ContextProvider";
+import { educationFormList } from "../../constants.js";
+
+export default function AddEducation() {
+  const [pending, setIsPending] = useState(false);
+  const [education, setEducation] = useState(null);
+
+  const { data, setData } = useAppContext();
+
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    setEducation((prevS) => ({ ...prevS, [e.target.name]: e.target.value }));
+  };
+
+  const handleAdd = async (e) => {
+    e.preventDefault();
+
+    try {
+      setIsPending(true);
+
+      // const response = await axios.post(
+      //   "http://localhost:8080/api/resume/education",
+      //   education
+      // );
+
+      const logo = educationFormList.find((item) => item.id === "logo")?.value;
+
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          setData({
+            ...data,
+            education: [...data.education, { ...education, logo }],
+          });
+          resolve({
+            id: data?.education?.length + 1,
+          });
+        }, 3000);
+      });
+
+      navigate("/");
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <div className="sectionContainer">
+      <h1>Add Education</h1>
+      <div className="resumeSection">
+        <form className="form" onSubmit={handleAdd}>
+          {educationFormList.map((item) => (
+            <Input
+              key={item.id}
+              {...item}
+              value={education?.[item.id] || item?.value || ""}
+              handleChange={handleChange}
+              required
+            />
+          ))}
+          <button type="submit">
+            {pending ? "Adding ..." : "Add Education"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}