Merge branch 'main' into addEducation

README.md

@@ -8,7 +8,9 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Available Scripts
 
-In the project directory, you can run:
+In the project directory, you can use either yarn or npm to run the following commands:
+
+## Using `yarn`
 
 ### `yarn start`
 
@@ -43,6 +45,29 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
 
+## Using `npm` (Not very recommended to mix them)
+
+If you prefer to use npm instead of yarn, follow these instructions:
+
+### `npm install`
+
+Installs the necessary dependencies to run the project.
+
+### `npm start`
+
+Runs the app in development mode.
+Open http://localhost:3000 to view it in your browser.
+
+The page will reload when you make changes.
+You may also see any lint errors in the console.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

package.json

@@ -11,6 +11,7 @@
     "eslint": "^8.40.0",
     "eslint-plugin-react": "^7.32.2",
     "os-browserify": "^0.3.0",
+    "Prettier": "npm:prettier@^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",

src/App.js

@@ -11,6 +11,8 @@ import {
 } from "@react-pdf/renderer";
 import AddSkills from "./features/skills/addSkills";
 import AddEducation from "./features/education/addEducation";
+import UserInformationComponent from "./features/user-information/UserInformationComponent";
+
 
 const styles = StyleSheet.create({
   page: {
@@ -75,6 +77,11 @@ function App() {
     <div className="App">
       <h1>Resume Builder</h1>
 
+      <div className="resumeSection">
+        <h2>User Information</h2>
+        <UserInformationComponent />
+        <br></br>
+      </div>
       <div className="resumeSection">
         <h2>Experience</h2>
         <ExperienceComponent />

src/constants/index.js

@@ -1 +1,4 @@
 export const API_URL = "http://127.0.0.1:5000";
+export const EMAIL_ADDRESS_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export const PHONE_NUMBER_REGEX =
+  /^\+\d{1,3}(\s\d{10}|\s\d{3}-\d{3}-\d{4}|\d{10})$/;

src/features/experience/AddEditExperienceComponent.js

@@ -49,6 +49,9 @@ function AddEditExperienceComponent({
     }
 
     fetch(`${API_URL}/resume/experience`, {
+      headers: {
+        "Content-Type": "application/json",
+      },
       method: "POST",
       body: data,
     })

src/features/skills/addSkillForm.jsx

@@ -1,11 +1,25 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "./style.module.css";
 import { API_URL } from "../../constants";
+import Dropzone from "react-dropzone";
 
-export default function AddSkillForm({ setShowForm }) {
+export default function AddSkillForm({
+  setShowForm,
+  addSkill,
+  skillToEdit,
+  onUpdate,
+}) {
   const [name, setName] = useState("");
   const [proficiency, setProficiency] = useState("");
-  const [logo, setLogo] = useState("");
+  const [logo, setLogo] = useState(null);
+
+  useEffect(() => {
+    if (skillToEdit) {
+      setName(skillToEdit.name);
+      setProficiency(skillToEdit.proficiency);
+      setLogo(skillToEdit.logo);
+    }
+  }, [skillToEdit]);
 
   const handleAddSkill = async (e) => {
     e.preventDefault();
@@ -17,24 +31,43 @@ export default function AddSkillForm({ setShowForm }) {
     };
     console.log(JSON.stringify(data));
     try {
-      const response = await fetch(`${API_URL}/resume/skill`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
-      });
-      if (response.ok) {
-        alert("Skill was added successfully!!");
-        setName("");
-        setProficiency("");
-        setLogo("");
+      let response = "";
+      console.log(logo);
+      if (skillToEdit) {
+        response = await fetch(`${API_URL}/resume/skill/${skillToEdit.index}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(data),
+        });
+
+        if (response.ok) {
+          const updatedSkill = { ...skillToEdit, name, proficiency, logo };
+          onUpdate(updatedSkill);
+        }
       } else {
-        alert("Failed to add the skill");
+        response = await fetch(`${API_URL}/resume/skill`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(data),
+        });
+
+        if (response.ok) {
+          const newSkill = await response.json();
+          addSkill(newSkill);
+        }
       }
+
+      setName("");
+      setProficiency("");
+      setLogo(null);
+      setShowForm(false);
     } catch (error) {
       console.error("Error adding skill:", error);
-      alert("An error occurred while adding the skill");
+      console.log("An error occurred while adding the skill");
     }
   };
 
@@ -66,18 +99,49 @@ export default function AddSkillForm({ setShowForm }) {
             required
           />
         </div>
-        <div className={styles.inputs}>
-          <label htmlFor="proficiency">Logo: </label>
-          <input
-            type="file"
-            name="logo"
-            id="logo"
-            placeholder="add skill logo ..."
-            value={logo}
-            onChange={(e) => setLogo(e.target.value)}
-            required
-          />
-        </div>
+
+        {logo ? (
+          <>
+            <div className={styles.inputs}>
+              <label htmlFor="logo">Logo: </label>
+              <Dropzone
+                onDrop={(acceptedFiles) => {
+                  setLogo(acceptedFiles[0]);
+                }}
+              >
+                {({ getRootProps, getInputProps }) => (
+                  <section className={styles.dropzone} {...getRootProps()}>
+                    <input {...getInputProps()} />
+                    <p style={{ backgrounColor: "white", padding: "10px" }}>
+                      Drag and drop your files here, or click to browse for
+                      files.
+                    </p>
+                    {logo && <p>Current file: {logo.name}</p>}
+                  </section>
+                )}
+              </Dropzone>
+            </div>
+          </>
+        ) : (
+          <div className={styles.inputs}>
+            <label htmlFor="logo">Logo: </label>
+            <Dropzone
+              onDrop={(acceptedFiles) => {
+                setLogo(acceptedFiles[0]);
+              }}
+            >
+              {({ getRootProps, getInputProps }) => (
+                <section className={styles.dropzone} {...getRootProps()}>
+                  <input {...getInputProps()} />
+                  <p style={{ backgrounColor: "white", padding: "10px" }}>
+                    Drag and drop your files here, or click to browse for files.
+                  </p>
+                  {logo && <p>Current file: {logo.name}</p>}
+                </section>
+              )}
+            </Dropzone>
+          </div>
+        )}
       </div>
       <div className={styles.formButtons}>
         <button

src/features/skills/addSkills.jsx

@@ -1,16 +1,78 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import AddSkillForm from "./addSkillForm";
+import ViewSkills from "./viewSkills";
+import { API_URL } from "../../constants";
+import styles from "./style.module.css";
 
 export default function AddSkills() {
   const [showForm, setShowForm] = useState(false);
+  const [skills, setSkills] = useState([]);
+  const [error, setError] = useState(false);
+  const [skillToEdit, setSkillToEdit] = useState(null);
+
+  const fetchSkills = async () => {
+    try {
+      const response = await fetch(`${API_URL}/resume/skill`, {
+        method: "GET",
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setSkills(data);
+      } else {
+        setError(true);
+      }
+    } catch (error) {
+      console.error("Error fetching skills:", error);
+      setError(true);
+    }
+  };
+
+  useEffect(() => {
+    fetchSkills();
+  }, []);
+
+  const addSkill = async (newSkill) => {
+    await fetchSkills();
+    setShowForm(false);
+  };
+
+  const updateSkill = async (updatedSkill) => {
+    await fetchSkills();
+    setShowForm(false);
+    setSkillToEdit(null);
+  };
+
+  const handleEditSkill = (skill, index) => {
+    setSkillToEdit({ ...skill, index });
+    setShowForm(true);
+  };
+
   return (
     <section>
       {showForm ? (
-        <AddSkillForm setShowForm={setShowForm} />
+        <AddSkillForm
+          setShowForm={setShowForm}
+          addSkill={addSkill}
+          skillToEdit={skillToEdit}
+          onUpdate={updateSkill}
+        />
       ) : (
         <>
-          <p>You can add your skills in here</p>
-          <button onClick={() => setShowForm(true)}>Add Skill</button>
+          {error ? (
+            <p>Error fetching skills. Please refresh.</p>
+          ) : (
+            <ViewSkills skills={skills} onEditSkills={handleEditSkill} />
+          )}
+          <div className={styles.btncontainer}>
+            <button
+              onClick={() => {
+                setSkillToEdit(null);
+                setShowForm(true);
+              }}
+            >
+              Add Skill
+            </button>
+          </div>
         </>
       )}
     </section>

src/features/skills/style.module.css

@@ -55,3 +55,12 @@ input::placeholder {
   flex-wrap: wrap;
   gap: 32px;
 }
+
+.btncontainer {
+  margin-top: 5%;
+}
+
+.error {
+  color: red;
+  margin-top: 10px;
+}

src/features/skills/viewSkills.jsx

@@ -0,0 +1,42 @@
+import { React } from "react";
+
+export default function ViewSkills({ skills, onEditSkills }) {
+  return (
+    <div>
+      <table>
+        <thead>
+          <tr>
+            <th>Skill</th>
+            <th>Proficiency</th>
+            <th>Logo</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {skills.length > 0 ? (
+            skills.map((skill, index) => (
+              <tr key={index}>
+                <td>{skill.name}</td>
+                <td>{skill.proficiency}</td>
+                <td>
+                  {skill.logo && (
+                    <img src={skill.logo} alt={skill.name} width={50} />
+                  )}
+                </td>
+                <td>
+                  <button onClick={() => onEditSkills(skill, index)}>
+                    Edit
+                  </button>
+                </td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan="4">No skills added yet :(</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}