Merge pull request #26 from JooZef315/addEducation

feature: add new Education #10

src/App.js

@@ -9,6 +9,7 @@ import {
   View,
   StyleSheet,
 } from "@react-pdf/renderer";
+import AddEducation from "./features/education/addEducation";
 import AddSkills from "./features/skills/addSkills";
 import UserInformationComponent from "./features/user-information/UserInformationComponent";
 
@@ -74,7 +75,6 @@ function App() {
   return (
     <div className="App">
       <h1>Resume Builder</h1>
-
       <div className="resumeSection">
         <h2>User Information</h2>
         <UserInformationComponent />
@@ -88,8 +88,7 @@ function App() {
 
       <div className="resumeSection">
         <h2>Education</h2>
-        <p>Education Placeholder</p>
-        <button>Add Education</button>
+        <AddEducation />
         <br></br>
       </div>
 

src/features/education/addEducation.jsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import AddEducationForm from "./addEducationForm";
+
+export default function AddEducation() {
+  const [showForm, setShowForm] = useState(false);
+  return (
+    <section>
+      {showForm ? (
+        <AddEducationForm setShowForm={setShowForm} />
+      ) : (
+        <>
+          <p>You can add your Education in here</p>
+          <button onClick={() => setShowForm(true)}>Add Education</button>
+        </>
+      )}
+    </section>
+  );
+}

src/features/education/addEducationForm.jsx

@@ -0,0 +1,167 @@
+import { useState } from "react";
+import styles from "./style.module.css";
+import { API_URL } from "../../constants";
+
+export default function AddEducationForm({ setShowForm }) {
+  const [course, setCourse] = useState("");
+  const [school, setSchool] = useState("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [grade, setGrade] = useState("");
+  const [logo, setLogo] = useState("");
+
+  const [loading, setLoading] = useState(false);
+
+  const handleAddEducation = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    const data = {
+      course,
+      school,
+      startDate,
+      endDate,
+      grade,
+      logo,
+    };
+    console.log(JSON.stringify(data));
+    try {
+      const response = await fetch(`${API_URL}/resume/education`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+      if (response.ok) {
+        alert("Skill was added successfully!!");
+        setCourse("");
+        setSchool("");
+        setStartDate("");
+        setEndDate("");
+        setGrade("");
+        setLogo("");
+      } else {
+        alert("Failed to add the skill");
+      }
+    } catch (error) {
+      console.error("Error adding skill:", error);
+      alert("An error occurred while adding the skill");
+    }
+    setLoading(false);
+  };
+
+  return (
+    <form className={styles.EduForm} onSubmit={(e) => handleAddEducation(e)}>
+      <div className={styles.formBody}>
+        <div className={styles.inputs}>
+          <label htmlFor="course" className={styles.eduLabel}>
+            Course Name:{" "}
+          </label>
+          <input
+            type="text"
+            name="course"
+            id="course"
+            placeholder="add Course ..."
+            value={course}
+            onChange={(e) => setCourse(e.target.value)}
+            required
+            minLength={3}
+            className={styles.eduInput}
+          />
+        </div>
+        <div className={styles.inputs}>
+          <label htmlFor="school" className={styles.eduLabel}>
+            School:{" "}
+          </label>
+          <input
+            type="text"
+            name="school"
+            id="school"
+            placeholder="add school name ..."
+            value={school}
+            onChange={(e) => setSchool(e.target.value)}
+            required
+            minLength={3}
+            className={styles.eduInput}
+          />
+        </div>
+        <div className={styles.inputs}>
+          <label htmlFor="startDate" className={styles.eduLabel}>
+            Start Date:{" "}
+          </label>
+          <input
+            type="text"
+            name="startDate"
+            id="startDate"
+            placeholder="Ex:October 2021 ..."
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            required
+            minLength={3}
+            className={styles.eduInput}
+          />
+        </div>
+        <div className={styles.inputs}>
+          <label htmlFor="endDate" className={styles.eduLabel}>
+            End Date:{" "}
+          </label>
+          <input
+            type="text"
+            name="endDate"
+            id="endDate"
+            placeholder="Ex:October 2022 ..."
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            required
+            minLength={3}
+            className={styles.eduInput}
+          />
+        </div>
+        <div className={styles.inputs}>
+          <label htmlFor="grade" className={styles.eduLabel}>
+            Grade:{" "}
+          </label>
+          <input
+            type="text"
+            name="grade"
+            id="grade"
+            placeholder="Ex:86% ..."
+            value={grade}
+            onChange={(e) => setGrade(e.target.value)}
+            required
+            minLength={3}
+            className={styles.eduInput}
+          />
+        </div>
+        <div className={styles.inputs}>
+          <label htmlFor="logo">Logo: </label>
+          <input
+            type="file"
+            name="logo"
+            id="logo"
+            placeholder="add skill logo ..."
+            value={logo}
+            onChange={(e) => setLogo(e.target.value)}
+            required
+          />
+        </div>
+      </div>
+      <div className={styles.formButtons}>
+        <button
+          type="button"
+          className={styles.cancelButton}
+          onClick={() => setShowForm(false)}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className={styles.submitButton}
+          disabled={loading}
+        >
+          {loading ? "Loading..." : "Submit"}
+        </button>
+      </div>
+    </form>
+  );
+}

src/features/education/style.module.css

@@ -0,0 +1,71 @@
+.cancelButton {
+  background-color: red;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+}
+
+[type="submit"] {
+  border-radius: 4px;
+  background-color: rgb(248 185 42);
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+}
+.submitButton:disabled {
+  opacity: 60%;
+}
+
+.EduForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.formBody {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin: 4px auto;
+  font-weight: 700;
+}
+
+.inputs {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  gap: 2px;
+  padding: 8px;
+}
+
+.eduLabel {
+  padding: 2px 20px;
+}
+.eduInput {
+  width: 85%;
+  margin: 2px auto;
+  padding: 12px 20px;
+  font-size: medium;
+}
+
+input::placeholder {
+  opacity: 50%;
+}
+
+.formButtons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 32px;
+}