Merge branch 'main' into add_new_experience

package.json

@@ -17,7 +17,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "prettier": "prettier --write .",
+    "prettier:check": "prettier --check .",
+    "prepare": "husky install"
   },
   "eslintConfig": {
     "extends": [
@@ -40,6 +43,12 @@
   },
   "devDependencies": {
     "eslint-config-prettier": "^8.8.0",
-    "prettier": "^3.3.3"
+
+    "prettier": "2.8.8",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.0.0"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
   }
 }

src/App.css

@@ -9,14 +9,16 @@ body {
 
 .resumeSection {
   background-color: white;
-  padding: 10px;
-  margin-left: 30%;
-  margin-right: 30%;
+  padding: 20px;
+  margin: 0 auto 20px;
+  max-width: 600px;
   border-radius: 15px;
+<
   box-shadow:
     0 3px 6px rgba(0, 0, 0, 0.16),
     0 3px 6px rgba(0, 0, 0, 0.23);
   margin-bottom: 20px;
+
   color: black;
 }
 
@@ -25,9 +27,23 @@ body {
 }
 
 button {
-  padding: 10px;
+  padding: 10px 15px;
+  border: none;
   border-radius: 4px;
-  background-color: rgb(248 185 42);
+  background-color: rgb(248, 185, 42);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: rgb(230, 170, 30);
+}
+
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 10px;
 }
 
 .experienceForm .modal {

src/App.js

@@ -1,24 +1,73 @@
-import ExperienceForm from "./components/experience/ExperienceForm";
-import ViewExperience from "./components/experience/ViewExperience";
+
+import React, { useState } from "react";
 import "./App.css";
-import { useState } from "react";
+import AddSkillForm from "./components/skills/AddSkillForm";
+import SkillView from "./components/skills/SkillView";
+import SkillEditPage from "./components/skills/SkillEditPage";
+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";
 
 function App() {
+  const [showAddSkillForm, setShowAddSkillForm] = useState(false);
+  const [showSkillEditPage, setShowSkillEditPage] = useState(false);
+  const [skills, setSkills] = useState([]);
   const [experiences, setExperiences] = useState([]);
-  const [showForm, setShowForm] = useState(false);
+  const [showExperienceForm, setShowExperienceForm] = useState(false);
 
   const handleAddExperience = () => {
-    setShowForm(true);
+    setShowExperienceForm(true);
   };
 
   const handleSubmitExperience = (experienceData) => {
     setExperiences([...experiences, experienceData]);
-    setShowForm(false);
+    setShowExperienceForm(false);
   };
 
   const handleCancel = () => {
     setShowForm(false);
+  const [showEducationForm, setShowEducationForm] = useState(false);
+  const [showEducationEditPage, setShowEducationEditPage] = useState(false);
+  const [education, setEducation] = useState([]);
+
+  const handleAddSkillClick = () => {
+    setShowAddSkillForm(!showAddSkillForm);
+  };
+
+  const handleFormSubmit = (newSkill) => {
+    setSkills([...skills, newSkill]);
+    setShowAddSkillForm(false);
+  };
+
+  const toggleSkillEditPage = () => {
+    setShowSkillEditPage(!showSkillEditPage);
+  };
+
+  const handleSkillUpdate = (updatedSkills) => {
+    setSkills(updatedSkills);
+    setShowSkillEditPage(false);
+  };
+
+  const handleAddEducationClick = () => {
+    setShowEducationForm(!showEducationForm);
+  };
+
+  const handleEducationFormSubmit = (newEducation) => {
+    setEducation([...education, newEducation]);
+    setShowEducationForm(false);
+  };
+
+  const toggleEducationEditPage = () => {
+    setShowEducationEditPage(!showEducationEditPage);
+  };
+
+  const handleEducationUpdate = (updatedEducation) => {
+    setEducation(updatedEducation);
+    setShowEducationEditPage(false);
+
   };
 
   return (
@@ -32,7 +81,8 @@ function App() {
       </div>
       <div className="resumeSection">
         <h2>Experience</h2>
-        {showForm ? (
+
+        {showExperienceForm ? (
           <ExperienceForm
             onSubmit={handleSubmitExperience}
             onCancel={handleCancel}
@@ -43,18 +93,49 @@ function App() {
             <ViewExperience experiences={experiences} />
           </>
         )}
+
       </div>
 
       <div className="resumeSection">
         <h2>Education</h2>
-        <p>Education Placeholder</p>
-        <button>Add Education</button>
+
+        <EducationView education={education} />
+        <div className="button-group">
+          <button onClick={handleAddEducationClick}>
+            {showEducationForm ? "Hide" : "Add Education"}
+          </button>
+          <button onClick={toggleEducationEditPage}>
+            {showEducationEditPage ? "Hide Edit Education" : "Edit Education"}
+          </button>
+        </div>
+        {showEducationForm && (
+          <EducationForm onSubmit={handleEducationFormSubmit} />
+        )}
+        {showEducationEditPage && (
+          <EducationEditPage
+            education={education}
+            onUpdate={handleEducationUpdate}
+          />
+        )}
+
       </div>
 
       <div className="resumeSection">
         <h2>Skills</h2>
-        <p>Skill Placeholder</p>
-        <button>Add Skill</button>
+
+        <SkillView skills={skills} />
+        <div className="button-group">
+          <button onClick={handleAddSkillClick}>
+            {showAddSkillForm ? "Hide" : "Add Skill"}
+          </button>
+          <button onClick={toggleSkillEditPage}>
+            {showSkillEditPage ? "Hide Edit Skills" : "Edit Skills"}
+          </button>
+        </div>
+        {showAddSkillForm && <AddSkillForm onSubmit={handleFormSubmit} />}
+        {showSkillEditPage && (
+          <SkillEditPage skills={skills} onUpdate={handleSkillUpdate} />
+        )}
       </div>
 
       <br />

src/App.test.js

@@ -1,17 +1,40 @@
+import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-// import App from "./App";
+import App from "./App";
 import User from "./components/User/page.jsx";
 import ExperienceForm from "./components/experience/ExperienceForm.js";
 import ViewExperience from "./components/experience/ViewExperience.js";
 
-/*
-test("renders learn react link", () => {
 
+// App component test
+test("renders main components of Resume Builder", () => {
   render(<App />);
-  const headingElement = screen.getByText(/resume builder/i);
-  expect(headingElement).toBeInTheDocument();
+
+  // Check for the main title
+  const titleElement = screen.getByText(/Resume Builder/i);
+  expect(titleElement).toBeInTheDocument();
+
+  // Check for section titles
+  expect(
+    screen.getByRole("heading", { name: /Experience/i })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("heading", { name: /Education/i })
+  ).toBeInTheDocument();
+  expect(screen.getByRole("heading", { name: /Skills/i })).toBeInTheDocument();
+
+  // Check for some buttons
+  expect(
+    screen.getByRole("button", { name: /Add Experience/i })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("button", { name: /Add Education/i })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("button", { name: /Add Skill/i })
+  ).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: /Export/i })).toBeInTheDocument();
 });
- */
 
 // User component test
 describe("User Component", () => {
@@ -95,6 +118,7 @@ describe("User Component", () => {
   });
 });
 
+
 //experience test cases
 
 describe("ExperienceForm", () => {
@@ -200,3 +224,4 @@ describe("ExperienceForm", () => {
     expect(mockSubmit).not.toHaveBeenCalled();
   });
 });
+

src/components/education/EducationEdit.jsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import defaultLogo from "../../assets/graduation-cap.png";
+
+const EducationEdit = ({ education, showEdit, setShowEdit }) => {
+  const [formData, setFormData] = useState(education);
+
+  const handleChange = (field) => (e) => {
+    e.preventDefault();
+
+    setFormData({
+      ...formData,
+      [field]: e.currentTarget.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    fetch("/resume/education", {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setShowEdit([false, null]);
+        alert("Education successfully updated!");
+      })
+      .catch((error) => {
+        setShowEdit([false, null]);
+        alert("Error: Education not updated :(");
+      });
+  };
+
+  const handleEditClick = (e) => {
+    e.preventDefault();
+    setShowEdit([false, null]);
+  };
+
+  return (
+    <div className="modal">
+      <div className="modal-content">
+        <span class="close" onClick={handleEditClick}>
+          &times;
+        </span>
+        <div className="education-form-container">
+          <form onSubmit={handleSubmit}>
+            <h1 className="education-item-school">
+              <img src={defaultLogo} alt="defaultLogo" className="logo" />
+              Edit Education
+            </h1>
+            <label>
+              <h2>Course</h2>
+              <input
+                type="text"
+                value={formData.course}
+                placeholder={education.course}
+                onChange={handleChange("course")}
+              />
+            </label>
+            <label>
+              <h2>School</h2>
+              <input
+                type="text"
+                value={formData.school}
+                placeholder={education.school}
+                onChange={handleChange("school")}
+              />
+            </label>
+            <label>
+              <h2>Start Date</h2>
+              <input
+                type="month"
+                value={formData.start_date}
+                placeholder={education.start_date}
+                onChange={handleChange("start_date")}
+              />
+            </label>
+            <label>
+              <h2>End Date</h2>
+              <input
+                type="month"
+                value={formData.end_date}
+                placeholder={education.end_date}
+                onChange={handleChange("end_date")}
+              />
+            </label>
+            <label>
+              <h2>Grade</h2>
+              <input
+                type="number"
+                min="0"
+                max="100"
+                value={formData.grade}
+                placeholder={education.grade}
+                onChange={handleChange("grade")}
+              />
+              %
+            </label>
+            <label>
+              <h2>Logo URL</h2>
+              <input
+                type="text"
+                value={formData.logo}
+                placeholder={education.logo}
+                onChange={handleChange("logo")}
+              />
+            </label>
+
+            <button onSubmit={handleSubmit}>Edit Education</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EducationEdit;