From 4828e0f5bd0080214ab942af1da213927e70383a Mon Sep 17 00:00:00 2001
From: Jojo Thomas <jojothomas1515@gmail.com>
Date: Fri, 20 Oct 2023 14:27:06 +0100
Subject: [PATCH 01/20] updated the talent page

---
 .../Modal/UpdateCertificateModal.tsx          | 49 ++++++++--
 .../components/Modal/UpdateEducationModal.tsx | 73 +++++++++++---
 .../Modal/UpdateExperienceModal.tsx           | 94 +++++++++++++------
 .../components/Modal/UpdateProjectModal.tsx   | 70 +++++++++++---
 .../src/components/Modal/UpdateSkillModal.tsx | 51 ++++++++--
 .../Modal/interfaces/modaInterface.ts         |  3 +-
 .../components/talentProfile/AddNewComp.css   |  2 +-
 .../components/talentProfile/AddNewComp.scss  |  4 +-
 client/src/pages/Talent/Talent.tsx            |  6 +-
 9 files changed, 280 insertions(+), 72 deletions(-)

diff --git a/client/src/components/Modal/UpdateCertificateModal.tsx b/client/src/components/Modal/UpdateCertificateModal.tsx
index 6f6bf43..bb32514 100644
--- a/client/src/components/Modal/UpdateCertificateModal.tsx
+++ b/client/src/components/Modal/UpdateCertificateModal.tsx
@@ -1,35 +1,72 @@
 import { modalProps } from "./interfaces/modaInterface.ts";
 import TButton from "../Button/TButton.tsx";
 import "./styles/AddProjectModal.css";
+import { useContext } from "react";
+import { TalentContext } from "../../pages/Talent/Talent.tsx";
+import {
+  deleteCertification,
+  updateCertification,
+} from "../../api/certifications.ts";
+import { FaEdit, FaTrash } from "react-icons/fa";
 
 function AddCertificateModal({ show, setShow }: modalProps) {
   const modalStyle = show ? "showModal" : "";
+  const tp = useContext(TalentContext);
+
+  const { talentProfile, info } = localStorage;
+  const tal = talentProfile ? JSON.parse(talentProfile as string).talent : {};
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    formData.append("talentId", tal._id);
+    const data = Object.fromEntries(formData);
+
+    await updateCertification(info._id, data);
+    tp.setRefresh(!tp.refresh);
+    const formElement = e.target as HTMLFormElement;
+    formElement.reset();
+    setShow(false);
+  };
+  const handleDelete = async () => {
+    await deleteCertification(info._id);
+    tp.setRefresh(!tp.refresh);
+  };
 
   return (
     <div className={"Modal " + modalStyle}>
       <div className="content">
         <div className={"header-11"}>
-          <h1>Update Certification Modal</h1>{" "}
+          <h1>Add Certification Modal</h1>{" "}
           <TButton value={"X"} onClick={() => setShow(false)} />
         </div>
         <hr />
-        <form>
+        <form onSubmit={handleSubmit}>
           <div className="form-control">
             <label htmlFor="title">Title</label>
-            <input type="text" name={"title"} />
+            <input type="text" name={"title"} defaultValue={info.title} />
           </div>
           <div className="form-control">
             <label htmlFor="link">Link</label>
-            <input type="url" name={"link"} />
+            <input type="url" name={"link"} defaultValue={info.link} />
           </div>
 
           <div className="form-control">
             <label htmlFor={"description"}>Description</label>
-            <textarea name={"description"} />
+            <textarea name={"description"} defaultValue={info.description} />
           </div>
           {/*  add a save button */}
           <div className="form-control">
-            <TButton value={"Save"} type={"submit"} />
+            <TButton
+              value={(<FaTrash />) as unknown as string}
+              className={" border-red-800"}
+              type={"button"}
+              onClick={handleDelete}
+            />{" "}
+            &nbsp;
+            <TButton
+              value={(<FaEdit />) as unknown as string}
+              type={"submit"}
+            />
           </div>
         </form>
       </div>
diff --git a/client/src/components/Modal/UpdateEducationModal.tsx b/client/src/components/Modal/UpdateEducationModal.tsx
index 37fff90..375697b 100644
--- a/client/src/components/Modal/UpdateEducationModal.tsx
+++ b/client/src/components/Modal/UpdateEducationModal.tsx
@@ -1,45 +1,80 @@
 import { modalProps } from "./interfaces/modaInterface.ts";
+import { useContext, useRef } from "react";
+import { TalentContext } from "../../pages/Talent/Talent.tsx";
+import { deleteEducation, updateEducation } from "../../api/education.ts";
 import TButton from "../Button/TButton.tsx";
-import { useRef } from "react";
 import { presentOrNot } from "./utils/helpers.ts";
-function AddProjectModal({ show, setShow }: modalProps) {
+import { FaEdit, FaTrash } from "react-icons/fa";
+
+function AddProjectModal({ show, setShow, info }: modalProps) {
   const modalStyle = show ? "showModal" : "";
   const endDateRef = useRef<HTMLInputElement>(null);
   const textRef = useRef<HTMLHeadingElement>(null);
 
+  const tp = useContext(TalentContext);
+  const { talentProfile } = localStorage;
+  const tal = talentProfile ? JSON.parse(talentProfile as string).talent : {};
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    formData.append("talentId", tal._id);
+    const data = Object.fromEntries(formData);
+    await updateEducation(info._id, data);
+    tp.setRefresh(!tp.refresh);
+    const formElement = e.target as HTMLFormElement;
+    formElement.reset();
+    setShow(false);
+  };
+
+  const handleDelete = async () => {
+    deleteEducation(info._id);
+    tp.setRefresh(!tp.refresh);
+  };
+
   return (
     <div className={"Modal " + modalStyle}>
       <div className="content">
         <div className={"header-11"}>
-          <h1>Update Education</h1>{" "}
+          <h1>Add Education</h1>{" "}
           <TButton value={"X"} onClick={() => setShow(false)} />
         </div>
         <hr />
-        <form>
+        <form onSubmit={handleSubmit}>
           <div className="form-control">
             <label htmlFor="degree">Degree</label>
-            <input type="text" name={"degree"} />
+            <input type="text" name={"degree"} defaultValue={info.degree} />
           </div>{" "}
           <div className="form-control">
             <label htmlFor="school">School</label>
-            <input type="text" name={"school"} />
+            <input type="text" name={"school"} defaultValue={info.school} />
           </div>{" "}
           <div className="form-control">
             <label htmlFor="country">Country</label>
-            <input type="text" name={"country"} />
+            <input type="text" name={"country"} defaultValue={info.country} />
           </div>
           <div className="form-control">
             <label htmlFor="city">City</label>
-            <input type="text" name={"city"} />
+            <input type="text" name={"city"} defaultValue={info.city} />
           </div>
           <div className={"flex start-end"}>
             <div className="form-control">
-              <label htmlFor="start">Start</label>
-              <input type="date" name={"start"} />
+              <label htmlFor="startDate">Start</label>
+              <input
+                type="date"
+                name={"startDate"}
+                defaultValue={new Date(info.startDate)
+                  .toISOString()
+                  .slice(0, 10)}
+              />
             </div>
             <div className="form-control">
-              <label htmlFor="end">End</label>
-              <input type="date" name={"end"} ref={endDateRef} />
+              <label htmlFor="endDate">End</label>
+              <input
+                type="date"
+                name={"endDate"}
+                ref={endDateRef}
+                defaultValue={new Date(info.endDate).toISOString().slice(0, 10)}
+              />
               <h1 ref={textRef} style={{ display: "none" }}>
                 Present
               </h1>
@@ -56,11 +91,21 @@ function AddProjectModal({ show, setShow }: modalProps) {
           </div>
           <div className="form-control">
             <label htmlFor={"description"}>Description</label>
-            <textarea name={"description"} />
+            <textarea name={"description"} defaultValue={info.description} />
           </div>
           {/*  add a save button */}
           <div className="form-control">
-            <TButton value={"Save"} type={"submit"} />
+            <TButton
+              value={(<FaTrash />) as unknown as string}
+              className={" border-red-800"}
+              type={"button"}
+              onClick={handleDelete}
+            />{" "}
+            &nbsp;
+            <TButton
+              value={(<FaEdit />) as unknown as string}
+              type={"submit"}
+            />
           </div>
         </form>
       </div>
diff --git a/client/src/components/Modal/UpdateExperienceModal.tsx b/client/src/components/Modal/UpdateExperienceModal.tsx
index b6963e6..8457a09 100644
--- a/client/src/components/Modal/UpdateExperienceModal.tsx
+++ b/client/src/components/Modal/UpdateExperienceModal.tsx
@@ -1,40 +1,79 @@
-import "./styles/AddExperienceModal.css";
-import TButton from "../Button/TButton.tsx";
 import { modalProps } from "./interfaces/modaInterface.ts";
-import { useRef } from "react";
+import { useContext, useRef } from "react";
+import { TalentContext } from "../../pages/Talent/Talent.tsx";
+import { deleteExperience, updateExperience } from "../../api/experience.ts";
+import TButton from "../Button/TButton.tsx";
 import { presentOrNot } from "./utils/helpers.ts";
+import { FaEdit, FaTrash } from "react-icons/fa";
 
-function AddExperienceModal({ show, setShow }: modalProps): JSX.Element {
+function AddExperienceModal({ show, setShow, info }: modalProps): JSX.Element {
   const endDateRef = useRef<HTMLInputElement>(null);
   const textRef = useRef<HTMLInputElement>(null);
 
+  const { talentProfile } = localStorage;
+  const tal = talentProfile ? JSON.parse(talentProfile as string).talent : {};
   const modalStyle = show ? "showModal" : "";
+  const tp = useContext(TalentContext);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+
+    formData.append("talentId", tal._id);
+    const data = Object.fromEntries(formData);
+
+    await updateExperience(info._id, data);
+    tp.setRefresh(!tp.refresh);
+    const formElement = e.target as HTMLFormElement;
+    formElement.reset();
+    setShow(false);
+  };
+
+  const handleDelete = async () => {
+    await deleteExperience(info._id);
+    tp.setRefresh(!tp.refresh);
+  };
 
   return (
     <div className={"Modal " + modalStyle}>
       <div className={"content"}>
         <div className={"header-11"}>
-          <h1>Update Position</h1>{" "}
+          <h1>Add Position</h1>{" "}
           <TButton value={"X"} onClick={() => setShow(false)} />
         </div>
         <hr />
-        <form>
+        <form
+          onSubmit={async (e) => {
+            await handleSubmit(e);
+          }}
+        >
           <div className="form-control">
-            <label htmlFor="title">Title</label>
-            <input type="text" name={"title"} />
+            <label htmlFor="jobTitle">Title</label>
+            <input type="text" name={"jobTitle"} defaultValue={info.jobTitle} />
           </div>
           <div className="form-control">
-            <label htmlFor="company">Company</label>
-            <input type="text" name={"company"} />
+            <label htmlFor="employer">Company</label>
+            <input type="text" name={"employer"} defaultValue={info.employer} />
           </div>
           <div className={"flex start-end"}>
             <div className="form-control">
-              <label htmlFor="start">Start</label>
-              <input type="date" name={"start"} />
+              <label htmlFor="startDate">Start</label>
+              <input
+                type="date"
+                name={"startDate"}
+                defaultValue={new Date(info.startDate)
+                  .toISOString()
+                  .slice(0, 10)}
+              />
             </div>
             <div className="form-control">
-              <label htmlFor="end">End</label>
-              <input type="date" name={"end"} ref={endDateRef} />
+              <label htmlFor="endDate">End</label>
+              <input
+                type="date"
+                name={"endDate"}
+                ref={endDateRef}
+                defaultValue={new Date(info.endDate).toISOString().slice(0, 10)}
+              />
               <h1 ref={textRef} style={{ display: "none" }}>
                 Present
               </h1>
@@ -45,32 +84,33 @@ function AddExperienceModal({ show, setShow }: modalProps): JSX.Element {
             <input
               type="checkbox"
               name={"current"}
-              value="present"
+              defaultValue="present"
               onChange={(e) => presentOrNot(e, endDateRef, textRef)}
             />
           </div>
           <div className="form-control">
             <label htmlFor={"description"}>Description</label>
-            <textarea name={"description"} />
+            <textarea name={"description"} defaultValue={info.description} />
           </div>
 
-          <div className="form-control">
-            <label htmlFor={"description"}>Company</label>
-            <input type="text" name={"description"} />
-          </div>
           <div className="form-control">
             <label htmlFor={"country"}>Country</label>
-            <input type="text" name={"country"} />
-          </div>
-
-          <div className="form-control">
-            <label htmlFor={"city"}>City</label>
-            <input type="text" name={"city"} />
+            <input type="text" name={"country"} defaultValue={info.country} />
           </div>
 
           {/*  add a save button */}
           <div className="form-control">
-            <TButton value={"Save"} type={"submit"} />
+            <TButton
+              value={(<FaTrash />) as unknown as string}
+              className={" border-red-800"}
+              type={"button"}
+              onClick={handleDelete}
+            />{" "}
+            &nbsp;
+            <TButton
+              value={(<FaEdit />) as unknown as string}
+              type={"submit"}
+            />
           </div>
         </form>
       </div>
diff --git a/client/src/components/Modal/UpdateProjectModal.tsx b/client/src/components/Modal/UpdateProjectModal.tsx
index 56bdf6e..2bc98b5 100644
--- a/client/src/components/Modal/UpdateProjectModal.tsx
+++ b/client/src/components/Modal/UpdateProjectModal.tsx
@@ -1,39 +1,75 @@
 import { modalProps } from "./interfaces/modaInterface.ts";
 import TButton from "../Button/TButton.tsx";
-import { useRef } from "react";
+import { useContext, useRef } from "react";
 import { presentOrNot } from "./utils/helpers.ts";
 import "./styles/AddProjectModal.css";
-function AddProjectModal({ show, setShow }: modalProps) {
+import { TalentContext } from "../../pages/Talent/Talent.tsx";
+import { deleteProject, updateProject } from "../../api/project.ts";
+import { FaEdit, FaTrash } from "react-icons/fa";
+
+function AddProjectModal({ show, setShow, info }: modalProps) {
   const modalStyle = show ? "showModal" : "";
   const endDateRef = useRef<HTMLInputElement>(null);
   const textRef = useRef<HTMLHeadingElement>(null);
 
+  const tp = useContext(TalentContext);
+  const { talentProfile } = localStorage;
+  const tal = talentProfile ? JSON.parse(talentProfile as string).talent : {};
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    formData.append("talentId", tal._id);
+    const data = Object.fromEntries(formData);
+    await updateProject(info._id, data);
+    console.log("done");
+    tp.setRefresh(!tp.refresh);
+    const formElement = e.target as HTMLFormElement;
+    formElement.reset();
+    setShow(false);
+  };
+
+  const handleDelete = async () => {
+    await deleteProject(info._id);
+    tp.setRefresh(!tp.refresh);
+  };
+
   return (
     <div className={"Modal " + modalStyle}>
       <div className="content">
         <div className={"header-11"}>
-          <h1>Update Project</h1>{" "}
+          <h1>Add Project</h1>{" "}
           <TButton value={"X"} onClick={() => setShow(false)} />
         </div>
         <hr />
-        <form>
+        <form onSubmit={handleSubmit}>
           <div className="form-control">
             <label htmlFor="name">Name</label>
-            <input type="text" name={"name"} />
+            <input type="text" name={"name"} defaultValue={info.name} />
           </div>
           <div className="form-control">
             <label htmlFor="link">Link</label>
-            <input type="url" name={"link"} />
+            <input type="url" name={"link"} defaultValue={info.link} />
           </div>
 
           <div className={"flex start-end"}>
             <div className="form-control">
-              <label htmlFor="start">Start</label>
-              <input type="date" name={"start"} />
+              <label htmlFor="startDate">Start</label>
+              <input
+                type="date"
+                name={"startDate"}
+                defaultValue={new Date(info.startDate)
+                  .toISOString()
+                  .slice(0, 10)}
+              />
             </div>
             <div className="form-control">
-              <label htmlFor="end">End</label>
-              <input type="date" name={"end"} ref={endDateRef} />
+              <label htmlFor="endDate">End</label>
+              <input
+                type="date"
+                name={"endDate"}
+                ref={endDateRef}
+                defaultValue={new Date(info.endDate).toISOString().slice(0, 10)}
+              />
               <h1 ref={textRef} style={{ display: "none" }}>
                 Present
               </h1>
@@ -50,12 +86,22 @@ function AddProjectModal({ show, setShow }: modalProps) {
           </div>
           <div className="form-control">
             <label htmlFor={"description"}>Description</label>
-            <textarea name={"description"} />
+            <textarea name={"description"} defaultValue={info.description} />
           </div>
 
           {/*  add a save button */}
           <div className="form-control">
-            <TButton value={"Save"} type={"submit"} />
+            <TButton
+              value={(<FaTrash />) as unknown as string}
+              className={" border-red-800"}
+              type={"button"}
+              onClick={handleDelete}
+            />{" "}
+            &nbsp;
+            <TButton
+              value={(<FaEdit />) as unknown as string}
+              type={"submit"}
+            />{" "}
           </div>
         </form>
       </div>
diff --git a/client/src/components/Modal/UpdateSkillModal.tsx b/client/src/components/Modal/UpdateSkillModal.tsx
index fe99849..ecb64a0 100644
--- a/client/src/components/Modal/UpdateSkillModal.tsx
+++ b/client/src/components/Modal/UpdateSkillModal.tsx
@@ -1,31 +1,70 @@
 import { modalProps } from "./interfaces/modaInterface.ts";
 import TButton from "../Button/TButton.tsx";
 import "./styles/AddProjectModal.css";
+import { useContext } from "react";
+import { TalentContext } from "../../pages/Talent/Talent.tsx";
+import { deleteSkill, updateSkill } from "../../api/skills.ts";
+import { FaEdit, FaTrash } from "react-icons/fa";
 
-function AddSkillModal({ show, setShow }: modalProps) {
+function AddSkillModal({ show, setShow, info }: modalProps) {
   const modalStyle = show ? "showModal" : "";
 
+  const tp = useContext(TalentContext);
+  const { talentProfile } = localStorage;
+  const tal = talentProfile ? JSON.parse(talentProfile as string).talent : {};
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    formData.append("talentId", tal._id);
+    const data = Object.fromEntries(formData);
+
+    await updateSkill(info._id, data);
+    tp.setRefresh(!tp.refresh);
+    const formElement = e.target as HTMLFormElement;
+    formElement.reset();
+    setShow(false);
+  };
+
+  const handleDelete = async () => {
+    await deleteSkill(info._id);
+    tp.setRefresh(!tp.refresh);
+  };
+
   return (
     <div className={"Modal " + modalStyle}>
       <div className="content">
         <div className={"header-11"}>
-          <h1>Update Skill</h1>{" "}
+          <h1>Add Skill</h1>{" "}
           <TButton value={"X"} onClick={() => setShow(false)} />
         </div>
         <hr />
-        <form>
+        <form onSubmit={(e) => handleSubmit(e)}>
           <div className="form-control">
             <label htmlFor="name">Name</label>
-            <input type="text" name={"name"} />
+            <input type="text" name={"name"} defaultValue={info.name} />
           </div>
           <div className="form-control">
             <label htmlFor={"subSkills"}>Sub Skills</label>
-            <input type="text" name={"subSkills"} />
+            <input
+              type="text"
+              name={"subSkills"}
+              defaultValue={info.subSkills}
+            />
           </div>
 
           {/*  add a save button */}
           <div className="form-control">
-            <TButton value={"Save"} type={"submit"} />
+            <TButton
+              value={(<FaTrash />) as unknown as string}
+              className={" border-red-800"}
+              type={"button"}
+              onClick={handleDelete}
+            />{" "}
+            &nbsp;
+            <TButton
+              value={(<FaEdit />) as unknown as string}
+              type={"submit"}
+            />{" "}
           </div>
         </form>
       </div>
diff --git a/client/src/components/Modal/interfaces/modaInterface.ts b/client/src/components/Modal/interfaces/modaInterface.ts
index d8bf675..f4bdaae 100644
--- a/client/src/components/Modal/interfaces/modaInterface.ts
+++ b/client/src/components/Modal/interfaces/modaInterface.ts
@@ -1,6 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from "react";
 
 export interface modalProps {
   show: boolean;
   setShow: Dispatch<SetStateAction<boolean>>;
+  info?: any;
 }
diff --git a/client/src/components/talentProfile/AddNewComp.css b/client/src/components/talentProfile/AddNewComp.css
index d19fff9..846d7c4 100644
--- a/client/src/components/talentProfile/AddNewComp.css
+++ b/client/src/components/talentProfile/AddNewComp.css
@@ -4,7 +4,7 @@
 }
 .AddNewComp .title {
   font-weight: Bold;
-  font-size: 1.5rem;
+  font-size: 2rem;
 }
 
 /*# sourceMappingURL=AddNewComp.css.map */
diff --git a/client/src/components/talentProfile/AddNewComp.scss b/client/src/components/talentProfile/AddNewComp.scss
index 5aa9fbc..fe918a5 100644
--- a/client/src/components/talentProfile/AddNewComp.scss
+++ b/client/src/components/talentProfile/AddNewComp.scss
@@ -4,6 +4,6 @@
 
   .title {
     font-weight: Bold;
-    font-size: 1.5rem;
+    font-size: 2rem;
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Talent/Talent.tsx b/client/src/pages/Talent/Talent.tsx
index 6bcaad8..03c8091 100644
--- a/client/src/pages/Talent/Talent.tsx
+++ b/client/src/pages/Talent/Talent.tsx
@@ -88,7 +88,7 @@ const Talent = (): JSX.Element => {
             <div className="main">
               <div className="showcase">
                 <AddNewComp
-                  title={"experience"}
+                  title={"Experiences"}
                   children={
                     <AddExperienceModal show={showexp} setShow={setShowexp} />
                   }
@@ -105,7 +105,7 @@ const Talent = (): JSX.Element => {
               </div>
               <div className="showcase">
                 <AddNewComp
-                  title={"projects"}
+                  title={"Projects"}
                   onClick={() => {
                     setShowproj(true);
                   }}
@@ -122,7 +122,7 @@ const Talent = (): JSX.Element => {
               <div className="showcase">
                 {" "}
                 <AddNewComp
-                  title={"education"}
+                  title={"Educations"}
                   onClick={() => {
                     setShowedu(true);
                   }}

From 5a553ea50c31638aba005affe3ab84cbf7dbdc1c Mon Sep 17 00:00:00 2001
From: Betini Akarandut <99335881+betiniakarandut@users.noreply.github.com>
Date: Fri, 20 Oct 2023 22:27:55 +0100
Subject: [PATCH 02/20] B dev (#79)

* Test for talent controllers

* Talent controllers

* Talent route

* Added talentRoute endpoint

* Package json update

* Fixed linting issues

* Revert changes

* Accept integration: getTalentById

* Fixed no-unsed-var error

* test: add test for getall offers endpoint

* feat: add talent and auth route to client app

* feat: implement initial auth page

* feat: implement user toggle auth type

User can toggle between user signin type, Employer or talent singin

* chore: bypass eslint error

* chore: fix eslint unused vars

* chore: add package-lock.json to gitignore

* chore: remove package-lock.json from git track

* B dev (#27)

* Test for talent controllers

* Talent controllers

* Talent route

* Added talentRoute endpoint

* Package json update

* Fixed linting issues

* Revert changes

* Accept integration: getTalentById

* Fixed no-unsed-var error

* test: fix failed test for talentcontrollers

* chore: fix eslint hasOwnProperty

* Employer Signup and Login (#34)

* employerSignup

* employer signup and login

* added a test

* fixed

* Feat: About us section implemented (#36)

* feat: made about section

* feat: done with about us page

* fix: linting errors

* readme update&auth page minimal implementation (#39)

* docs: update readme with more project information

* feat: integrate auth pg with auth api for talents

* feat: talent signin and signup v1 implementation

* feat: update landing page with logo

* docs: update readme

Changed logo size in readme

* feat: implement talent and employer routing

Implement authentication for talent and employer to redirect to the various pages

* fix: fix eslint error&update project favicon

* bug: change talent onClick toggle to true or false

Changed the employer and talent toggle from the auth form to take in true or false as the onClick setIsTalent param instead of bool negation

* test: fix test assertions in talentController test

* docs: update readme with more project information

* feat: talent signin and signup v1 implementation

* docs: update readme

Changed logo size in readme

* feat: add seperate models for the following

certification
experience,
skills,
education and
project

* Rebasing staging:Mergeconflict resolved

* Added talentPagination endpoint

* Talent pagination file

* Talent pagination route

* Feat: Error handler

* Feat: Talent pagination

* Feat: Talent pagination route

* Feat:Landing-page

* fix: linting errors

* feat: made about section

* chore: made minor changes

* fix: made minor changes

* chore: general fixes

* chore: clean staging branch

* bug: add location to talent test mock data

* test: remove redundant test file

* feat: implemented datepicker component

* feat: creaed Talent Card component and implemented dummy content for employer page

* chore: fix tsc bundle error

fix tsc bundle error for talent undefined props

* feat: add skills resource endpoints

* feat: add endpoints for talent experience

* Incoming changes

* Conflict merge: Resolved

* refactor: initial code refactor to use redux

* Conflict merge: Resolved

* feat: implement user logout when token expire

* chore: fix client lint error

* feat: implement talent data fetching from the api

* feat: add route button to talent card

Added show talent details route button using react-router-dom Link functionality

* fix: fix eslint error

* feat: add user talent details and offers pages

Add client pages for talent offers and talent details

* Employer user read/write 40% progress (#64)

* feat: add x and linkedn socials to talent table

* feat: add more page routes&adjust navbar

Add talenthire, getranked, and employeroffer route pages
Adjust navbar to detect user logged in

* bug: fix assets images not loading in details page

Changed img src to absolute path and move all asset files to public directory

* feat: implement Show talent initial page

Implemented minimal talent details page from the employers account consuming api to get one talent by id

* fix: fix eslint useEffect dependencies

* Conflict merge: Resolved

* Conflict merge: Resolved

* Conflict merge: Resolved

* feat: add more talents props tables api endpoints

Added Certification, Education adn Projects resource endpoint

* feat: add patch http method for talent routes

* feat: add more offer routes

Add route to get offer by employer or talent id

* feat: implement minimal talent offer card

* feat: implement minimal talent offer page

* feat: add offer create redux action type

* bug: add offerData to createOffer post endpoint

* feat: add employer offer page initial design

* feat: add hire dev offer form for testing

* feat: add getbytalent id route for talent bio data

* feat: add talents subdata reducer actions && types

* fix: fix eslint error

* Conflict merge: Resolved

* Conflict merge: Resolved

* Merge conflict: resolving

* Conflict merge: Resolved

* Merge conflict: package-lock.json

* Conflict merge: Resolved

* Conflict merge: Resolved

* Merge conflict: Interfaces

* Conflict merge: Resolved

* Conflict merge: Resolved

* Merge conflict: Resolving

* Merge conflict: Accepted incoming changes

* Merge conflict: Accepted incoming changes

* Merge conflict: Accepted incoming changes

* Merge conflict: Resolving

* Merge conflict: Resolving

* Merge conflict: Resolving

* Feat: ProfileDropDownMenu

* Package-lock.json

* Feat: ProfileDropDownMenu component

* Fixed lint issues

* Fixed lint issues

* Repetition: removed duplicate code

* Test: features

---------

Co-authored-by: Ayobami <ayobamidele006@gmail.com>
Co-authored-by: Jojo Thomas <jojothomas1515@gmail.com>
Co-authored-by: Lawal Abubakar Babatunde <utility4all@gmail.com>
---
 .prettierrc                                  |   5 +
 client/package-lock.json                     |  15 +--
 client/src/actions/education.ts              |   1 +
 client/src/components/DropDown/DropDown.css  |  36 +++++
 client/src/components/DropDown/DropDown.tsx  |  16 +++
 client/src/components/Loading/Submit.tsx     |   9 --
 client/src/components/Navbar/TalentNav.tsx   | 133 +++++++++----------
 client/src/pages/Landing-Page/index.tsx      |   3 +-
 server/controllers/employerController.ts     |   4 +-
 server/controllers/offerController.ts        |   5 +-
 server/controllers/talentController.ts       |   2 +-
 server/index.ts                              |   1 -
 server/interfaces/education.ts               |   2 +-
 server/test/routes/offers.test.ts            |   8 +-
 server/test/routes/talentControllers.test.ts |  18 +--
 server/test/talentControllers.test.ts        | 103 ++++++++++++++
 16 files changed, 256 insertions(+), 105 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 client/src/components/DropDown/DropDown.css
 create mode 100644 client/src/components/DropDown/DropDown.tsx
 delete mode 100644 client/src/components/Loading/Submit.tsx
 create mode 100644 server/test/talentControllers.test.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..8d8629e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "jsxSingleQuote": true,
+  "singleQuote": true
+}
\ No newline at end of file
diff --git a/client/package-lock.json b/client/package-lock.json
index ff808e1..6d766d2 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -395,9 +395,9 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz",
-      "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.22.13",
@@ -2417,6 +2417,7 @@
         "react-is": "^16.7.0"
       }
     },
+
     "node_modules/hoist-non-react-statics/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -3168,11 +3169,7 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
+
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3261,6 +3258,7 @@
       }
     },
     "node_modules/react-is": {
+
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
@@ -3330,6 +3328,7 @@
         }
       }
     },
+
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/client/src/actions/education.ts b/client/src/actions/education.ts
index 736dbea..8443ab6 100644
--- a/client/src/actions/education.ts
+++ b/client/src/actions/education.ts
@@ -13,6 +13,7 @@ export const getEducationsTalent =
         try {
             setLoading(true);
             const { data } = await getTalentEducations(talentId);
+
             dispatch({ type: 'FETCH_TALENT_EDUCATION', payload: data });
             setLoading(false);
         } catch (error: any) {
diff --git a/client/src/components/DropDown/DropDown.css b/client/src/components/DropDown/DropDown.css
new file mode 100644
index 0000000..dd3d1b6
--- /dev/null
+++ b/client/src/components/DropDown/DropDown.css
@@ -0,0 +1,36 @@
+.dropDownProfile{
+    position: absolute;
+    top: 5rem;
+    right: 2rem;
+    width: 120px;
+    padding: 15px;
+    border-radius: 15px;
+    background-color: rgb(62, 143, 62);
+    border: 1px solid gray;
+    color: black;
+}
+
+.dropDownProfile::before{
+    content: '';
+    position: absolute;
+    top: -0.7rem;
+    left: 65px;
+    /* right: 1.1px; */
+    width: 24px;
+    height: 24px;
+    transform: rotate(37deg);
+    background-color: white;
+    border-left: 1px solid gray;
+    border-top: 1px solid gray;
+    background-color: rgb(62, 143, 62);
+
+}
+
+.logout{
+    cursor: pointer;
+    font-weight: 600;
+    box-sizing: content-box;
+    border-radius: 8px;
+    padding-left: 16px;
+    background-color: rgb(189, 45, 45);
+}
\ No newline at end of file
diff --git a/client/src/components/DropDown/DropDown.tsx b/client/src/components/DropDown/DropDown.tsx
new file mode 100644
index 0000000..96101df
--- /dev/null
+++ b/client/src/components/DropDown/DropDown.tsx
@@ -0,0 +1,16 @@
+import './DropDown.css'
+
+function ProfileDropDownMenu({ logout }: { logout: () => void }): JSX.Element {
+  
+  return (
+    <div className='flex flex-col dropDownProfile'>
+      <ul className='flex flex-col gap-3'>
+        <li>Edit Profile</li>
+        <li>Settings</li>
+        <li onClick={logout} className='logout'>Logout</li> {/* Use onClick to trigger the logout function */}
+      </ul>
+    </div>
+  )
+}
+
+export default ProfileDropDownMenu
\ No newline at end of file
diff --git a/client/src/components/Loading/Submit.tsx b/client/src/components/Loading/Submit.tsx
deleted file mode 100644
index d920733..0000000
--- a/client/src/components/Loading/Submit.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Submit = () => {
-    return (
-        <div className='text-center animate-spin w-6 h-6 border-b-2 border-green-500 border-solid rounded-full'></div>
-    );
-};
-
-export default Submit;
diff --git a/client/src/components/Navbar/TalentNav.tsx b/client/src/components/Navbar/TalentNav.tsx
index 29d150c..5ddad42 100644
--- a/client/src/components/Navbar/TalentNav.tsx
+++ b/client/src/components/Navbar/TalentNav.tsx
@@ -4,79 +4,78 @@ import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import jwtDecode from 'jwt-decode';
 import './TalentNav.css';
+import ProfileDropDownMenu from '../DropDown/DropDown';
 
 function TalentNav(): JSX.Element {
-	const navigate = useNavigate();
-	const location = useLocation();
-	const path = location.pathname;
-	let profile;
-	if (!path.includes('talent')) {
-		profile = JSON.parse(localStorage.getItem('employerProfile'));
-	} else {
-		profile = JSON.parse(localStorage.getItem('talentProfile'));
-	}
+  const [openProfile, setOpenProfile] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const path = location.pathname;
+  let profile;
+  if (!path.includes('talent')) {
+    profile = JSON.parse(localStorage.getItem('employerProfile'));
+  } else {
+    profile = JSON.parse(localStorage.getItem('talentProfile'));
+  }
 
-	const [user, setUser] = useState(profile);
+  const [user, setUser] = useState(profile);
 
-	const logout = () => {
-		localStorage.clear();
-		navigate('/auth');
-	};
+  const logout = () => {
+    localStorage.clear();
+    navigate('/auth');
+  };
 
-	// side effect on refresh when token expire
-	useEffect(() => {
-		const token = user?.token;
-		if (token) {
-			const decodedToken = jwtDecode(token);
-			if (decodedToken.exp * 1000 < new Date().getTime()) logout();
-		}
-	}, [location]);
-	return (
-		<div className='talent-nav'>
-			<div className='nav-con'>
-				<img
-					className={'rounded-full'}
-					src={'/assets/logo.png'}
-					alt=''
-				/>
-				<nav className='nav-items-con'>
-					{user.data ? (
-						''
-					) : (
-						<Link to={`/talent/getranked/${user.talent._id}`}>
-							Get Ranked
-						</Link>
-					)}
-					<Link to={'#'}>Messages</Link>
-					{/* we'll have a condition for this, if user is talent use talent else employer id */}
-					<Link
-						to={
-							user.talent
-								? `/offers/talent/${user.talent._id}`
-								: `/offers/employer/${user.data._id}`
-						}
-					>
-						Offers
-					</Link>
-				</nav>
-			</div>
+  // side effect on refresh when token expires
+  useEffect(() => {
+    const token = user?.token;
+    if (token) {
+      const decodedToken = jwtDecode(token);
+      if (decodedToken.exp * 1000 < new Date().getTime()) logout();
+    }
+  }, [location]);
 
-			<Link to={'#'}>
-				<img
-					src='/assets/talents/no_image.png'
-					alt='fine girl'
-					className='w-20 rounded-full'
-				/>
-				<p>{user.data ? user.data.name : user.talent.name}</p>
-			</Link>
-			<button
-				className='border-white-300 bg-green-600 hover:bg-green-300 rounded-lg border-2 w-36 h-10'
-				onClick={logout}
-			>
-				Log out
-			</button>
-		</div>
-	);
+  return (
+    <div className='talent-nav'>
+      <div className='nav-con'>
+        <img
+          className={'rounded-full'}
+          src={'/assets/logo.png'}
+          alt=''
+        />
+        <nav className='nav-items-con' onClick={() => setOpenProfile(true)}>
+          {user.data ? (
+            ''
+          ) : (
+            <Link to={`/talent/getranked/${user.talent._id}`}>
+              Get Ranked
+            </Link>
+          )}
+          <Link to={'#'}>Messages</Link>
+          <Link 
+            to={
+              user.talent
+                ? `/offers/talent/${user.talent._id}`
+                : `/offers/employer/${user.data._id}`
+            }
+          >
+            Offers
+          </Link>
+        </nav>
+      </div>
+
+      <Link to={'#'} >
+        <img
+          src='/assets/talents/no_image.png'
+          alt='fine girl'
+          className='w-20 rounded-full'
+          onClick={() => setOpenProfile((prev) => !prev)}
+        />
+        <p>{user.data ? user.data.name : user.talent.name}</p>
+        
+      </Link>
+      {openProfile && <ProfileDropDownMenu logout={logout} />}
+    </div>
+  );
 }
 
 export default TalentNav;
diff --git a/client/src/pages/Landing-Page/index.tsx b/client/src/pages/Landing-Page/index.tsx
index 0e45805..ecee9a7 100644
--- a/client/src/pages/Landing-Page/index.tsx
+++ b/client/src/pages/Landing-Page/index.tsx
@@ -1,3 +1,4 @@
+
 import Home from "./Home";
 import Faq from "./FAQ";
 import AboutUs from "./About_us";
@@ -11,6 +12,6 @@ const LandingPage = () => {
       <Faq />
     </>
   );
-};
+}
 
 export default LandingPage;
diff --git a/server/controllers/employerController.ts b/server/controllers/employerController.ts
index 0705d16..6f5a920 100644
--- a/server/controllers/employerController.ts
+++ b/server/controllers/employerController.ts
@@ -9,7 +9,7 @@ const JWT_SECRET = process.env.JWT_SECRET ?? 'your-secret-key';
 export const employerSignup = async (
     req: Request,
     res: Response,
-    next: NextFunction
+    next: NextFunction,
 ): Promise<Response | undefined> => {
     const { name, email, password } = req.body;
 
@@ -48,7 +48,7 @@ export const employerSignup = async (
 export const employerLogin = async (
     req: Request,
     res: Response,
-    next: NextFunction
+    next: NextFunction,
 ): Promise<Response | undefined> => {
     const { email, password } = req.body;
 
diff --git a/server/controllers/offerController.ts b/server/controllers/offerController.ts
index 9f1afc7..01cdbb5 100644
--- a/server/controllers/offerController.ts
+++ b/server/controllers/offerController.ts
@@ -84,7 +84,7 @@ export const getOffer = async <T>(
 // get offer by talentId
 export const getOfferByTalent = async <T>(
     req: GenericRequest<T>,
-    res: GenericResponse<ResponseDocument, string>
+    res: GenericResponse<ResponseDocument, string>,
 ) => {
     try {
         const { talentId } = req.params;
@@ -106,10 +106,11 @@ export const getOfferByTalent = async <T>(
     }
 };
 
+
 // get offer by employerId
 export const getOfferByEmployer = async <T>(
     req: GenericRequest<T>,
-    res: GenericResponse<ResponseDocument, string>
+    res: GenericResponse<ResponseDocument, string>,
 ) => {
     try {
         const { employerId } = req.params;
diff --git a/server/controllers/talentController.ts b/server/controllers/talentController.ts
index e1454c8..60d0707 100644
--- a/server/controllers/talentController.ts
+++ b/server/controllers/talentController.ts
@@ -186,4 +186,4 @@ export const deleteTalent = async (
     } catch (err) {
         next(err);
     }
-};
+};
\ No newline at end of file
diff --git a/server/index.ts b/server/index.ts
index ea301e6..dddf4f2 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -29,7 +29,6 @@ const PORT: number = 3000;
 app.use(cors({ origin: true, credentials: true }));
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
-app.use(cors());
 
 app.use('/employers', employerRoutes);
 app.use('/offers', offerRoutes);
diff --git a/server/interfaces/education.ts b/server/interfaces/education.ts
index 51c29cf..89920c3 100644
--- a/server/interfaces/education.ts
+++ b/server/interfaces/education.ts
@@ -12,4 +12,4 @@ export interface Education {
 export interface EducationResponse extends Education {
     links?: Array<object>;
     message?: string;
-}
+}
\ No newline at end of file
diff --git a/server/test/routes/offers.test.ts b/server/test/routes/offers.test.ts
index 0a1b18b..30cddb1 100644
--- a/server/test/routes/offers.test.ts
+++ b/server/test/routes/offers.test.ts
@@ -20,16 +20,16 @@ describe('test offer endpoints', () => {
 
         const offer = new OfferModel(offerData);
         await offer.save();
-    });
+    }, 10000);
     beforeEach(async () => {
         app = express();
         await app.use(express.json());
         await app.use('/offers', offerRoutes);
-    });
+    }, 10000);
     afterAll(async () => {
         await dropDB();
         await disconnectDB();
-    });
+    }, 10000);
 
     it('test get all offers /offers', async () => {
         const res: GenericResponse<ResponseDocument, string> =
@@ -40,5 +40,5 @@ describe('test offer endpoints', () => {
         expect(JSON.parse(res.text)).toHaveProperty('links');
         expect(JSON.parse(res.text)['offers']).toBeInstanceOf(Array);
         expect(JSON.parse(res.text)['offers'][0]).toHaveProperty('_id');
-    });
+    }, 10000);
 });
diff --git a/server/test/routes/talentControllers.test.ts b/server/test/routes/talentControllers.test.ts
index 62612ec..cd1fa8e 100644
--- a/server/test/routes/talentControllers.test.ts
+++ b/server/test/routes/talentControllers.test.ts
@@ -10,12 +10,12 @@ dotenv.config();
 
 beforeAll(async () => {
     await connectDB();
-});
+}, 10000);
 
 afterAll(async () => {
     await dropDB();
     await disconnectDB();
-});
+}, 10000);
 
 describe('Authentication TalentController Tests', () => {
     let app;
@@ -23,7 +23,7 @@ describe('Authentication TalentController Tests', () => {
         app = express();
         await app.use(express.json());
         await app.use('/talents', talentRoutes);
-    });
+    }, 10000);
     beforeAll(async () => {
         const talentData = {
             name: 'Test User',
@@ -33,7 +33,7 @@ describe('Authentication TalentController Tests', () => {
 
         const talent = new Talent(talentData);
         await talent.save();
-    });
+    }, 10000);
 
     it('should sign up a new talent', async () => {
         const res = await request(app).post('/talents/signup').send({
@@ -43,7 +43,7 @@ describe('Authentication TalentController Tests', () => {
         });
         expect(JSON.parse(res.text)).toHaveProperty('token');
         expect(JSON.parse(res.text)).toHaveProperty('newTalent');
-    });
+    }, 10000);
 
     it('should prevent signing up with an existing email', async () => {
         const res = await request(app)
@@ -55,10 +55,10 @@ describe('Authentication TalentController Tests', () => {
             .expect(400);
 
         expect(JSON.parse(res.text)).toHaveProperty(
-            'message',
+            'Message',
             'Email already in use'
         );
-    });
+    }, 10000);
 
     it('should sign in a user', async () => {
         const res = await request(app)
@@ -68,7 +68,7 @@ describe('Authentication TalentController Tests', () => {
 
         expect(JSON.parse(res.text)).toHaveProperty('token');
         expect(JSON.parse(res.text)).toHaveProperty('talent');
-    });
+    }, 10000);
 
     it('should prevent signing in with invalid credentials', async () => {
         const res = await request(app)
@@ -80,5 +80,5 @@ describe('Authentication TalentController Tests', () => {
             'message',
             'Invalid credentials'
         );
-    });
+    },10000);
 });
diff --git a/server/test/talentControllers.test.ts b/server/test/talentControllers.test.ts
new file mode 100644
index 0000000..9d0a482
--- /dev/null
+++ b/server/test/talentControllers.test.ts
@@ -0,0 +1,103 @@
+import { Request, Response } from 'express';
+import bcrypt from 'bcrypt';
+import jwt from 'jsonwebtoken';
+import dotenv from 'dotenv';
+import Talent from '../models/talentModel';
+import { signUp, signIn } from '../controllers/talentController';
+
+dotenv.config();
+
+jest.mock('bcrypt');
+jest.mock('jsonwebtoken');
+jest.mock('../models/talentModel');
+
+describe('Auth Controller', () => {
+    const mockedRequest: Partial<Request> = {};
+    const mockedResponse: Partial<Response> = {
+        status: jest.fn().mockReturnThis(),
+        json: jest.fn(),
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('signUp', () => {
+        it('should create a new talent and return a token', async () => {
+            const reqBody = {
+                name: 'John Doe',
+                email: 'john@example.com',
+                password: 'password123',
+            };
+            const hashedPassword = 'hashedPassword123';
+            const mockTalent = new Talent({
+                ...reqBody,
+                hashedPassword,
+            });
+            const mockToken = 'mockToken123';
+
+            Talent.findOne = jest.fn().mockResolvedValueOnce(null);
+            bcrypt.hash = jest.fn().mockResolvedValueOnce(hashedPassword);
+            Talent.prototype.save = jest.fn().mockResolvedValueOnce(mockTalent);
+            jwt.sign = jest.fn().mockReturnValueOnce(mockToken);
+
+            mockedRequest.body = reqBody;
+
+            await signUp(mockedRequest as Request, mockedResponse as Response);
+
+            expect(Talent.findOne).toHaveBeenCalledWith({ email: reqBody.email });
+            expect(bcrypt.hash).toHaveBeenCalledWith(reqBody.password, 10);
+            expect(Talent.prototype.save).toHaveBeenCalled();
+            expect(jwt.sign).toHaveBeenCalledWith(
+                { userId: mockTalent._id },
+                expect.any(String),
+                { expiresIn: '24h' }
+            );
+            expect(mockedResponse.status).toHaveBeenCalledWith(201);
+            expect(mockedResponse.json).toHaveBeenCalledWith({
+                token: mockToken,
+                userId: mockTalent._id,
+            });
+        });
+
+    });
+
+    describe('signIn', () => {
+        it('should sign in a talent and return a token', async () => {
+            const reqBody = {
+                email: 'john@example.com',
+                password: 'password123',
+            };
+            const hashedPassword = 'hashedPassword123';
+            const mockTalent = new Talent({
+                name: 'John Doe',
+                email: reqBody.email,
+                hashedPassword,
+            });
+            const mockToken = 'mockToken123';
+
+            Talent.findOne = jest.fn().mockResolvedValueOnce(mockTalent);
+            bcrypt.compare = jest.fn().mockResolvedValueOnce(true);
+            jwt.sign = jest.fn().mockReturnValueOnce(mockToken);
+
+            mockedRequest.body = reqBody;
+
+            await signIn(mockedRequest as Request, mockedResponse as Response);
+
+            expect(Talent.findOne).toHaveBeenCalledWith({ email: reqBody.email });
+            expect(bcrypt.compare).toHaveBeenCalledWith(
+                reqBody.password,
+                mockTalent.hashedPassword
+            );
+            expect(jwt.sign).toHaveBeenCalledWith(
+                { userId: mockTalent._id },
+                expect.any(String),
+                { expiresIn: '1h' }
+            );
+            expect(mockedResponse.json).toHaveBeenCalledWith({
+                token: mockToken,
+                userId: mockTalent._id,
+            });
+        });
+    });
+});

From 83f27d74f6bea4c45b95c5a15846833edeaebb9d Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Fri, 20 Oct 2023 23:09:58 +0100
Subject: [PATCH 03/20] test: remove unwanted test file

Remove unwanted test file allowing test to fail
---
 server/index.ts                              |   2 +-
 server/test/routes/talentControllers.test.ts |  22 ++--
 server/test/talentControllers.test.ts        | 103 -------------------
 3 files changed, 12 insertions(+), 115 deletions(-)
 delete mode 100644 server/test/talentControllers.test.ts

diff --git a/server/index.ts b/server/index.ts
index dddf4f2..785fd68 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -26,7 +26,7 @@ const dbConnString = `mongodb+srv://${dbUsername}:${dbPwd}@meetdevcluster.udvey1
 const app = express();
 
 const PORT: number = 3000;
-app.use(cors({ origin: true, credentials: true }));
+app.use(cors());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
 
diff --git a/server/test/routes/talentControllers.test.ts b/server/test/routes/talentControllers.test.ts
index cd1fa8e..6c0b4a0 100644
--- a/server/test/routes/talentControllers.test.ts
+++ b/server/test/routes/talentControllers.test.ts
@@ -10,12 +10,12 @@ dotenv.config();
 
 beforeAll(async () => {
     await connectDB();
-}, 10000);
+});
 
 afterAll(async () => {
     await dropDB();
     await disconnectDB();
-}, 10000);
+});
 
 describe('Authentication TalentController Tests', () => {
     let app;
@@ -23,7 +23,7 @@ describe('Authentication TalentController Tests', () => {
         app = express();
         await app.use(express.json());
         await app.use('/talents', talentRoutes);
-    }, 10000);
+    });
     beforeAll(async () => {
         const talentData = {
             name: 'Test User',
@@ -33,7 +33,7 @@ describe('Authentication TalentController Tests', () => {
 
         const talent = new Talent(talentData);
         await talent.save();
-    }, 10000);
+    });
 
     it('should sign up a new talent', async () => {
         const res = await request(app).post('/talents/signup').send({
@@ -43,7 +43,7 @@ describe('Authentication TalentController Tests', () => {
         });
         expect(JSON.parse(res.text)).toHaveProperty('token');
         expect(JSON.parse(res.text)).toHaveProperty('newTalent');
-    }, 10000);
+    });
 
     it('should prevent signing up with an existing email', async () => {
         const res = await request(app)
@@ -55,10 +55,10 @@ describe('Authentication TalentController Tests', () => {
             .expect(400);
 
         expect(JSON.parse(res.text)).toHaveProperty(
-            'Message',
-            'Email already in use'
+            'message',
+            'Email already in use',
         );
-    }, 10000);
+    });
 
     it('should sign in a user', async () => {
         const res = await request(app)
@@ -68,7 +68,7 @@ describe('Authentication TalentController Tests', () => {
 
         expect(JSON.parse(res.text)).toHaveProperty('token');
         expect(JSON.parse(res.text)).toHaveProperty('talent');
-    }, 10000);
+    });
 
     it('should prevent signing in with invalid credentials', async () => {
         const res = await request(app)
@@ -78,7 +78,7 @@ describe('Authentication TalentController Tests', () => {
 
         expect(JSON.parse(res.text)).toHaveProperty(
             'message',
-            'Invalid credentials'
+            'Invalid credentials',
         );
-    },10000);
+    });
 });
diff --git a/server/test/talentControllers.test.ts b/server/test/talentControllers.test.ts
deleted file mode 100644
index 9d0a482..0000000
--- a/server/test/talentControllers.test.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Request, Response } from 'express';
-import bcrypt from 'bcrypt';
-import jwt from 'jsonwebtoken';
-import dotenv from 'dotenv';
-import Talent from '../models/talentModel';
-import { signUp, signIn } from '../controllers/talentController';
-
-dotenv.config();
-
-jest.mock('bcrypt');
-jest.mock('jsonwebtoken');
-jest.mock('../models/talentModel');
-
-describe('Auth Controller', () => {
-    const mockedRequest: Partial<Request> = {};
-    const mockedResponse: Partial<Response> = {
-        status: jest.fn().mockReturnThis(),
-        json: jest.fn(),
-    };
-
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    describe('signUp', () => {
-        it('should create a new talent and return a token', async () => {
-            const reqBody = {
-                name: 'John Doe',
-                email: 'john@example.com',
-                password: 'password123',
-            };
-            const hashedPassword = 'hashedPassword123';
-            const mockTalent = new Talent({
-                ...reqBody,
-                hashedPassword,
-            });
-            const mockToken = 'mockToken123';
-
-            Talent.findOne = jest.fn().mockResolvedValueOnce(null);
-            bcrypt.hash = jest.fn().mockResolvedValueOnce(hashedPassword);
-            Talent.prototype.save = jest.fn().mockResolvedValueOnce(mockTalent);
-            jwt.sign = jest.fn().mockReturnValueOnce(mockToken);
-
-            mockedRequest.body = reqBody;
-
-            await signUp(mockedRequest as Request, mockedResponse as Response);
-
-            expect(Talent.findOne).toHaveBeenCalledWith({ email: reqBody.email });
-            expect(bcrypt.hash).toHaveBeenCalledWith(reqBody.password, 10);
-            expect(Talent.prototype.save).toHaveBeenCalled();
-            expect(jwt.sign).toHaveBeenCalledWith(
-                { userId: mockTalent._id },
-                expect.any(String),
-                { expiresIn: '24h' }
-            );
-            expect(mockedResponse.status).toHaveBeenCalledWith(201);
-            expect(mockedResponse.json).toHaveBeenCalledWith({
-                token: mockToken,
-                userId: mockTalent._id,
-            });
-        });
-
-    });
-
-    describe('signIn', () => {
-        it('should sign in a talent and return a token', async () => {
-            const reqBody = {
-                email: 'john@example.com',
-                password: 'password123',
-            };
-            const hashedPassword = 'hashedPassword123';
-            const mockTalent = new Talent({
-                name: 'John Doe',
-                email: reqBody.email,
-                hashedPassword,
-            });
-            const mockToken = 'mockToken123';
-
-            Talent.findOne = jest.fn().mockResolvedValueOnce(mockTalent);
-            bcrypt.compare = jest.fn().mockResolvedValueOnce(true);
-            jwt.sign = jest.fn().mockReturnValueOnce(mockToken);
-
-            mockedRequest.body = reqBody;
-
-            await signIn(mockedRequest as Request, mockedResponse as Response);
-
-            expect(Talent.findOne).toHaveBeenCalledWith({ email: reqBody.email });
-            expect(bcrypt.compare).toHaveBeenCalledWith(
-                reqBody.password,
-                mockTalent.hashedPassword
-            );
-            expect(jwt.sign).toHaveBeenCalledWith(
-                { userId: mockTalent._id },
-                expect.any(String),
-                { expiresIn: '1h' }
-            );
-            expect(mockedResponse.json).toHaveBeenCalledWith({
-                token: mockToken,
-                userId: mockTalent._id,
-            });
-        });
-    });
-});

From 9490e3eff1c11ec42bae5451f8a9fe8b888ab77c Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Sat, 21 Oct 2023 13:08:03 +0100
Subject: [PATCH 04/20] docs: update readme

---
 README.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 9b02843..e7b123f 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ A platform where developers from across the globe meets employers and vice versa
 
 # 📖 MeetDevs <a name="about-project"></a>
 
-**MeetDevs** is a cutting-edge website designed to connect employers with talented individuals in the tech industry. With a user-friendly interface and advanced search features, MeetDevs makes it easy for employers to find the perfect candidates for their projects or job openings. Employers can browse through a diverse pool of skilled professionals, filtering by specific skills, experience level, and location. The platform also allows employers to view detailed profiles, portfolios, and resumes of potential hires, making the selection process more efficient and informed. MeetDevs aims to streamline the hiring process, bringing together employers and talented developers in a seamless and productive manner.
+**MeetDevs** is a cutting-edge website designed to connect employers with talented individuals in the tech industry. With a user-friendly interface and advanced search features, MeetDevs makes it easy for employers to find the perfect candidates for their projects or job openings. Employers can browse through a diverse pool of skilled professionals, filtering by specific skills, experience level, and location. The platform also allows employers to view detailed profiles, portfolios, and resumes of potential hires, making the selection process more efficient and informed. MeetDevs aims to streamline the hiring process, bringing together employers and talented developers in a seamless and productive manner. You don't have to be a networking pro! to get that your dream job, you just need be a master at your craft and you will get that your dream job you deserve. So, even as an introvert you can get that job
 ## 🛠 Built With <a name="built-with"></a>
 
 ### MERN Stack <a name="tech-stack"></a>
@@ -63,10 +63,8 @@ A platform where developers from across the globe meets employers and vice versa
 
 ### Key Features <a name="key-features"></a>
 
-- **Ranking System**:
-- **Fairness Policy**:
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+- **Ranking System**: Talent get ranked based on their skills, years of experience and collaborations, leveraging github api to obtain metrics to be used to calculate talent rank percentile and weekly coding challenge, thus employer can easily identify the top 1% on the platform 
+- **Fairness Policy**: Every talent has a fair chance of getting their dream job, for no talent can accept two offers at a time, hence, other talent has a fair chance of getting served eventually. 
 
 <!-- LIVE DEMO -->
 

From 96c248160744389c37d86f2574c28e50aa960630 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Sat, 21 Oct 2023 14:20:34 +0100
Subject: [PATCH 05/20] refactor: refactor calculate percentile algorithm

---
 client/src/pages/Talent/GetRanked.tsx       | 88 ++++++++++++---------
 client/src/pages/Talent/TalentOfferCard.tsx |  4 +-
 2 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/client/src/pages/Talent/GetRanked.tsx b/client/src/pages/Talent/GetRanked.tsx
index 8cf0c05..190f9df 100644
--- a/client/src/pages/Talent/GetRanked.tsx
+++ b/client/src/pages/Talent/GetRanked.tsx
@@ -29,46 +29,56 @@ const GetRanked = () => {
     const calculatePercentile = async () => {
         let score = 0;
         let percentile = 0;
-        if (talentUser.github) {
-            const result = await getGithubData(talentUser.github);
-            if (result.data.public_repos <= 30) score += 30;
-            else if (
-                result.data.public_repos > 30 &&
-                result.data.public_repos <= 70
-            )
-                score += 70;
-            else score += 100;
-
-            const updatedDate = new Date(result.data.updated_at);
-            const createdDate = new Date(result.data.created_at);
-
-            const timeDifference = updatedDate - createdDate;
-
-            const millisecondsInYear = 1000 * 60 * 60 * 24 * 365.25;
-            const yearsOfExperience = timeDifference / millisecondsInYear;
-
-            const roundedYears = Math.round(yearsOfExperience);
-            if (roundedYears <= 3) score += 30;
-            else if (yearsOfExperience > 3 && yearsOfExperience <= 7)
-                score += 70;
-            else score += 100;
-
-            if (result.data.followers <= 30) score += 30;
-            else if (result.data.followers > 30 && result.data.followers <= 70)
-                score += 70;
-            else score += 100;
-
-            if (scores.length <= 1) {
-                percentile = 100;
-            } else {
-                scores.sort((a, b) => a - b);
-                const lesserScores = scores.filter((item) => item < score);
-                const lesserScoreLen = lesserScores.length;
-                if (lesserScoreLen <= 1) percentile = 100;
-                else percentile = (lesserScoreLen / scores.length) * 100;
+
+        if (!talentUser.github) return [score, percentile];
+
+        const result = await getGithubData(talentUser.github);
+        const { public_repos, created_at, updated_at, followers } = result.data;
+
+        const repoRanges = [
+            [[0, 30], 30],
+            [[31, 70], 70],
+            [[71, Infinity], 100],
+        ];
+
+        const experienceRanges = [
+            [[0, 3], 30],
+            [[4, 7], 70],
+            [[8, Infinity], 100],
+        ];
+
+        const calculateScore = (value, ranges) => {
+            for (const [range, points] of ranges) {
+                if (value >= range[0] && value <= range[1]) {
+                    score += points;
+                    break;
+                }
             }
-            console.log(percentile);
-            return [score, percentile];
+        };
+
+        const updatedDate = new Date(updated_at);
+        const createdDate = new Date(created_at);
+
+        const timeDifference = updatedDate - createdDate;
+
+        const millisecondsInYear = 1000 * 60 * 60 * 24 * 365.25;
+        const yearsOfExperience = timeDifference / millisecondsInYear;
+
+        const roundedYears = Math.round(yearsOfExperience);
+
+        calculateScore(public_repos, repoRanges);
+        calculateScore(roundedYears, experienceRanges);
+
+        calculateScore(followers, repoRanges);
+
+        if (scores.length <= 1) {
+            percentile = 100;
+        } else {
+            scores.sort((a, b) => a - b);
+            const lesserScores = scores.filter((item) => item < score);
+            const lesserScoreLen = lesserScores.length;
+            if (lesserScoreLen <= 1) percentile = 100;
+            else percentile = (lesserScoreLen / scores.length) * 100;
         }
         return [score, percentile];
     };
diff --git a/client/src/pages/Talent/TalentOfferCard.tsx b/client/src/pages/Talent/TalentOfferCard.tsx
index 648fe16..674cae6 100644
--- a/client/src/pages/Talent/TalentOfferCard.tsx
+++ b/client/src/pages/Talent/TalentOfferCard.tsx
@@ -60,9 +60,7 @@ const TalentOfferCard: React.FC<TalentOfferCardProps> = ({
                                 Job Title: {offer.title}
                             </h1>
                             <p className='hidden sm:block'>
-                                Lorem ipsum dolor sit amet, consectetur
-                                adipiscing elit. Sed do eiusmod tempor
-                                incididunt ut labore et dolore magna aliqua.
+                                {offer.description}
                             </p>
                         </div>
                         <div className='flex justify-center sm:justify-end m-2 sm:m-5 sm:flex-wrap gap-2 sm:gap-3'>

From 6128739e5f72edc3b66648d0ebd14b8f719ed04f Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Mon, 23 Oct 2023 12:43:38 +0100
Subject: [PATCH 06/20] feat: implement employer homepage talent pagination

---
 client/src/actions/talent.ts           | 13 ++++
 client/src/api/pagination.ts           |  6 ++
 client/src/pages/Employer/Employer.tsx | 99 ++++++++++++++++----------
 client/src/reducers/talents.ts         |  7 +-
 server/index.ts                        | 20 +++---
 server/pagination/talentPagination.ts  | 35 ++++-----
 server/routes/talentPaginationRoute.ts |  6 +-
 7 files changed, 117 insertions(+), 69 deletions(-)
 create mode 100644 client/src/api/pagination.ts

diff --git a/client/src/actions/talent.ts b/client/src/actions/talent.ts
index 66706fb..fc2f9ba 100644
--- a/client/src/actions/talent.ts
+++ b/client/src/actions/talent.ts
@@ -1,5 +1,7 @@
 import { getAllTalents, getATalent, patchTalent } from '../api/talent';
 
+import { talentsPerPage } from '../api/pagination';
+
 export const getTalents = (setLoading) => async (dispatch) => {
 	try {
 		setLoading(true);
@@ -11,6 +13,17 @@ export const getTalents = (setLoading) => async (dispatch) => {
 	}
 };
 
+export const getTalentsPerPage = (setLoading, pageNo) => async (dispatch) => {
+	try {
+		setLoading(true);
+		const { data } = await talentsPerPage(pageNo);
+		dispatch({ type: 'FETCH_ALL_PAGINATE', payload: data });
+		setLoading(false);
+	} catch (error) {
+		console.log(error.message);
+	}
+};
+
 export const getTalent = (setLoading, id) => async (dispatch) => {
 	try {
 		setLoading(true);
diff --git a/client/src/api/pagination.ts b/client/src/api/pagination.ts
new file mode 100644
index 0000000..706d271
--- /dev/null
+++ b/client/src/api/pagination.ts
@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const talentsPerPage = (pageNo) => {
+  const talents = axios.get(`http://localhost:3000/api/talents?page=${pageNo}`);
+  return talents;
+};
diff --git a/client/src/pages/Employer/Employer.tsx b/client/src/pages/Employer/Employer.tsx
index 4968601..c575957 100644
--- a/client/src/pages/Employer/Employer.tsx
+++ b/client/src/pages/Employer/Employer.tsx
@@ -4,47 +4,74 @@ import Search from '../../components/util/Search';
 import { useEffect, useState } from 'react';
 import Loading from '../../components/Loading/Loading';
 import { useDispatch, useSelector } from 'react-redux';
-import { getTalents } from '../../actions/talent';
+import { useLocation } from 'react-router-dom';
+import { getTalents, getTalentsPerPage } from '../../actions/talent';
+// import { talentsPerPage } from '../../api/pagination';
 
 const Employer = () => {
-    const { talents } = useSelector((state) => state.talents);
-    const dispatch = useDispatch();
-    const [loading, setLoading] = useState();
+  // const { talents } = useSelector((state) => state.talents);
+  const { pagination } = useSelector((state) => state.talents);
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
 
-    useEffect(() => {
-        dispatch(getTalents(setLoading));
-    }, [dispatch]);
-    return (
-        <>
-            <TalentNav />
+  useEffect(() => {
+    dispatch(getTalentsPerPage(setLoading, page));
+    // dispatch(getTalents(setLoading));
+  }, [page]);
 
-            <div className='bg-gray-100 min-h-screen p-5'>
-                <div className='flex mx-10 justify-end'>
-                    <Search />
-                </div>
-                <h1 className='text-3xl font-bold mb-5'>Available Talents</h1>
-                {!loading ? (
-                    <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4'>
-                        {talents.map((talent) => (
-                            <TalentCard
-                                name={talent.name}
-                                key={talent._id}
-                                jobRole={talent.jobRole}
-                                location={talent.location}
-                                bio={talent.bio}
-                                github={talent.github}
-                                profileImg={talent.profileImg}
-                                id={talent._id}
-                                rank={talent.rank}
-                            />
-                        ))}
-                    </div>
-                ) : (
-                    <Loading />
-                )}
+  const prevPage = () => setPage((cur) => cur - 1);
+  const nextPage = () => setPage((cur) => cur + 1);
+  return (
+    <>
+      <TalentNav />
+
+      <div className='bg-gray-100 min-h-screen p-5'>
+        <div className='flex mx-10 justify-end'>
+          <Search />
+        </div>
+        <h1 className='text-3xl font-bold mb-5'>Available Talents</h1>
+        {!loading ? (
+          <div>
+            <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4'>
+              {pagination.talents.map((talent) => (
+                <TalentCard
+                  name={talent.name}
+                  key={talent._id}
+                  jobRole={talent.jobRole}
+                  location={talent.location}
+                  bio={talent.bio}
+                  github={talent.github}
+                  profileImg={talent.profileImg}
+                  id={talent._id}
+                  rank={talent.rank}
+                />
+              ))}
+            </div>
+            <div className='flex justify-left gap-2'>
+              <button
+                disabled={page === 1}
+                className='w-[70px] hover:border-green-200 h-[30px] rounded-md my-5 border-[1px] border-green-400 text-sm'
+                onClick={prevPage}
+              >
+                Prev
+              </button>
+              <button
+                disabled={page === pagination.totalPages}
+                className='w-[70px] hover:border-green-200 h-[30px] rounded-md my-5 border-[1px] border-green-400 text-sm'
+                onClick={nextPage}
+              >
+                Next
+              </button>
             </div>
-        </>
-    );
+          </div>
+        ) : (
+          <Loading />
+        )}
+      </div>
+    </>
+  );
 };
 
 export default Employer;
diff --git a/client/src/reducers/talents.ts b/client/src/reducers/talents.ts
index 632b412..661f872 100644
--- a/client/src/reducers/talents.ts
+++ b/client/src/reducers/talents.ts
@@ -1,6 +1,6 @@
 export const talentReducer = (
-	state = { isLoading: false, talents: [], talent: null },
-	action
+	state = { isLoading: false, talents: [], talent: null, pagination: null },
+	action,
 ) => {
 	switch (action.type) {
 		case 'START_LOADING':
@@ -10,6 +10,9 @@ export const talentReducer = (
 		case 'FETCH_ALL':
 			return { ...state, talents: action.payload };
 
+		case 'FETCH_ALL_PAGINATE':
+			return { ...state, pagination: action.payload };
+
 		case 'FETCH_TALENT':
 			return { ...state, talent: action.payload };
 
diff --git a/server/index.ts b/server/index.ts
index 785fd68..0c565bb 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -43,21 +43,21 @@ app.use('/api', talentPaginationRoute); //paginated api for talents
 
 // misc
 app.get('/', (req, res) => {
-    res.send('Welcome to MeetDevs');
+  res.send('Welcome to MeetDevs');
 });
 
 // app.use(errorHandler);
 
 mongoose
-    .connect(dbConnString, { useNewUrlParser: true } as ConnectOptions)
-    .then(() => {
-        console.log('Database Connected');
-        app.listen(PORT, () => {
-            console.log(`Server is running on Port ${PORT}`);
-        });
-    })
-    .catch((error) => {
-        console.log(error);
+  .connect(dbConnString, { useNewUrlParser: true } as ConnectOptions)
+  .then(() => {
+    console.log('Database Connected');
+    app.listen(PORT, () => {
+      console.log(`Server is running on Port ${PORT}`);
     });
+  })
+  .catch((error) => {
+    console.log(error);
+  });
 
 export default app;
diff --git a/server/pagination/talentPagination.ts b/server/pagination/talentPagination.ts
index bddb584..838185f 100644
--- a/server/pagination/talentPagination.ts
+++ b/server/pagination/talentPagination.ts
@@ -9,25 +9,26 @@ import Talent from '../models/talentModel';
  * total number of pages and talents.
  */
 const paginateTalents = async (req: Request, res: Response) => {
-    const rawPage = req.query.page as string | undefined;
-    const page = rawPage ? parseInt(rawPage) : 1; // Current page, default to 1
-    const perPage = 12; // Number of talents per page
+  const rawPage = req.query.page as string | undefined;
+  const page = rawPage ? parseInt(rawPage) : 1; // Current page, default to 1
+  const perPage = 9; // Number of talents per page
 
-    try {
-        const totalTalents = await Talent.countDocuments();
-        const talents = await Talent.find()
-            .skip((page - 1) * perPage)
-            .limit(perPage);
+  try {
+    const totalTalents = await Talent.countDocuments();
+    const talents = await Talent.find()
+      .skip((page - 1) * perPage)
+      .limit(perPage);
 
-        res.json({
-            totalTalents,
-            currentPage: page,
-            totalPages: Math.ceil(totalTalents / perPage),
-            talents,
-        });
-    } catch (error) {
-        errorHandler(error, res, req, error.NextFunction);
-    }
+    res.json({
+      totalTalents,
+      currentPage: page,
+      totalPages: Math.ceil(totalTalents / perPage),
+      talentsPerPage: perPage,
+      talents,
+    });
+  } catch (error) {
+    errorHandler(error, res, req, error.NextFunction);
+  }
 };
 
 export default paginateTalents;
diff --git a/server/routes/talentPaginationRoute.ts b/server/routes/talentPaginationRoute.ts
index 9f3732a..55b78ac 100644
--- a/server/routes/talentPaginationRoute.ts
+++ b/server/routes/talentPaginationRoute.ts
@@ -1,11 +1,9 @@
-import { Router }from 'express';
+import { Router } from 'express';
 import { Request, Response } from 'express';
 import paginateTalents from '../pagination/talentPagination';
 
 const talentPaginationRoute = Router();
 
-talentPaginationRoute.get('/talents', (req: Request, res: Response) => {
-    paginateTalents(req, res);
-});
+talentPaginationRoute.get('/talents', paginateTalents);
 
 export default talentPaginationRoute;

From b5e9d84273e605bb50b251823698a6e877920902 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Mon, 23 Oct 2023 13:31:49 +0100
Subject: [PATCH 07/20] chore: fix server eslint error

---
 server/index.ts                        | 20 +++++++-------
 server/pagination/talentPagination.ts  | 36 +++++++++++++-------------
 server/routes/talentPaginationRoute.ts |  1 -
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/server/index.ts b/server/index.ts
index 0c565bb..785fd68 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -43,21 +43,21 @@ app.use('/api', talentPaginationRoute); //paginated api for talents
 
 // misc
 app.get('/', (req, res) => {
-  res.send('Welcome to MeetDevs');
+    res.send('Welcome to MeetDevs');
 });
 
 // app.use(errorHandler);
 
 mongoose
-  .connect(dbConnString, { useNewUrlParser: true } as ConnectOptions)
-  .then(() => {
-    console.log('Database Connected');
-    app.listen(PORT, () => {
-      console.log(`Server is running on Port ${PORT}`);
+    .connect(dbConnString, { useNewUrlParser: true } as ConnectOptions)
+    .then(() => {
+        console.log('Database Connected');
+        app.listen(PORT, () => {
+            console.log(`Server is running on Port ${PORT}`);
+        });
+    })
+    .catch((error) => {
+        console.log(error);
     });
-  })
-  .catch((error) => {
-    console.log(error);
-  });
 
 export default app;
diff --git a/server/pagination/talentPagination.ts b/server/pagination/talentPagination.ts
index 838185f..385a63c 100644
--- a/server/pagination/talentPagination.ts
+++ b/server/pagination/talentPagination.ts
@@ -9,26 +9,26 @@ import Talent from '../models/talentModel';
  * total number of pages and talents.
  */
 const paginateTalents = async (req: Request, res: Response) => {
-  const rawPage = req.query.page as string | undefined;
-  const page = rawPage ? parseInt(rawPage) : 1; // Current page, default to 1
-  const perPage = 9; // Number of talents per page
+    const rawPage = req.query.page as string | undefined;
+    const page = rawPage ? parseInt(rawPage) : 1; // Current page, default to 1
+    const perPage = 9; // Number of talents per page
 
-  try {
-    const totalTalents = await Talent.countDocuments();
-    const talents = await Talent.find()
-      .skip((page - 1) * perPage)
-      .limit(perPage);
+    try {
+        const totalTalents = await Talent.countDocuments();
+        const talents = await Talent.find()
+            .skip((page - 1) * perPage)
+            .limit(perPage);
 
-    res.json({
-      totalTalents,
-      currentPage: page,
-      totalPages: Math.ceil(totalTalents / perPage),
-      talentsPerPage: perPage,
-      talents,
-    });
-  } catch (error) {
-    errorHandler(error, res, req, error.NextFunction);
-  }
+        res.json({
+            totalTalents,
+            currentPage: page,
+            totalPages: Math.ceil(totalTalents / perPage),
+            talentsPerPage: perPage,
+            talents,
+        });
+    } catch (error) {
+        errorHandler(error, res, req, error.NextFunction);
+    }
 };
 
 export default paginateTalents;
diff --git a/server/routes/talentPaginationRoute.ts b/server/routes/talentPaginationRoute.ts
index 55b78ac..66aa451 100644
--- a/server/routes/talentPaginationRoute.ts
+++ b/server/routes/talentPaginationRoute.ts
@@ -1,5 +1,4 @@
 import { Router } from 'express';
-import { Request, Response } from 'express';
 import paginateTalents from '../pagination/talentPagination';
 
 const talentPaginationRoute = Router();

From ffde2f23f0b1b62fa0dd898e0538e612ab2a6adf Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Mon, 23 Oct 2023 17:47:03 +0100
Subject: [PATCH 08/20] feat: fix client eslint error

---
 client/src/components/Modal/interfaces/modaInterface.ts | 1 +
 client/src/pages/Employer/Employer.tsx                  | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Modal/interfaces/modaInterface.ts b/client/src/components/Modal/interfaces/modaInterface.ts
index f4bdaae..189256f 100644
--- a/client/src/components/Modal/interfaces/modaInterface.ts
+++ b/client/src/components/Modal/interfaces/modaInterface.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Dispatch, SetStateAction } from "react";
 
 export interface modalProps {
diff --git a/client/src/pages/Employer/Employer.tsx b/client/src/pages/Employer/Employer.tsx
index c575957..3caf90b 100644
--- a/client/src/pages/Employer/Employer.tsx
+++ b/client/src/pages/Employer/Employer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import TalentCard from '../../components/TalentCard';
 import TalentNav from '../../components/Navbar/TalentNav';
 import Search from '../../components/util/Search';
@@ -19,7 +20,7 @@ const Employer = () => {
   useEffect(() => {
     dispatch(getTalentsPerPage(setLoading, page));
     // dispatch(getTalents(setLoading));
-  }, [page]);
+  }, [page, dispatch]);
 
   const prevPage = () => setPage((cur) => cur - 1);
   const nextPage = () => setPage((cur) => cur + 1);

From 9f9af3ec2a9365c884cbf82ed6201708085dba6c Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 03:00:12 +0100
Subject: [PATCH 09/20] fix: fix cancel offer bug using employer id instead of
 talent id

---
 client/index.html                           |   4 +-
 client/package-lock.json                    |  52 ++++-
 client/package.json                         |   1 +
 client/src/components/Navbar/TalentNav.tsx  |  17 +-
 client/src/components/TalentCard.tsx        | 139 ++++++------
 client/src/pages/Employer/Employer.tsx      |   2 +-
 client/src/pages/Employer/EmployerOffer.tsx |   7 +-
 client/src/pages/Talent/TalentHire.tsx      | 165 +++++++-------
 client/src/pages/Talent/TalentOfferCard.tsx | 163 +++++++-------
 client/tailwind.config.js                   |  12 +-
 server/controllers/talentController.ts      | 233 ++++++++++----------
 11 files changed, 412 insertions(+), 383 deletions(-)

diff --git a/client/index.html b/client/index.html
index 00f7415..66edfdd 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html data-theme="dracula" lang="en">
   <head>
     <meta charset="UTF-8" />
     <link
-      rel="icon"
+      rel="icon"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
       type="image/png"
       sizes="256x256"
       href="/assets/MeetDevs-n.png"
diff --git a/client/package-lock.json b/client/package-lock.json
index 6d766d2..b78bf12 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -29,6 +29,7 @@
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react": "^4.0.3",
         "autoprefixer": "^10.4.16",
+        "daisyui": "^3.9.3",
         "eslint": "^8.45.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
@@ -1662,6 +1663,12 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1708,6 +1715,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1725,6 +1742,26 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/daisyui": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.3.tgz",
+      "integrity": "sha512-8li177QCu6dqlEOzE3h/dAV1y9Movbjx5bzJIO/hNqMNZtJkbHM0trjTzbDejV7N57eNGdjBvAGtxZYKzS4jow==",
+      "dev": true,
+      "dependencies": {
+        "colord": "^2.9",
+        "css-selector-tokenizer": "^0.8",
+        "postcss": "^8",
+        "postcss-js": "^4",
+        "tailwindcss": "^3.1"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -2173,6 +2210,12 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -2417,7 +2460,6 @@
         "react-is": "^16.7.0"
       }
     },
-
     "node_modules/hoist-non-react-statics/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -3169,7 +3211,11 @@
         "react-is": "^16.13.1"
       }
     },
-
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3258,7 +3304,6 @@
       }
     },
     "node_modules/react-is": {
-
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
@@ -3328,7 +3373,6 @@
         }
       }
     },
-
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/client/package.json b/client/package.json
index 20032b9..258dc68 100644
--- a/client/package.json
+++ b/client/package.json
@@ -31,6 +31,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.16",
+    "daisyui": "^3.9.3",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
diff --git a/client/src/components/Navbar/TalentNav.tsx b/client/src/components/Navbar/TalentNav.tsx
index 5ddad42..18edf94 100644
--- a/client/src/components/Navbar/TalentNav.tsx
+++ b/client/src/components/Navbar/TalentNav.tsx
@@ -37,21 +37,15 @@ function TalentNav(): JSX.Element {
   return (
     <div className='talent-nav'>
       <div className='nav-con'>
-        <img
-          className={'rounded-full'}
-          src={'/assets/logo.png'}
-          alt=''
-        />
+        <img className={'rounded-full'} src={'/assets/logo.png'} alt='' />
         <nav className='nav-items-con' onClick={() => setOpenProfile(true)}>
           {user.data ? (
             ''
           ) : (
-            <Link to={`/talent/getranked/${user.talent._id}`}>
-              Get Ranked
-            </Link>
+            <Link to={`/talent/getranked/${user.talent._id}`}>Get Ranked</Link>
           )}
           <Link to={'#'}>Messages</Link>
-          <Link 
+          <Link
             to={
               user.talent
                 ? `/offers/talent/${user.talent._id}`
@@ -63,15 +57,14 @@ function TalentNav(): JSX.Element {
         </nav>
       </div>
 
-      <Link to={'#'} >
+      <Link to={'#'}>
         <img
           src='/assets/talents/no_image.png'
           alt='fine girl'
-          className='w-20 rounded-full'
+          className='w-[50px] h-[50px] rounded-full'
           onClick={() => setOpenProfile((prev) => !prev)}
         />
         <p>{user.data ? user.data.name : user.talent.name}</p>
-        
       </Link>
       {openProfile && <ProfileDropDownMenu logout={logout} />}
     </div>
diff --git a/client/src/components/TalentCard.tsx b/client/src/components/TalentCard.tsx
index c12c6a8..232fc98 100644
--- a/client/src/components/TalentCard.tsx
+++ b/client/src/components/TalentCard.tsx
@@ -4,84 +4,83 @@ import { AiFillGithub } from 'react-icons/ai';
 import { BsLinkedin } from 'react-icons/bs';
 
 interface TalentProps {
-    name: string;
-    jobRole: string;
-    bio: string;
-    location: string;
-    github: string;
-    profileImg: string;
-    id: string;
-    rank: number;
+  name: string;
+  jobRole: string;
+  bio: string;
+  location: string;
+  github: string;
+  profileImg: string;
+  id: string;
+  rank: number;
 }
 
 const TalentCard: React.FC<TalentProps> = ({
-    name,
-    jobRole,
-    location,
-    bio,
-    github,
-    profileImg,
-    id,
-    rank,
+  name,
+  jobRole,
+  location,
+  bio,
+  github,
+  profileImg,
+  id,
+  rank,
 }) => {
-    return (
-        <div className='bg-white shadow-md rounded-lg overflow-hidden'>
-            <div className='m-5 h-[170px] rounded-full flex justify-between'>
-                <img
-                    src={
-                        !profileImg
-                            ? 'src/assets/talents/no_image.png'
-                            : profileImg
-                    }
-                    alt={name}
-                    className='w-25'
-                />
-                <p className='text-2xl border-[1px] border-green-400 rounded-3xl shadow-lg h-[70px] p-3 font-mono'>
-                    Percentile
-                    <br />
-                    <span className=''>{rank}%</span>
-                </p>
-                {/* <div className='border-[1px] border-green-400 w-12 h-12 rounded-full'>
+  return (
+    <div className='shadow-3xl border-[1px] border-green-600 rounded-lg overflow-hidden'>
+      <div className='m-5 h-[170px] rounded-full flex justify-between'>
+        <div className='w-[160px] h-[160px]'>
+          <img
+            src={!profileImg ? 'src/assets/talents/no_image.png' : profileImg}
+            alt={name}
+            className='w-full h-full object-cover rounded-full'
+          />
+        </div>
+
+        <p className='text-2xl border-[1px] border-green-600 rounded-3xl shadow-lg h-[70px] p-3 font-mono'>
+          Percentile
+          <br />
+          <span className=''>{rank}%</span>
+        </p>
+        {/* <div className='border-[1px] border-green-400 w-12 h-12 rounded-full'>
                     <p className='text-center p-2 text-xl'>{rank}</p>
                 </div> */}
-            </div>
+      </div>
 
-            <div className='p-6'>
-                <h2 className='text-2xl font-bold'>{name}</h2>
-                <h3 className='text-xl text-gray-500'>{jobRole}</h3>
-                <p className='text-gray-600'>{location}</p>
-                <p className='text-gray-600'>{bio}</p>
-                <div className='flex justify-start'>
-                    <a
-                        href={`https://github.com/${github}`}
-                        className='text-blue-500 hover:underline'
-                        target='blank'
-                    >
-                        <AiFillGithub className='text-2xl my-2 mr-2 text-green-400' />
-                    </a>
-                    <a
-                        href={`https://github.com/${github}`}
-                        className='text-blue-500 hover:underline'
-                        target='blank'
-                    >
-                        <BsLinkedin className='text-2xl my-2 text-green-400' />
-                    </a>
-                </div>
-            </div>
-            <div className='flex justify-between'>
-                <Link to={`/showdev/${id}`}>
-                    <button className='m-4 border-xl border-2 shadow-xl rounded-3xl w-[85px] text-white text-sm h-[36px] bg-green-600 hover:bg-green-800'>
-                        Check Out
-                    </button>
-                </Link>
-                <Link to={`/hiredev/${id}`}>
-                    <button className='m-4 border-xl border-2 shadow-xl rounded-3xl w-[85px] text-white text-sm h-[36px] bg-green-600 hover:bg-green-800'>
-                        Hire
-                    </button>
-                </Link>
-            </div>
+      <div className='p-6'>
+        <h2 className='text-2xl font-bold'>{name}</h2>
+        <h3 className='text-xl text-gray-500'>{jobRole}</h3>
+        <p className='text-gray-600'>{location}</p>
+        <p className='text-gray-600'>{bio}</p>
+        <div className='flex justify-start'>
+          <a
+            href={`https://github.com/${github}`}
+            className='text-blue-500 hover:underline'
+            target='blank'
+          >
+            <AiFillGithub className='text-2xl my-2 mr-2 text-green-400' />
+          </a>
+          <a
+            href={`https://github.com/${github}`}
+            className='text-blue-500 hover:underline'
+            target='blank'
+          >
+            <BsLinkedin className='text-2xl my-2 text-green-400' />
+          </a>
         </div>
-    );
+      </div>
+      <div className='flex justify-between'>
+        <Link to={`/showdev/${id}`}>
+          <button className='m-4 border-xl border-2 shadow-xl rounded-3xl w-[85px] text-white text-sm h-[36px] bg-green-600 hover:bg-green-800'>
+            Check Out
+          </button>
+        </Link>
+        <Link to={`/hiredev/${id}`}>
+          <button className='m-4 border-xl border-2 shadow-xl rounded-3xl w-[85px] text-white text-sm h-[36px] bg-green-600 hover:bg-green-800'>
+            Hire
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
 };
 
 export default TalentCard;
diff --git a/client/src/pages/Employer/Employer.tsx b/client/src/pages/Employer/Employer.tsx
index 3caf90b..48f9ee5 100644
--- a/client/src/pages/Employer/Employer.tsx
+++ b/client/src/pages/Employer/Employer.tsx
@@ -28,7 +28,7 @@ const Employer = () => {
     <>
       <TalentNav />
 
-      <div className='bg-gray-100 min-h-screen p-5'>
+      <div className='min-h-screen p-5'>
         <div className='flex mx-10 justify-end'>
           <Search />
         </div>
diff --git a/client/src/pages/Employer/EmployerOffer.tsx b/client/src/pages/Employer/EmployerOffer.tsx
index 5841baf..ce0cc8b 100644
--- a/client/src/pages/Employer/EmployerOffer.tsx
+++ b/client/src/pages/Employer/EmployerOffer.tsx
@@ -25,7 +25,6 @@ const EmployerOffer = () => {
 	useEffect(() => {
 		dispatch(getOffersEmployer(id, setLoading));
 	}, [id, dispatch]);
-	console.log(offers);
 	return (
 		<>
 			<TalentNav />
@@ -40,11 +39,7 @@ const EmployerOffer = () => {
 				</h1>
 			) : (
 				offers.map((offer) => (
-					<TalentOfferCard
-						key={offer._id}
-						offer={offer}
-						user={employer}
-					/>
+					<TalentOfferCard key={offer._id} offer={offer} user={employer} />
 				))
 			)}
 		</>
diff --git a/client/src/pages/Talent/TalentHire.tsx b/client/src/pages/Talent/TalentHire.tsx
index ee55e8d..ce5129b 100644
--- a/client/src/pages/Talent/TalentHire.tsx
+++ b/client/src/pages/Talent/TalentHire.tsx
@@ -10,100 +10,95 @@ import { getTalent } from '../../actions/talent';
 import TalentDetails from '../../components/TalentDetails';
 
 interface ProfileData {
-    _id: string;
-    name: string;
+  _id: string;
+  name: string;
 }
 
 const TalentHire = () => {
-    const { id } = useParams();
-    const dispatch = useDispatch();
-    const [title, setTitle] = useState('');
-    const [description, setDescription] = useState('');
-    const [loading, setLoading] = useState(false);
-    type profile = null | { data: ProfileData };
-    const employerProfileString = localStorage.getItem('employerProfile');
-    const employer: profile = employerProfileString
-        ? JSON.parse(employerProfileString)
-        : null;
+  const { id } = useParams();
+  const dispatch = useDispatch();
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [loading, setLoading] = useState(false);
+  type profile = null | { data: ProfileData };
+  const employerProfileString = localStorage.getItem('employerProfile');
+  const employer: profile = employerProfileString
+    ? JSON.parse(employerProfileString)
+    : null;
 
-    const [employerId, setEmployerId] = useState(employer?.data._id);
-    const talentUser = useSelector((state) => state.talents.talent);
+  const [employerId, setEmployerId] = useState(employer?.data._id);
+  const talentUser = useSelector((state) => state.talents.talent);
 
-    useEffect(() => {
-        dispatch(getTalent(setLoading, id));
-    }, [dispatch, id]);
+  useEffect(() => {
+    dispatch(getTalent(setLoading, id));
+  }, [dispatch, id]);
 
-    const handleSendOffer = () => {
-        const offerData = {
-            talentId: id,
-            employerId,
-            title,
-            description,
-        };
-        dispatch(offerCreate(offerData, setLoading));
+  const handleSendOffer = () => {
+    const offerData = {
+      talentId: id,
+      employerId,
+      title,
+      description,
     };
-    console.log(talentUser);
-    return (
-        <>
-            <TalentNav />
-            {talentUser && (
-                <div>
-                    <TalentDetails talent={talentUser} />
-                    <div className='flex justify-end m-9 '>
-                        <div className='flex flex-col border-2 border-green-500 shadow-sm w-[300px] rounded-xl px-2'>
-                            <div className='mt-4'>
-                                <h2 className='text-2xl text-center font-bold text-ellipsis'>
-                                    Send Offer
-                                </h2>
+    dispatch(offerCreate(offerData, setLoading));
+  };
+  return (
+    <>
+      <TalentNav />
+      {talentUser && (
+        <div>
+          <TalentDetails talent={talentUser} />
+          <div className='flex justify-end m-9 '>
+            <div className='flex flex-col border-2 border-green-500 shadow-sm w-[300px] rounded-xl px-2'>
+              <div className='mt-4'>
+                <h2 className='text-2xl text-center font-bold text-ellipsis'>
+                  Send Offer
+                </h2>
 
-                                <div className='mx-6 mt-4'>
-                                    <input
-                                        type='text'
-                                        value={title}
-                                        className='border-2 border-100 rounded-lg px-4 py-2 w-full'
-                                        placeholder='Job Title'
-                                        onChange={(e) =>
-                                            setTitle(e.target.value)
-                                        }
-                                    />
-                                    <input
-                                        type='text'
-                                        value={description}
-                                        className='border-2 my-6 border-100 rounded-lg px-4 py-2 w-full'
-                                        placeholder='Description'
-                                        onChange={(e) =>
-                                            setDescription(e.target.value)
-                                        }
-                                    />
-                                    <div className='flex justify-center'>
-                                        {loading ? (
-                                            <div className='w-10 h-10 border-t-2 border-green-500 border-solid rounded-full animate-spin'></div>
-                                        ) : (
-                                            ''
-                                        )}
-                                    </div>
-                                    <div className='flex justify-center'>
-                                        {talentUser.hasOffer ? (
-                                            <button className='w-[150px] h-[40px] p-2 bg-green-300 m-8 rounded-full text-gray-100 font-bold'>
-                                                Send
-                                            </button>
-                                        ) : (
-                                            <button
-                                                className='w-[150px] h-[40px] p-2 bg-green-600 hover:bg-green-700 m-8 rounded-full text-black font-bold'
-                                                onClick={handleSendOffer}
-                                            >
-                                                Send
-                                            </button>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div className='mx-6 mt-4'>
+                  <input
+                    type='text'
+                    value={title}
+                    className='border-2 border-100 rounded-lg px-4 py-2 w-full'
+                    placeholder='Job Title'
+                    onChange={(e) => setTitle(e.target.value)}
+                  />
+                  <textarea
+                    type='text'
+                    value={description}
+                    className='border-2 my-6 border-100 rounded-lg px-4 py-2 w-full'
+                    placeholder='Description'
+                    onChange={(e) => setDescription(e.target.value)}
+                  />
+                  <div className='flex justify-center'>
+                    {loading ? (
+                      <div className='w-10 h-10 border-t-2 border-green-500 border-solid rounded-full animate-spin'></div>
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                  <div className='flex justify-center'>
+                    {talentUser.hasOffer ? (
+                      <button className='w-[150px] h-[40px] p-2 bg-green-300 m-8 rounded-full text-gray-100 font-bold'>
+                        Send
+                      </button>
+                    ) : (
+                      <button
+                        className='w-[150px] h-[40px] p-2 bg-green-600 hover:bg-green-700 m-8 rounded-full text-black font-bold'
+                        onClick={handleSendOffer}
+                      >
+                        Send
+                      </button>
+                    )}
+                  </div>
                 </div>
-            )}
-        </>
-    );
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 };
 
 export default TalentHire;
diff --git a/client/src/pages/Talent/TalentOfferCard.tsx b/client/src/pages/Talent/TalentOfferCard.tsx
index 674cae6..6a1954e 100644
--- a/client/src/pages/Talent/TalentOfferCard.tsx
+++ b/client/src/pages/Talent/TalentOfferCard.tsx
@@ -6,100 +6,101 @@ import { offerDelete, offerUpdate } from '../../actions/offer';
 import { talentPatch } from '../../actions/talent';
 
 export interface Offer {
-    talentId?: string;
-    employerId?: string;
-    title?: string;
-    description?: string;
-    accepted?: boolean;
-    createdAt?: Date;
-    updatedAt?: Date;
+  talentId?: string;
+  employerId?: string;
+  title?: string;
+  description?: string;
+  accepted?: boolean;
+  createdAt?: Date;
+  updatedAt?: Date;
 }
 
 export interface ResponseDocument extends Offer {
-    links?: Array<object>;
-    message?: string;
+  links?: Array<object>;
+  message?: string;
 }
 interface TalentOfferCardProps {
-    offer: ResponseDocument;
-    user: { data: object };
+  offer: ResponseDocument;
+  user: { data: object };
 }
 
 const TalentOfferCard: React.FC<TalentOfferCardProps> = ({
-    offer,
-    user,
+  offer,
+  user,
 }): JSX.Element => {
-    const dispatch = useDispatch();
-    const { id } = useParams();
-    const [loading, setLoading] = useState(false);
-    const handleAcceptClick = async () => {
-        const offerData = {
-            accepted: true,
-        };
-        const talentData = {
-            hasOffer: true,
-        };
-        await dispatch(offerUpdate(offer._id, offerData));
-        await dispatch(talentPatch(id, talentData));
-        window.location.reload();
+  const dispatch = useDispatch();
+  const { id } = useParams();
+  const [loading, setLoading] = useState(false);
+  const handleAcceptClick = async () => {
+    const offerData = {
+      accepted: true,
     };
-    const handleRejectOrTerminate = async () => {
-        const talentData = {
-            hasOffer: false,
-        };
-        await dispatch(offerDelete(offer._id));
-        await dispatch(talentPatch(id, talentData));
-        window.location.reload();
+    const talentData = {
+      hasOffer: true,
     };
-    return (
-        <>
-            <div className='px-4 sm:px-10'>
-                <div className='w-full sm:w-[calc(50% - 2rem)] border-[1px] border-green-400 rounded-lg shadow-sm mt-4 sm:mt-9 h-[90px] bg-white'>
-                    <div className='grid grid-cols-1 sm:grid-cols-2'>
-                        <div className='flex-wrap text-sm sm:text-md my-2 p-2 sm:p-3'>
-                            <h1 className='text-lg sm:text-xl font-semibold'>
-                                Job Title: {offer.title}
-                            </h1>
-                            <p className='hidden sm:block'>
-                                {offer.description}
-                            </p>
-                        </div>
-                        <div className='flex justify-center sm:justify-end m-2 sm:m-5 sm:flex-wrap gap-2 sm:gap-3'>
-                            {user.data ? (
-                                <button
-                                    className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 border-white shadow-md hover:bg-red-800 rounded-full bg-red-600'
-                                    onClick={handleRejectOrTerminate}
-                                >
-                                    Cancel
-                                </button>
-                            ) : offer.accepted ? (
-                                <button
-                                    className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 border-white shadow-md hover:bg-red-800 rounded-full bg-red-600'
-                                    onClick={handleRejectOrTerminate}
-                                >
-                                    Terminate
-                                </button>
-                            ) : (
-                                <div>
-                                    <button
-                                        className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 shadow-md border-white rounded-full hover:bg-green-800 bg-green-600'
-                                        onClick={handleAcceptClick}
-                                    >
-                                        Accept
-                                    </button>
-                                    <button
-                                        className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 border-white shadow-md hover:bg-red-800 rounded-full bg-red-600'
-                                        onClick={handleRejectOrTerminate}
-                                    >
-                                        Reject
-                                    </button>
-                                </div>
-                            )}
-                        </div>
-                    </div>
+    await dispatch(offerUpdate(offer._id, offerData));
+    await dispatch(talentPatch(id, talentData));
+    window.location.reload();
+  };
+
+  const handleRejectOrTerminate = async () => {
+    const talentData = {
+      hasOffer: false,
+    };
+    await dispatch(talentPatch(offer.talentId, talentData));
+    await dispatch(offerDelete(offer._id));
+    window.location.reload();
+  };
+  console.log(id);
+
+  return (
+    <>
+      <div className='px-4 sm:px-10'>
+        <div className='w-full sm:w-[calc(50% - 2rem)] border-[1px] border-green-400 rounded-lg shadow-sm mt-4 sm:mt-9 h-[90px]'>
+          <div className='grid grid-cols-1 sm:grid-cols-2'>
+            <div className='flex-wrap text-sm sm:text-md my-2 p-2 sm:p-3'>
+              <h1 className='text-lg sm:text-xl font-semibold'>
+                Job Title: {offer.title}
+              </h1>
+              <p className='hidden sm:block'>{offer.description}</p>
+            </div>
+            <div className='flex justify-center sm:justify-end m-2 sm:m-5 sm:flex-wrap gap-2 sm:gap-3'>
+              {user.data ? (
+                <button
+                  className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 border-white shadow-md hover:bg-red-800 rounded-full bg-red-600'
+                  onClick={handleRejectOrTerminate}
+                >
+                  Cancel
+                </button>
+              ) : offer.accepted ? (
+                <button
+                  className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 border-white shadow-md hover:bg-red-800 rounded-full bg-red-600'
+                  onClick={handleRejectOrTerminate}
+                >
+                  Terminate
+                </button>
+              ) : (
+                <div>
+                  <button
+                    className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 shadow-md border-white rounded-full hover:bg-green-800 bg-green-600'
+                    onClick={handleAcceptClick}
+                  >
+                    Accept
+                  </button>
+                  <button
+                    className='w-[4rem] sm:w-40 text-sm sm:text-xl h-[25px] md:h-[40px] border-2 border-white shadow-md hover:bg-red-800 rounded-full bg-red-600'
+                    onClick={handleRejectOrTerminate}
+                  >
+                    Reject
+                  </button>
                 </div>
+              )}
             </div>
-        </>
-    );
+          </div>
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default TalentOfferCard;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index a2bbd53..6e4ec87 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,11 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}"
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },
-  plugins: [],
-}
+  plugins: [require('daisyui')],
+  daisyui: {
+    themes: ['light', 'dark', 'cupcake', 'black', 'dracula'],
+  },
+};
diff --git a/server/controllers/talentController.ts b/server/controllers/talentController.ts
index 60d0707..b643073 100644
--- a/server/controllers/talentController.ts
+++ b/server/controllers/talentController.ts
@@ -18,69 +18,69 @@ name, email and password must be provided on signup if
 not throw an error, Check the employer controller for how that is done
  */
 export const signUp = async (req: Request, res: Response) => {
-    try {
-        const { name, email, password } = req.body;
-
-        const existingUser = await Talent.findOne({ email });
-        if (existingUser) {
-            return res.status(400).json({ message: 'Email already in use' });
-        }
-
-        const hashedPassword = await bcrypt.hash(password, 10);
-
-        const newTalent = new Talent({
-            name,
-            email,
-            hashedPassword,
-        });
-
-        await newTalent.save();
-
-        const token = jwt.sign(
-            { userId: newTalent._id, email: newTalent.email },
-            JWT_SECRET,
-            {
-                expiresIn: '24h',
-            }
-        );
-
-        res.status(201).json({ token, newTalent });
-    } catch (error) {
-        console.error(error);
-        res.status(500).json({ message: 'Server error' });
+  try {
+    const { name, email, password } = req.body;
+
+    const existingUser = await Talent.findOne({ email });
+    if (existingUser) {
+      return res.status(400).json({ message: 'Email already in use' });
     }
+
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    const newTalent = new Talent({
+      name,
+      email,
+      hashedPassword,
+    });
+
+    await newTalent.save();
+
+    const token = jwt.sign(
+      { userId: newTalent._id, email: newTalent.email },
+      JWT_SECRET,
+      {
+        expiresIn: '24h',
+      },
+    );
+
+    res.status(201).json({ token, newTalent });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ message: 'Server error' });
+  }
 };
 
 export const signIn = async (req: Request, res: Response) => {
-    try {
-        const { email, password } = req.body;
-
-        const talent = await Talent.findOne({ email });
-        if (!talent) {
-            return res.status(401).json({ message: 'Invalid credentials' });
-        }
-
-        const isPasswordValid = await bcrypt.compare(
-            password,
-            talent.hashedPassword
-        );
-        if (!isPasswordValid) {
-            return res.status(401).json({ message: 'Invalid credentials' });
-        }
-
-        const token = jwt.sign(
-            { userId: talent._id, email: talent.email },
-            JWT_SECRET,
-            {
-                expiresIn: '24h',
-            }
-        );
-
-        res.json({ token, talent });
-    } catch (error) {
-        console.error(error);
-        res.status(500).json({ message: 'Server error' });
+  try {
+    const { email, password } = req.body;
+
+    const talent = await Talent.findOne({ email });
+    if (!talent) {
+      return res.status(401).json({ message: 'Invalid credentials' });
+    }
+
+    const isPasswordValid = await bcrypt.compare(
+      password,
+      talent.hashedPassword,
+    );
+    if (!isPasswordValid) {
+      return res.status(401).json({ message: 'Invalid credentials' });
     }
+
+    const token = jwt.sign(
+      { userId: talent._id, email: talent.email },
+      JWT_SECRET,
+      {
+        expiresIn: '24h',
+      },
+    );
+
+    res.json({ token, talent });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ message: 'Server error' });
+  }
 };
 /**
  *  Returns all talents objects from the database and
@@ -90,11 +90,11 @@ export const signIn = async (req: Request, res: Response) => {
  * @returns res
  */
 export const allTalents = async (
-    _req: Request,
-    res: Response
+  _req: Request,
+  res: Response,
 ): Promise<Response> => {
-    const talents = await Talent.find({});
-    return res.json(talents);
+  const talents = await Talent.find({});
+  return res.json(talents);
 };
 
 /**
@@ -105,26 +105,26 @@ export const allTalents = async (
  * @returns res
  */
 export const getTalentById = async (
-    req: Request,
-    res: Response,
-    next: NextFunction
+  req: Request,
+  res: Response,
+  next: NextFunction,
 ): Promise<Response | undefined> => {
-    try {
-        const { id } = req.params;
+  try {
+    const { id } = req.params;
 
-        if (!id) {
-            throw new CustomError('Required an id', 400);
-        }
-
-        const talent = await Talent.findById(id);
-        if (!talent) {
-            throw new CustomError('Talent not found', 404);
-        }
+    if (!id) {
+      throw new CustomError('Required an id', 400);
+    }
 
-        return res.json(talent);
-    } catch (err) {
-        next(err);
+    const talent = await Talent.findById(id);
+    if (!talent) {
+      throw new CustomError('Talent not found', 404);
     }
+
+    return res.json(talent);
+  } catch (err) {
+    next(err);
+  }
 };
 
 /**
@@ -138,52 +138,53 @@ export const getTalentById = async (
  * @throws {Error} If an error occurs while updating the talent.
  */
 export const updateTalent = async (
-    req: Request & { talent: Talent },
-    res: Response,
-    next: NextFunction
+  req: Request & { talent: Talent },
+  res: Response,
+  next: NextFunction,
 ): Promise<Response | undefined> => {
-    try {
-        const { id } = req.params;
-        const data: TT = req.body;
-
-        const talent = (await Talent.findByIdAndUpdate(id, data, {
-            new: true,
-        })) as Talent;
-
-        return res.json(talent);
-    } catch (err) {
-        next(err);
-    }
+  try {
+    const { id } = req.params;
+    const data: TT = req.body;
+
+    const talent = (await Talent.findByIdAndUpdate(id, data, {
+      new: true,
+    })) as Talent;
+
+    return res.json(talent);
+  } catch (err) {
+    next(err);
+  }
 };
 
 export const updatePatchTalent = async (
-    req: Request & { talent: Talent },
-    res: Response,
-    next: NextFunction
+  req: Request & { talent: Talent },
+  res: Response,
+  next: NextFunction,
 ): Promise<Response | undefined> => {
-    try {
-        const { id } = req.params;
-        const data: TT = req.body;
+  try {
+    const { id } = req.params;
+    const data: TT = req.body;
 
-        const talent = (await Talent.findByIdAndUpdate(id, data)) as Talent;
+    const talent = (await Talent.findByIdAndUpdate(id, data)) as Talent;
+    if (!talent) return res.status(404).json({ message: 'Not Found' });
 
-        return res.json(talent);
-    } catch (err) {
-        next(err);
-    }
+    return res.json(talent);
+  } catch (err) {
+    next(err);
+  }
 };
 
 export const deleteTalent = async (
-    req: Request & { talent: Talent },
-    res: Response,
-    next: NextFunction
+  req: Request & { talent: Talent },
+  res: Response,
+  next: NextFunction,
 ): Promise<Response | undefined> => {
-    try {
-        const { id } = req.params;
-        await Talent.findByIdAndDelete(id);
-
-        return res.status(204).json();
-    } catch (err) {
-        next(err);
-    }
-};
\ No newline at end of file
+  try {
+    const { id } = req.params;
+    await Talent.findByIdAndDelete(id);
+
+    return res.status(204).json();
+  } catch (err) {
+    next(err);
+  }
+};

From d05f456918e073f73447f4b8fd9ae8c8ea94970d Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 03:17:19 +0100
Subject: [PATCH 10/20] fix: fix server eslint errors

---
 server/controllers/talentController.ts | 232 ++++++++++++-------------
 1 file changed, 116 insertions(+), 116 deletions(-)

diff --git a/server/controllers/talentController.ts b/server/controllers/talentController.ts
index b643073..1532a6c 100644
--- a/server/controllers/talentController.ts
+++ b/server/controllers/talentController.ts
@@ -18,69 +18,69 @@ name, email and password must be provided on signup if
 not throw an error, Check the employer controller for how that is done
  */
 export const signUp = async (req: Request, res: Response) => {
-  try {
-    const { name, email, password } = req.body;
-
-    const existingUser = await Talent.findOne({ email });
-    if (existingUser) {
-      return res.status(400).json({ message: 'Email already in use' });
+    try {
+        const { name, email, password } = req.body;
+
+        const existingUser = await Talent.findOne({ email });
+        if (existingUser) {
+            return res.status(400).json({ message: 'Email already in use' });
+        }
+
+        const hashedPassword = await bcrypt.hash(password, 10);
+
+        const newTalent = new Talent({
+            name,
+            email,
+            hashedPassword,
+        });
+
+        await newTalent.save();
+
+        const token = jwt.sign(
+            { userId: newTalent._id, email: newTalent.email },
+            JWT_SECRET,
+            {
+                expiresIn: '24h',
+            },
+        );
+
+        res.status(201).json({ token, newTalent });
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: 'Server error' });
     }
-
-    const hashedPassword = await bcrypt.hash(password, 10);
-
-    const newTalent = new Talent({
-      name,
-      email,
-      hashedPassword,
-    });
-
-    await newTalent.save();
-
-    const token = jwt.sign(
-      { userId: newTalent._id, email: newTalent.email },
-      JWT_SECRET,
-      {
-        expiresIn: '24h',
-      },
-    );
-
-    res.status(201).json({ token, newTalent });
-  } catch (error) {
-    console.error(error);
-    res.status(500).json({ message: 'Server error' });
-  }
 };
 
 export const signIn = async (req: Request, res: Response) => {
-  try {
-    const { email, password } = req.body;
-
-    const talent = await Talent.findOne({ email });
-    if (!talent) {
-      return res.status(401).json({ message: 'Invalid credentials' });
-    }
-
-    const isPasswordValid = await bcrypt.compare(
-      password,
-      talent.hashedPassword,
-    );
-    if (!isPasswordValid) {
-      return res.status(401).json({ message: 'Invalid credentials' });
+    try {
+        const { email, password } = req.body;
+
+        const talent = await Talent.findOne({ email });
+        if (!talent) {
+            return res.status(401).json({ message: 'Invalid credentials' });
+        }
+
+        const isPasswordValid = await bcrypt.compare(
+            password,
+            talent.hashedPassword,
+        );
+        if (!isPasswordValid) {
+            return res.status(401).json({ message: 'Invalid credentials' });
+        }
+
+        const token = jwt.sign(
+            { userId: talent._id, email: talent.email },
+            JWT_SECRET,
+            {
+                expiresIn: '24h',
+            },
+        );
+
+        res.json({ token, talent });
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: 'Server error' });
     }
-
-    const token = jwt.sign(
-      { userId: talent._id, email: talent.email },
-      JWT_SECRET,
-      {
-        expiresIn: '24h',
-      },
-    );
-
-    res.json({ token, talent });
-  } catch (error) {
-    console.error(error);
-    res.status(500).json({ message: 'Server error' });
-  }
 };
 /**
  *  Returns all talents objects from the database and
@@ -90,11 +90,11 @@ export const signIn = async (req: Request, res: Response) => {
  * @returns res
  */
 export const allTalents = async (
-  _req: Request,
-  res: Response,
+    _req: Request,
+    res: Response,
 ): Promise<Response> => {
-  const talents = await Talent.find({});
-  return res.json(talents);
+    const talents = await Talent.find({});
+    return res.json(talents);
 };
 
 /**
@@ -105,26 +105,26 @@ export const allTalents = async (
  * @returns res
  */
 export const getTalentById = async (
-  req: Request,
-  res: Response,
-  next: NextFunction,
+    req: Request,
+    res: Response,
+    next: NextFunction,
 ): Promise<Response | undefined> => {
-  try {
-    const { id } = req.params;
+    try {
+        const { id } = req.params;
 
-    if (!id) {
-      throw new CustomError('Required an id', 400);
-    }
+        if (!id) {
+            throw new CustomError('Required an id', 400);
+        }
 
-    const talent = await Talent.findById(id);
-    if (!talent) {
-      throw new CustomError('Talent not found', 404);
-    }
+        const talent = await Talent.findById(id);
+        if (!talent) {
+            throw new CustomError('Talent not found', 404);
+        }
 
-    return res.json(talent);
-  } catch (err) {
-    next(err);
-  }
+        return res.json(talent);
+    } catch (err) {
+        next(err);
+    }
 };
 
 /**
@@ -138,53 +138,53 @@ export const getTalentById = async (
  * @throws {Error} If an error occurs while updating the talent.
  */
 export const updateTalent = async (
-  req: Request & { talent: Talent },
-  res: Response,
-  next: NextFunction,
+    req: Request & { talent: Talent },
+    res: Response,
+    next: NextFunction,
 ): Promise<Response | undefined> => {
-  try {
-    const { id } = req.params;
-    const data: TT = req.body;
-
-    const talent = (await Talent.findByIdAndUpdate(id, data, {
-      new: true,
-    })) as Talent;
-
-    return res.json(talent);
-  } catch (err) {
-    next(err);
-  }
+    try {
+        const { id } = req.params;
+        const data: TT = req.body;
+
+        const talent = (await Talent.findByIdAndUpdate(id, data, {
+            new: true,
+        })) as Talent;
+
+        return res.json(talent);
+    } catch (err) {
+        next(err);
+    }
 };
 
 export const updatePatchTalent = async (
-  req: Request & { talent: Talent },
-  res: Response,
-  next: NextFunction,
+    req: Request & { talent: Talent },
+    res: Response,
+    next: NextFunction,
 ): Promise<Response | undefined> => {
-  try {
-    const { id } = req.params;
-    const data: TT = req.body;
+    try {
+        const { id } = req.params;
+        const data: TT = req.body;
 
-    const talent = (await Talent.findByIdAndUpdate(id, data)) as Talent;
-    if (!talent) return res.status(404).json({ message: 'Not Found' });
+        const talent = (await Talent.findByIdAndUpdate(id, data)) as Talent;
+        if (!talent) return res.status(404).json({ message: 'Not Found' });
 
-    return res.json(talent);
-  } catch (err) {
-    next(err);
-  }
+        return res.json(talent);
+    } catch (err) {
+        next(err);
+    }
 };
 
 export const deleteTalent = async (
-  req: Request & { talent: Talent },
-  res: Response,
-  next: NextFunction,
+    req: Request & { talent: Talent },
+    res: Response,
+    next: NextFunction,
 ): Promise<Response | undefined> => {
-  try {
-    const { id } = req.params;
-    await Talent.findByIdAndDelete(id);
-
-    return res.status(204).json();
-  } catch (err) {
-    next(err);
-  }
+    try {
+        const { id } = req.params;
+        await Talent.findByIdAndDelete(id);
+
+        return res.status(204).json();
+    } catch (err) {
+        next(err);
+    }
 };

From 251ae601d897f751221bd954ddcf0da1079bdd52 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 15:10:03 +0100
Subject: [PATCH 11/20] feat: add auth page route link to getstarted button

Add auth page route link to getstarted button in Landing page
---
 client/src/pages/Landing-Page/Home.tsx | 32 ++++++++++++++------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/src/pages/Landing-Page/Home.tsx b/client/src/pages/Landing-Page/Home.tsx
index 9f1e262..9a2f22b 100644
--- a/client/src/pages/Landing-Page/Home.tsx
+++ b/client/src/pages/Landing-Page/Home.tsx
@@ -1,23 +1,25 @@
+import { Link } from 'react-router-dom';
 import Button from '../../components/Button/Button';
 import './style.css';
 
 const Home = () => {
-    return (
-        <div className='home'>
-            <img src='src/assets/meetdev1.jpg' className='bg-img' />
-            <div className='main'>
-                <p>
-                    Are you a talented developer looking for your next career
-                    move? <br /> Or are you an employer in search of top-notch
-                    tech talent? <br /> Look no further! Meet Devs is here to
-                    revolutionize the way you connect.
-                </p>
-                <div className='home_button'>
-                    <Button text='Get Started' size='lg' />
-                </div>
-            </div>
+  return (
+    <div className='home'>
+      <img src='src/assets/meetdev1.jpg' className='bg-img' />
+      <div className='main'>
+        <p>
+          Are you a talented developer looking for your next career move? <br />{' '}
+          Or are you an employer in search of top-notch tech talent? <br /> Look
+          no further! Meet Devs is here to revolutionize the way you connect.
+        </p>
+        <div className='home_button'>
+          <Link to={'/auth'}>
+            <Button text='Get Started' size='lg' />
+          </Link>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default Home;

From 956bfa3cd94b8172568d256c2429fec0b9e3bec6 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 17:25:13 +0100
Subject: [PATCH 12/20] feat: add edit profile modal with no action

---
 client/package-lock.json                      | 151 ++++++++++++++++++
 client/package.json                           |   1 +
 .../components/Modal/UpdateTalentModal.tsx    | 114 +++++++++++++
 client/src/pages/Talent/Talent.tsx            |  12 +-
 4 files changed, 277 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Modal/UpdateTalentModal.tsx

diff --git a/client/package-lock.json b/client/package-lock.json
index b78bf12..c33152c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,6 +15,7 @@
         "react": "^18.2.0",
         "react-datepicker": "^4.20.0",
         "react-dom": "^18.2.0",
+        "react-file-base64": "^1.0.3",
         "react-icons": "^4.11.0",
         "react-redux": "^8.1.3",
         "react-router-dom": "^6.16.0",
@@ -1423,6 +1424,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1701,6 +1707,21 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
+    },
+    "node_modules/create-react-class": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
+      "dependencies": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1850,6 +1871,14 @@
       "integrity": "sha512-54z7squS1FyFRSUqq/knOFSptjjogLZXbKcYk3B0qkE1KZzvqASwRZnY2KzZQJqIYLVD38XZeoiMRflYSwyO4w==",
       "dev": true
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -2225,6 +2254,20 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fbjs": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "dependencies": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2465,6 +2508,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2587,12 +2641,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "dependencies": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz",
@@ -2838,6 +2909,15 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "dependencies": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -3201,6 +3281,14 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3295,6 +3383,32 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "node_modules/react-file-base64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-file-base64/-/react-file-base64-1.0.3.tgz",
+      "integrity": "sha512-itGMFH6IkJUZF2p0YXQnUBqzUHFaMYcs+ssD9e4j1XJGHRibGe8kiLr6y46oAIw1JknX/bJUUogDJOk/o91TMg==",
+      "dependencies": {
+        "react": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^15.0.2"
+      }
+    },
+    "node_modules/react-file-base64/node_modules/react": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
+      "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
+      "dependencies": {
+        "create-react-class": "^15.6.0",
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.0",
+        "prop-types": "^15.5.10"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
@@ -3549,6 +3663,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -3590,6 +3709,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3859,6 +3983,28 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.36",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
+      "integrity": "sha512-CPPLoCts2p7D8VbybttE3P2ylv0OBZEAy7a12DsulIEcAiMtWJy+PBgMXgWDI80D5UwqE8oQPHYnk13tm38M2Q==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -3975,6 +4121,11 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/whatwg-fetch": {
+      "version": "3.6.19",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz",
+      "integrity": "sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index 258dc68..eaefbb0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,6 +17,7 @@
     "react": "^18.2.0",
     "react-datepicker": "^4.20.0",
     "react-dom": "^18.2.0",
+    "react-file-base64": "^1.0.3",
     "react-icons": "^4.11.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
diff --git a/client/src/components/Modal/UpdateTalentModal.tsx b/client/src/components/Modal/UpdateTalentModal.tsx
new file mode 100644
index 0000000..3f2eec4
--- /dev/null
+++ b/client/src/components/Modal/UpdateTalentModal.tsx
@@ -0,0 +1,114 @@
+import TButton from '../Button/TButton.tsx';
+import { FaEdit } from 'react-icons/fa';
+import { Dispatch, SetStateAction, useState } from 'react';
+import FileBase from 'react-file-base64';
+
+interface Talent {
+  name: string;
+  email: string;
+  hashedPassword: string;
+  jobRole: string;
+  location?: string;
+  hasOffer: boolean;
+  rank: number;
+  socials?: Array<string>;
+  github?: string;
+  linkedin?: string;
+  x?: string;
+  bio?: string;
+  profileImg?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+interface UpdateTalentModalProps {
+  showTalentEditModal: boolean;
+  setShowTalentEditModal: Dispatch<SetStateAction<boolean>>;
+  talent: Talent;
+}
+
+const UpdateTalentModal = ({
+  showTalentEditModal,
+  setShowTalentEditModal,
+  talent,
+}: UpdateTalentModalProps): JSX.Element => {
+  const modalStyle = showTalentEditModal ? 'showModal' : '';
+  const [img, setImg] = useState('');
+
+  const handleSubmit = () => {};
+
+  return (
+    <div className={'Modal ' + modalStyle}>
+      <div className='content'>
+        <div className={'header-11'}>
+          <h1>Add Education</h1>{' '}
+          <TButton value={'X'} onClick={() => setShowTalentEditModal(false)} />
+        </div>
+        <hr />
+        <form onSubmit={handleSubmit}>
+          <div className='form-control'>
+            <label htmlFor='name'>Name</label>
+            <input type='text' name={'name'} defaultValue={talent?.name} />
+          </div>{' '}
+          <div className='form-control'>
+            <label htmlFor='email'>Email</label>
+            <input type='text' name={'email'} defaultValue={talent?.email} />
+          </div>{' '}
+          <div className='form-control'>
+            <label htmlFor='jobRole'>Job Role</label>
+            <input
+              type='text'
+              name={'jobRole'}
+              defaultValue={talent?.jobRole}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='location'>Location</label>
+            <input
+              type='text'
+              name={'location'}
+              defaultValue={talent?.location}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='github'>Github Username</label>
+            <input type='text' name={'github'} defaultValue={talent?.github} />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='linkedIn'>LinkedIn Username</label>
+            <input
+              type='text'
+              name={'linkedIn'}
+              defaultValue={talent?.linkedin}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='city'>X Username</label>
+            <input type='text' name={'x'} defaultValue={talent?.x} />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='profileImg'>Upload your Profile Image</label>
+            <FileBase
+              type='file'
+              multiple={false}
+              onDone={({ base64 }) => setImg(base64)}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor={'bio'}>Bio</label>
+            <textarea name={'bio'} defaultValue={talent.bio} />
+          </div>
+          {/*  add a save button */}
+          <div className='form-control'>
+            <TButton
+              value={(<FaEdit />) as unknown as string}
+              type={'submit'}
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateTalentModal;
diff --git a/client/src/pages/Talent/Talent.tsx b/client/src/pages/Talent/Talent.tsx
index 5c8feb8..796502c 100644
--- a/client/src/pages/Talent/Talent.tsx
+++ b/client/src/pages/Talent/Talent.tsx
@@ -24,6 +24,7 @@ import { getTalentProjects } from '../../api/project.ts';
 import { getTalentEducations } from '../../api/education.ts';
 import { getTalentCertifications } from '../../api/certifications.ts';
 import { getTalentSkills } from '../../api/skills.ts';
+import UpdateTalentModal from '../../components/Modal/UpdateTalentModal.tsx';
 
 // @ts-ignore
 export const TalentContext: React.Context<{
@@ -37,6 +38,7 @@ const Talent = (): JSX.Element => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [user, _setUser] = useState(temp);
   const [showexp, setShowexp] = useState(false);
+  const [showTalentEditModal, setShowTalentEditModal] = useState(false);
   const [showproj, setShowproj] = useState(false);
   const [showedu, setShowedu] = useState(false);
   const [showskill, setShowskill] = useState(false);
@@ -81,8 +83,16 @@ const Talent = (): JSX.Element => {
               </div>
 
               <div>
-                <TButton value='Edit Profile' />
+                <TButton
+                  value='Edit Profile'
+                  onClick={() => setShowTalentEditModal(true)}
+                />
               </div>
+              <UpdateTalentModal
+                showTalentEditModal={showTalentEditModal}
+                setShowTalentEditModal={setShowTalentEditModal}
+                talent={user}
+              />
             </div>
           </div>
 

From a375fdb45d68cc1d91d4b2bedb4620da80d1000f Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 18:13:08 +0100
Subject: [PATCH 13/20] feat: implement submit talent patch form functionality

---
 .../components/Modal/UpdateTalentModal.tsx    | 21 ++++++++++++++---
 client/src/pages/Talent/Talent.tsx            | 23 ++++++++++++++-----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Modal/UpdateTalentModal.tsx b/client/src/components/Modal/UpdateTalentModal.tsx
index 3f2eec4..d467bba 100644
--- a/client/src/components/Modal/UpdateTalentModal.tsx
+++ b/client/src/components/Modal/UpdateTalentModal.tsx
@@ -1,6 +1,9 @@
 import TButton from '../Button/TButton.tsx';
 import { FaEdit } from 'react-icons/fa';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction, useState, useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import { TalentContext } from '../../pages/Talent/Talent.tsx';
+import { talentPatch } from '../../actions/talent.ts';
 import FileBase from 'react-file-base64';
 
 interface Talent {
@@ -34,14 +37,26 @@ const UpdateTalentModal = ({
 }: UpdateTalentModalProps): JSX.Element => {
   const modalStyle = showTalentEditModal ? 'showModal' : '';
   const [img, setImg] = useState('');
+  const tp = useContext(TalentContext);
+  const dispatch = useDispatch();
 
-  const handleSubmit = () => {};
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    formData.append('profileImg', img);
+    const data = Object.fromEntries(formData);
+    dispatch(talentPatch(talent._id, data));
+    tp.setRefresh(!tp.refresh);
+    const formElement = e.target as HTMLFormElement;
+    formElement.reset();
+    setShowTalentEditModal(false);
+  };
 
   return (
     <div className={'Modal ' + modalStyle}>
       <div className='content'>
         <div className={'header-11'}>
-          <h1>Add Education</h1>{' '}
+          <h1>Update Your Profile</h1>{' '}
           <TButton value={'X'} onClick={() => setShowTalentEditModal(false)} />
         </div>
         <hr />
diff --git a/client/src/pages/Talent/Talent.tsx b/client/src/pages/Talent/Talent.tsx
index 796502c..b9e535f 100644
--- a/client/src/pages/Talent/Talent.tsx
+++ b/client/src/pages/Talent/Talent.tsx
@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createContext, useEffect, useState } from 'react';
 import TalentNav from '../../components/Navbar/TalentNav';
+import Loading from '../../components/Loading/Loading.tsx';
 import './Talent.css';
 import { FaFile } from 'react-icons/fa';
 import TButton from '../../components/Button/TButton';
@@ -25,7 +26,8 @@ import { getTalentEducations } from '../../api/education.ts';
 import { getTalentCertifications } from '../../api/certifications.ts';
 import { getTalentSkills } from '../../api/skills.ts';
 import UpdateTalentModal from '../../components/Modal/UpdateTalentModal.tsx';
-
+import { getTalent } from '../../actions/talent.ts';
+import { useDispatch, useSelector } from 'react-redux';
 // @ts-ignore
 export const TalentContext: React.Context<{
   refresh: boolean;
@@ -48,6 +50,9 @@ const Talent = (): JSX.Element => {
   const [talentEducations, setTalentEducations] = useState([]);
   const [talentSkills, setTalentSkills] = useState([]);
   const [talentCertifications, setTalentCertifications] = useState([]);
+  const dispatch = useDispatch();
+  const [loading, setLoading] = useState();
+  const talent = useSelector((state) => state.talents.talent) || {};
 
   useEffect(() => {
     // @ts-ignore
@@ -62,7 +67,9 @@ const Talent = (): JSX.Element => {
     getTalentCertifications(user._id).then((value) =>
       setTalentCertifications(value.data),
     );
+    dispatch(getTalent(setLoading, user._id));
   }, [refresh, user._id]);
+  console.log(talent);
   return (
     <>
       <TalentNav />
@@ -88,11 +95,15 @@ const Talent = (): JSX.Element => {
                   onClick={() => setShowTalentEditModal(true)}
                 />
               </div>
-              <UpdateTalentModal
-                showTalentEditModal={showTalentEditModal}
-                setShowTalentEditModal={setShowTalentEditModal}
-                talent={user}
-              />
+              {loading ? (
+                ''
+              ) : (
+                <UpdateTalentModal
+                  showTalentEditModal={showTalentEditModal}
+                  setShowTalentEditModal={setShowTalentEditModal}
+                  talent={talent}
+                />
+              )}
             </div>
           </div>
 

From 77d46d7a4d117f640629b4a71079057154947f8a Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 19:05:00 +0100
Subject: [PATCH 14/20] perf: make talentUpdate modal scrolly

---
 client/src/api/talent.ts                                 | 6 +++++-
 client/src/components/Modal/UpdateTalentModal.tsx        | 6 +++++-
 client/src/components/Modal/styles/UpdateTalentModal.css | 4 ++++
 client/src/pages/Talent/Talent.tsx                       | 2 +-
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Modal/styles/UpdateTalentModal.css

diff --git a/client/src/api/talent.ts b/client/src/api/talent.ts
index 2527a31..c3ca379 100644
--- a/client/src/api/talent.ts
+++ b/client/src/api/talent.ts
@@ -11,6 +11,10 @@ export const getATalent = (id) => {
 };
 
 export const patchTalent = (id, data) => {
-	const talent = axios.patch(`http://localhost:3000/talents/${id}`, data);
+	const talent = axios.patch(`http://localhost:3000/talents/${id}`, data, {
+		headers: {
+			'Content-Type': 'multipart/form-data',
+		},
+	});
 	return talent;
 };
diff --git a/client/src/components/Modal/UpdateTalentModal.tsx b/client/src/components/Modal/UpdateTalentModal.tsx
index d467bba..53b538f 100644
--- a/client/src/components/Modal/UpdateTalentModal.tsx
+++ b/client/src/components/Modal/UpdateTalentModal.tsx
@@ -1,5 +1,6 @@
 import TButton from '../Button/TButton.tsx';
 import { FaEdit } from 'react-icons/fa';
+import './styles/UpdateTalentModal.css';
 import { Dispatch, SetStateAction, useState, useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import { TalentContext } from '../../pages/Talent/Talent.tsx';
@@ -54,7 +55,7 @@ const UpdateTalentModal = ({
 
   return (
     <div className={'Modal ' + modalStyle}>
-      <div className='content'>
+      <div className='content modal-content-container'>
         <div className={'header-11'}>
           <h1>Update Your Profile</h1>{' '}
           <TButton value={'X'} onClick={() => setShowTalentEditModal(false)} />
@@ -109,6 +110,9 @@ const UpdateTalentModal = ({
               onDone={({ base64 }) => setImg(base64)}
             />
           </div>
+          <div>
+            <img src={img} alt='Selected' className='w-5 h-4' />
+          </div>
           <div className='form-control'>
             <label htmlFor={'bio'}>Bio</label>
             <textarea name={'bio'} defaultValue={talent.bio} />
diff --git a/client/src/components/Modal/styles/UpdateTalentModal.css b/client/src/components/Modal/styles/UpdateTalentModal.css
new file mode 100644
index 0000000..1d98b4d
--- /dev/null
+++ b/client/src/components/Modal/styles/UpdateTalentModal.css
@@ -0,0 +1,4 @@
+.modal-content-container {
+    /* max-height: 400px;  */
+    overflow-y: scroll;
+  }
\ No newline at end of file
diff --git a/client/src/pages/Talent/Talent.tsx b/client/src/pages/Talent/Talent.tsx
index b9e535f..0b66e0d 100644
--- a/client/src/pages/Talent/Talent.tsx
+++ b/client/src/pages/Talent/Talent.tsx
@@ -77,7 +77,7 @@ const Talent = (): JSX.Element => {
         <div className='talent-page'>
           <div className='profile-info-card'>
             <div className='p-img'>
-              <img src='src/assets/talents/no_image.png' alt='' />
+              <img src={talent.profileImg} alt='' />
             </div>
             <div className='info-con'>
               <div className='info'>

From 0d2c497d8ddb87f5e649610ee9aa4352bf3bd7b8 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 19:30:48 +0100
Subject: [PATCH 15/20] bug: fix profileimg logic for employer navbar

---
 client/src/components/Navbar/TalentNav.tsx | 8 +++++++-
 client/src/pages/Employer/Employer.tsx     | 3 ++-
 client/src/pages/Talent/Talent.tsx         | 9 ++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Navbar/TalentNav.tsx b/client/src/components/Navbar/TalentNav.tsx
index 18edf94..3a3f4ac 100644
--- a/client/src/components/Navbar/TalentNav.tsx
+++ b/client/src/components/Navbar/TalentNav.tsx
@@ -59,7 +59,13 @@ function TalentNav(): JSX.Element {
 
       <Link to={'#'}>
         <img
-          src='/assets/talents/no_image.png'
+          src={
+            user.talent
+              ? user.talent.profileImg
+                ? user.talent.profileImg
+                : '/assets/talents/no_image.png'
+              : '/assets/talents/no_image.png'
+          }
           alt='fine girl'
           className='w-[50px] h-[50px] rounded-full'
           onClick={() => setOpenProfile((prev) => !prev)}
diff --git a/client/src/pages/Employer/Employer.tsx b/client/src/pages/Employer/Employer.tsx
index 48f9ee5..43db4ce 100644
--- a/client/src/pages/Employer/Employer.tsx
+++ b/client/src/pages/Employer/Employer.tsx
@@ -11,7 +11,7 @@ import { getTalents, getTalentsPerPage } from '../../actions/talent';
 
 const Employer = () => {
   // const { talents } = useSelector((state) => state.talents);
-  const { pagination } = useSelector((state) => state.talents);
+  const pagination = useSelector((state) => state.talents.pagination) || [];
   const dispatch = useDispatch();
   const location = useLocation();
   const [loading, setLoading] = useState(true);
@@ -21,6 +21,7 @@ const Employer = () => {
     dispatch(getTalentsPerPage(setLoading, page));
     // dispatch(getTalents(setLoading));
   }, [page, dispatch]);
+  // console.log(pagination);
 
   const prevPage = () => setPage((cur) => cur - 1);
   const nextPage = () => setPage((cur) => cur + 1);
diff --git a/client/src/pages/Talent/Talent.tsx b/client/src/pages/Talent/Talent.tsx
index 0b66e0d..ee092ca 100644
--- a/client/src/pages/Talent/Talent.tsx
+++ b/client/src/pages/Talent/Talent.tsx
@@ -77,7 +77,14 @@ const Talent = (): JSX.Element => {
         <div className='talent-page'>
           <div className='profile-info-card'>
             <div className='p-img'>
-              <img src={talent.profileImg} alt='' />
+              <img
+                src={
+                  talent.profileImg
+                    ? talent.profileImg
+                    : '/assets/talents/no_image.png'
+                }
+                alt=''
+              />
             </div>
             <div className='info-con'>
               <div className='info'>

From 8208e39fce97dd781a0dd0ad4c71300a4ffc82d3 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 19:53:20 +0100
Subject: [PATCH 16/20] ci: fix eslint errors for lint ci

Fix eslint errors allowing lint CI to fail
---
 client/src/pages/Talent/Talent.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/Talent/Talent.tsx b/client/src/pages/Talent/Talent.tsx
index ee092ca..20efd97 100644
--- a/client/src/pages/Talent/Talent.tsx
+++ b/client/src/pages/Talent/Talent.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createContext, useEffect, useState } from 'react';
@@ -68,7 +69,7 @@ const Talent = (): JSX.Element => {
       setTalentCertifications(value.data),
     );
     dispatch(getTalent(setLoading, user._id));
-  }, [refresh, user._id]);
+  }, [refresh, user._id, dispatch]);
   console.log(talent);
   return (
     <>

From 7d7cf637bcf42801a4d07d8eec5b876cc702d05f Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 20:17:09 +0100
Subject: [PATCH 17/20] chore: remove eslint unused directives for unused vars

---
 client/src/pages/Talent/Talent.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/pages/Talent/Talent.tsx b/client/src/pages/Talent/Talent.tsx
index 20efd97..c864de2 100644
--- a/client/src/pages/Talent/Talent.tsx
+++ b/client/src/pages/Talent/Talent.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createContext, useEffect, useState } from 'react';
 import TalentNav from '../../components/Navbar/TalentNav';
-import Loading from '../../components/Loading/Loading.tsx';
 import './Talent.css';
 import { FaFile } from 'react-icons/fa';
 import TButton from '../../components/Button/TButton';

From 16bb20749136d485db60633dcf62b4c9c320f190 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 20:29:35 +0100
Subject: [PATCH 18/20] feat: show current page number and total number of
 pages in pagination navigation

---
 client/src/pages/Employer/Employer.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/pages/Employer/Employer.tsx b/client/src/pages/Employer/Employer.tsx
index 43db4ce..54ea622 100644
--- a/client/src/pages/Employer/Employer.tsx
+++ b/client/src/pages/Employer/Employer.tsx
@@ -59,6 +59,10 @@ const Employer = () => {
               >
                 Prev
               </button>
+              <div className='mt-6 px-3 text-2xl font-semibold'>
+                {' '}
+                Page {pagination.currentPage} / {pagination.totalPages}
+              </div>
               <button
                 disabled={page === pagination.totalPages}
                 className='w-[70px] hover:border-green-200 h-[30px] rounded-md my-5 border-[1px] border-green-400 text-sm'

From 25a09957fd61a5bd49bb52ae77e4a95fce2bb8d9 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 20:46:04 +0100
Subject: [PATCH 19/20] feat: add linked socials to talent Details page

---
 client/src/components/TalentDetails.tsx | 273 +++++++++++++-----------
 1 file changed, 143 insertions(+), 130 deletions(-)

diff --git a/client/src/components/TalentDetails.tsx b/client/src/components/TalentDetails.tsx
index a50c1d9..7ff3cb3 100644
--- a/client/src/components/TalentDetails.tsx
+++ b/client/src/components/TalentDetails.tsx
@@ -5,152 +5,165 @@ import { getProjectsTalent } from '../actions/project.ts';
 import { getSkillsTalent } from '../actions/skill.ts';
 import { getCertificationsTalent } from '../actions/certifications.ts';
 import { useDispatch, useSelector } from 'react-redux';
+import { AiFillGithub } from 'react-icons/ai';
+import { BsLinkedin } from 'react-icons/bs';
 import { useParams } from 'react-router-dom';
 import Showwcase from '../components/talentProfile/Showwcase.tsx';
 import {
-    CertificationShowwcaseCard,
-    EducationShowwcaseCard,
-    ExperienceShowwcaseCard,
-    ProjectShowwcaseCard,
-    SkillShowwcaseCard,
+  CertificationShowwcaseCard,
+  EducationShowwcaseCard,
+  ExperienceShowwcaseCard,
+  ProjectShowwcaseCard,
+  SkillShowwcaseCard,
 } from '../components/talentProfile/ShowwcaseCard.tsx';
 
 const TalentDetails = ({ talent }) => {
-    const { id } = useParams();
-    const dispatch = useDispatch();
-    const [loading, setLoading] = useState();
-    const experiences = useSelector((state) => state.talentData.experiences);
-    const educations = useSelector((state) => state.talentData.educations);
-    const projects = useSelector((state) => state.talentData.projects);
-    const skills = useSelector((state) => state.talentData.skills);
-    const certs = useSelector((state) => state.talentData.certifications);
+  const { id } = useParams();
+  const dispatch = useDispatch();
+  const [loading, setLoading] = useState();
+  const experiences = useSelector((state) => state.talentData.experiences);
+  const educations = useSelector((state) => state.talentData.educations);
+  const projects = useSelector((state) => state.talentData.projects);
+  const skills = useSelector((state) => state.talentData.skills);
+  const certs = useSelector((state) => state.talentData.certifications);
 
-    useEffect(() => {
-        dispatch(getExperiencesTalent(id, setLoading));
-        dispatch(getEducationsTalent(id, setLoading));
-        dispatch(getProjectsTalent(id, setLoading));
-        dispatch(getSkillsTalent(id, setLoading));
-        dispatch(getCertificationsTalent(id, setLoading));
-    }, [id, dispatch]);
+  useEffect(() => {
+    dispatch(getExperiencesTalent(id, setLoading));
+    dispatch(getEducationsTalent(id, setLoading));
+    dispatch(getProjectsTalent(id, setLoading));
+    dispatch(getSkillsTalent(id, setLoading));
+    dispatch(getCertificationsTalent(id, setLoading));
+  }, [id, dispatch]);
 
-    return (
-        <>
-            {!loading && (
-                <div className='m-10 mx-[100px]'>
-                    <div>
-                        <div className='md:flex flex-row'>
-                            <div className='w-[170px] h-[170px] border-gray rounded-full flex justify-center'>
-                                <img
-                                    src={
-                                        !talent.profileImg
-                                            ? '/assets/talents/no_image.png'
-                                            : talent.profileImg
-                                    }
-                                    alt={talent.name}
-                                    className='object-cover'
-                                />
-                            </div>
-                            <div className='md:basis-1/2 my-20 mx-5 '>
-                                <h1 className='text-3xl font-bold'>
-                                    {talent.name}
-                                </h1>
-                                <h2>Id: {talent._id}</h2>
-                            </div>
-                        </div>
-                        <div className='mx-5'>
-                            <p className='text-gray-400'>Socials</p>
-                            <p>Bio</p>
-                        </div>
-                    </div>
+  return (
+    <>
+      {!loading && (
+        <div className='m-10 mx-[100px]'>
+          <div>
+            <div className='md:flex flex-row'>
+              <div className='w-[170px] h-[170px] border-gray rounded-full flex justify-center'>
+                <img
+                  src={
+                    !talent.profileImg
+                      ? '/assets/talents/no_image.png'
+                      : talent.profileImg
+                  }
+                  alt={talent.name}
+                  className='w-full h-full object-cover rounded-full'
+                />
+              </div>
+              <div className='md:basis-1/2 my-20 mx-5 '>
+                <h1 className='text-3xl font-bold'>{talent.name}</h1>
+                <h2>Id: {talent._id}</h2>
+              </div>
+            </div>
+            <div className='mx-5 my-3'>
+              <div className='flex justify-start'>
+                <a
+                  href={`https://github.com/${talent.github}`}
+                  className='text-blue-500 hover:underline'
+                  target='blank'
+                >
+                  <AiFillGithub className='text-2xl my-2 mr-2 text-green-400' />
+                </a>
+                <a
+                  href={`https://linkedin.com/in/${talent.linkedin}`}
+                  className='text-blue-500 hover:underline'
+                  target='blank'
+                >
+                  <BsLinkedin className='text-2xl my-2 text-green-400' />
+                </a>
+              </div>
+              <p>{talent.bio}</p>
+            </div>
+          </div>
 
-                    <hr className='my-5' />
-                    <div>
-                        <h2 className='text-3xl font-semibold'>Experience</h2>
-                        <div className='my-5'>
-                            <Showwcase>
-                                {experiences.map((exp) => (
-                                    <ExperienceShowwcaseCard
-                                        experience={exp}
-                                        key={exp?._id}
-                                        showEdit={false}
-                                    />
-                                ))}
-                            </Showwcase>
-                        </div>
-                    </div>
+          <hr className='my-5' />
+          <div>
+            <h2 className='text-3xl font-semibold'>Experience</h2>
+            <div className='my-5'>
+              <Showwcase>
+                {experiences.map((exp) => (
+                  <ExperienceShowwcaseCard
+                    experience={exp}
+                    key={exp?._id}
+                    showEdit={false}
+                  />
+                ))}
+              </Showwcase>
+            </div>
+          </div>
 
-                    <hr className='my-5' />
+          <hr className='my-5' />
 
-                    <div>
-                        <h2 className='text-3xl font-semibold'>Education</h2>
-                        <div className='my-5'>
-                            <Showwcase>
-                                {educations.map((edu) => (
-                                    <EducationShowwcaseCard
-                                        education={edu}
-                                        key={edu?._id}
-                                        showEdit={false}
-                                    />
-                                ))}
-                            </Showwcase>
-                        </div>
-                    </div>
+          <div>
+            <h2 className='text-3xl font-semibold'>Education</h2>
+            <div className='my-5'>
+              <Showwcase>
+                {educations.map((edu) => (
+                  <EducationShowwcaseCard
+                    education={edu}
+                    key={edu?._id}
+                    showEdit={false}
+                  />
+                ))}
+              </Showwcase>
+            </div>
+          </div>
 
-                    <hr className='my-5' />
+          <hr className='my-5' />
 
-                    <div>
-                        <h2 className='text-3xl font-semibold'>Project</h2>
-                        <div className='my-5'>
-                            <Showwcase>
-                                {projects.map((proj) => (
-                                    <ProjectShowwcaseCard
-                                        project={proj}
-                                        key={proj?._id}
-                                        showEdit={false}
-                                    />
-                                ))}
-                            </Showwcase>
-                        </div>
-                    </div>
+          <div>
+            <h2 className='text-3xl font-semibold'>Project</h2>
+            <div className='my-5'>
+              <Showwcase>
+                {projects.map((proj) => (
+                  <ProjectShowwcaseCard
+                    project={proj}
+                    key={proj?._id}
+                    showEdit={false}
+                  />
+                ))}
+              </Showwcase>
+            </div>
+          </div>
 
-                    <hr className='my-5' />
+          <hr className='my-5' />
 
-                    <div>
-                        <h2 className='text-3xl font-semibold'>Skills</h2>
-                        <div className='my-5'>
-                            <Showwcase>
-                                {skills.map((skill) => (
-                                    <SkillShowwcaseCard
-                                        skill={skill}
-                                        key={skill?._id}
-                                        showEdit={false}
-                                    />
-                                ))}
-                            </Showwcase>
-                        </div>
-                    </div>
-                    <hr className='my-5' />
+          <div>
+            <h2 className='text-3xl font-semibold'>Skills</h2>
+            <div className='my-5'>
+              <Showwcase>
+                {skills.map((skill) => (
+                  <SkillShowwcaseCard
+                    skill={skill}
+                    key={skill?._id}
+                    showEdit={false}
+                  />
+                ))}
+              </Showwcase>
+            </div>
+          </div>
+          <hr className='my-5' />
 
-                    <div>
-                        <h2 className='text-3xl font-semibold'>
-                            Certification
-                        </h2>
-                        <div className='my-5'>
-                            <Showwcase>
-                                {certs.map((cert) => (
-                                    <CertificationShowwcaseCard
-                                        certificate={cert}
-                                        key={cert?._id}
-                                        showEdit={false}
-                                    />
-                                ))}
-                            </Showwcase>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </>
-    );
+          <div>
+            <h2 className='text-3xl font-semibold'>Certification</h2>
+            <div className='my-5'>
+              <Showwcase>
+                {certs.map((cert) => (
+                  <CertificationShowwcaseCard
+                    certificate={cert}
+                    key={cert?._id}
+                    showEdit={false}
+                  />
+                ))}
+              </Showwcase>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 };
 
 export default TalentDetails;

From d8d7bc54e64173136c0a4558032b52491b6eac68 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Wed, 25 Oct 2023 21:53:08 +0100
Subject: [PATCH 20/20] bugs: remove multipart content header from talentpatch
 req

Remove multipart content header from talentpatch req which is not allowing patch update for non files on the backend
---
 client/src/api/talent.ts                          |  6 +-----
 client/src/components/Modal/UpdateTalentModal.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/src/api/talent.ts b/client/src/api/talent.ts
index c3ca379..2527a31 100644
--- a/client/src/api/talent.ts
+++ b/client/src/api/talent.ts
@@ -11,10 +11,6 @@ export const getATalent = (id) => {
 };
 
 export const patchTalent = (id, data) => {
-	const talent = axios.patch(`http://localhost:3000/talents/${id}`, data, {
-		headers: {
-			'Content-Type': 'multipart/form-data',
-		},
-	});
+	const talent = axios.patch(`http://localhost:3000/talents/${id}`, data);
 	return talent;
 };
diff --git a/client/src/components/Modal/UpdateTalentModal.tsx b/client/src/components/Modal/UpdateTalentModal.tsx
index 53b538f..9953a96 100644
--- a/client/src/components/Modal/UpdateTalentModal.tsx
+++ b/client/src/components/Modal/UpdateTalentModal.tsx
@@ -44,15 +44,15 @@ const UpdateTalentModal = ({
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
-    formData.append('profileImg', img);
+    if (!talent.profileImg) formData.append('profileImg', img);
     const data = Object.fromEntries(formData);
-    dispatch(talentPatch(talent._id, data));
+    await dispatch(talentPatch(talent._id, data));
     tp.setRefresh(!tp.refresh);
     const formElement = e.target as HTMLFormElement;
     formElement.reset();
     setShowTalentEditModal(false);
   };
-
+  console.log(talent._id);
   return (
     <div className={'Modal ' + modalStyle}>
       <div className='content modal-content-container'>
@@ -62,7 +62,7 @@ const UpdateTalentModal = ({
         </div>
         <hr />
         <form onSubmit={handleSubmit}>
-          <div className='form-control'>
+          <div className='form-control modal-content-container'>
             <label htmlFor='name'>Name</label>
             <input type='text' name={'name'} defaultValue={talent?.name} />
           </div>{' '}
@@ -91,15 +91,15 @@ const UpdateTalentModal = ({
             <input type='text' name={'github'} defaultValue={talent?.github} />
           </div>
           <div className='form-control'>
-            <label htmlFor='linkedIn'>LinkedIn Username</label>
+            <label htmlFor='linkedin'>LinkedIn Username</label>
             <input
               type='text'
-              name={'linkedIn'}
+              name={'linkedin'}
               defaultValue={talent?.linkedin}
             />
           </div>
           <div className='form-control'>
-            <label htmlFor='city'>X Username</label>
+            <label htmlFor='x'>X Username</label>
             <input type='text' name={'x'} defaultValue={talent?.x} />
           </div>
           <div className='form-control'>