Update popup complete button

src/App.js

@@ -113,7 +113,8 @@ function App() {
             <Route path="resources" element={<Resources />} />
             <Route path="hiredinfo" element={<HiredInfo />} />
           </Route>
-          <Route path="/onboard" element={<NavView />} />
+          <Route path="/onboard" element={<JobseekerData />} />
+          <Route path="/roadmap" element={<MilestoneMap />} />
           </>)
   }
           <Route path="/login" element={<Login />} />

src/Components/Milestones/Assessment.css

@@ -17,7 +17,9 @@
     margin-bottom: 20px;
 }
 
-.content {
+.contentDescription {
+    font-family: 'Liesel';
+    font-size: 32px;
     color: rgba(72, 70, 73, 1);
     font-weight: 400;
     text-align: center;
@@ -26,6 +28,13 @@
     margin: 16px auto 48px auto;
 }
 
+.content {
+    font-size: 20px;
+    color: #484649;
+    font-family: 'Montserrat';
+    text-align: center;
+}
+
 .shortLine {
     width: 101.509px;
     height: 2px;

src/Components/Milestones/Assessment.js

@@ -1,79 +1,45 @@
 import React, { useEffect, useState } from 'react';
 import './Assessment.css';
-import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
 import MilestoneClientInfo from './MilestoneClientInfo';
 import MilestoneChecklist from './MilestoneChecklist';
-import { fetchJobseekerData } from '../../Services/jobseeker-data-service';
-import {
-  objToArray, skillsChecklistOptions, industryInterestOptions,
-} from '../../Services/objects-service';
 
-const mockData = {
-  'Authentic Name': 'john smith',
-  Pronouns: 'they/them',
-  Phone: '(408) 263-0181',
-  Email: '[email protected]',
-  Location: 'los angeles, ca',
-  Ethnicity: 'new mexican',
-  Age: '29',
-  'Gender Identity': 'nonbinary',
-  Sexuality: 'bisexual',
-  Veteran: 'no',
-  Disability: 'no',
-  Housing: 'apartment',
-  'Currently Employed': 'yes',
-  'Prior Convictions': 'none',
-};
+function mapArrays(degreeArray, string) {
+  const keyValueMap = {};
+
+  degreeArray.forEach((degreeString, index) => {
+    const key = `${string} #${index + 1}`;
+    keyValueMap[key] = degreeString;
+  });
+
+  return keyValueMap;
+}
 
-function Assessment() {
+function Assessment({ jobseeker }) {
   const [experiences, setExperience] = useState([]);
   const [industries, setIndustries] = useState([]);
   const [skills, setSkills] = useState([]);
-  const store = useSelector((state) => state.auth.value);
 
   useEffect(() => {
     const start = async () => {
-      const jobseekerData = await fetchJobseekerData(store.email);
-      console.log(jobseekerData.data());
-      console.log(objToArray(jobseekerData.data().industryInterest));
-
       const updatedExperience = [];
-      industryInterestOptions.forEach((experience) => {
-        updatedExperience.push({ label: experience, value: false, bullets: [] });
-      });
-
-      updatedExperience.forEach((experience, i) => {
-        if (objToArray(jobseekerData.data().industryInterest).includes(experience.label)) {
-          updatedExperience[i].value = true;
-        }
+      jobseeker.skillsChecklist.forEach((experience) => {
+        updatedExperience.push({ label: experience, value: true, bullets: [] });
       });
 
       const updatedIndustryInterests = [];
-      industryInterestOptions.forEach((industry) => {
-        updatedIndustryInterests.push({ label: industry, value: false, bullets: [] });
-      });
-
-      updatedIndustryInterests.forEach((industry, i) => {
-        if (objToArray(jobseekerData.data().industryInterest).includes(industry.label)) {
-          updatedIndustryInterests[i].value = true;
-        }
+      jobseeker.industryInterest.forEach((industry) => {
+        updatedIndustryInterests.push({ label: industry, value: true, bullets: [] });
       });
 
       const updatedSkills = [];
-      skillsChecklistOptions.forEach((skill) => {
-        updatedSkills.push({ label: skill, value: false, bullets: [] });
+      jobseeker.generalSkills.forEach((skill) => {
+        updatedSkills.push({ label: skill, value: true, bullets: [] });
       });
 
-      updatedSkills.forEach((skill, i) => {
-        if (objToArray(jobseekerData.data().skillsChecklist).includes(skill.label)) {
-          // update.bullets
-          updatedSkills[i].value = true;
-        }
-      });
       setExperience(updatedExperience);
       setIndustries(updatedIndustryInterests);
       setSkills(updatedSkills);
-      console.log(updatedIndustryInterests);
     };
     start();
   }, []);
@@ -82,25 +48,35 @@ function Assessment() {
     <div className="assessment">
       <h6 className="contentTitle">Client Info</h6>
       <hr className="shortLine" />
-      <MilestoneClientInfo data={mockData} />
+      <MilestoneClientInfo data={jobseeker.clientInfo} />
       <h6 className="contentTitle">Education Info</h6>
       <hr className="shortLine" />
+      <MilestoneClientInfo data={mapArrays(jobseeker.degrees, 'Degree')} />
+      <MilestoneClientInfo data={mapArrays(jobseeker.certificates, 'Certificate')} />
       <h6 className="contentTitle">Previous Experience</h6>
-      <p className="content">Yar, in what areas of these here industries do ye have actual work or volunteer experience?</p>
+      <p className="contentDescription">Yar, in what areas of these here industries do ye have actual work or volunteer experience?</p>
       <hr className="longLine" />
       <MilestoneChecklist checkboxes={experiences} columns={2} />
       <h6 className="contentTitle">Industry Interests</h6>
-      <p className="content">In what of the followin&apos; industries are ye open to explorin&apos; or have an interest in possible future employment?</p>
+      <p className="contentDescription">In what of the followin&apos; industries are ye open to explorin&apos; or have an interest in possible future employment?</p>
       <hr className="shortLine" />
       <MilestoneChecklist checkboxes={industries} columns={2} />
       <h6 className="contentTitle">Skills Checklist</h6>
-      <p className="content">Please check all the skill sets that apply to ye.</p>
+      <p className="contentDescription">Please check all the skill sets that apply to ye.</p>
       <hr className="shortLine" />
       <MilestoneChecklist checkboxes={skills} columns={2} />
       <h6 className="contentTitle">Ultimate Dream Job</h6>
       <hr className="longLine" />
+      <p className="content">
+        {jobseeker.clientInfo['Dream Job']}
+        !
+      </p>
     </div>
   );
 }
 
+Assessment.propTypes = {
+  jobseeker: PropTypes.func.isRequired,
+};
+
 export default Assessment;

src/Components/Milestones/IslandPopup.css

@@ -50,7 +50,26 @@
     text-transform: none;
 }
 
-#completed{
+#waiting-for-approval {
+    padding: 20px 28px; 
+    border: 2px solid #484649; 
+    box-shadow: 0px 4px 8px rgba(60, 55, 68, 0.25);
+    border-radius: 12px; 
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: #484649;
+    margin: 2em auto;
+    left: 50%;
+    transform: translateX(-50%);
+    text-transform: none;
+}
+
+#complete{
     padding: 20px 28px; 
     border: 2px solid #484649; 
     box-shadow: 0px 4px 8px rgba(60, 55, 68, 0.25);
@@ -77,7 +96,7 @@
     border: 2px solid #939094;
 }
 
-#completed:hover {
+#pending:hover {
     background: #939094;
     box-shadow: 0px 4px 8px rgba(60, 55, 68, 0.25);
     color: #FFFBFE;

src/Components/Milestones/IslandPopup.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import Modal from '@mui/material/Modal';
@@ -16,32 +16,43 @@ import Hiring from './Hiring';
 import './IslandPopup.css';
 
 function IslandPopup({
-  title, isOpen, handleClose, id, isComplete, toggleComplete,
+  title, isOpen, handleClose, id, status, togglePending, jobseeker,
 }) {
+  const [message, setMessage] = useState('Mark as Complete');
+
+  useEffect(() => {
+    if (status === 'waiting for approval') {
+      setMessage('Pending Approval');
+    } else if (status === 'complete') {
+      setMessage('Complete!');
+    }
+  }, [status]);
+
   let toBeRendered;
   let markAsComplete = true;
 
   if (id === 'assessment') {
     markAsComplete = false;
-    toBeRendered = <Assessment />;
-  } else if (id === 'online-profile') {
+    toBeRendered = <Assessment jobseeker={jobseeker} />;
+  } else if (id === 'online profile') {
     toBeRendered = <OnlineProfile />;
   } else if (id === 'workshop') {
     toBeRendered = <Workshop />;
-  } else if (id === 'job-fair') {
+  } else if (id === 'job fair') {
     toBeRendered = <JobFair />;
-  } else if (id === 'resource') {
+  } else if (id === 'resources') {
     toBeRendered = <Resources />;
-  } else if (id === 'job-portal') {
+  } else if (id === 'job portal') {
     toBeRendered = <JobPortal />;
-  } else if (id === 'training-program') {
+  } else if (id === 'training program') {
     toBeRendered = <Training />;
   } else if (id === 'internship') {
     toBeRendered = <Internship />;
-  } else if (id === 'hiring-info') {
+  } else if (id === 'hiring info') {
     markAsComplete = false;
     toBeRendered = <Hiring />;
   }
+
   return (
     <div>
       <Modal
@@ -55,10 +66,10 @@ function IslandPopup({
           {(markAsComplete) ? (
             <Button
               disableRipple
-              onClick={toggleComplete}
-              id={(isComplete) ? 'completed' : 'incomplete'}
+              onClick={() => togglePending()}
+              id={status.replace(/ /g, '-')}
             >
-              {(isComplete) ? 'Marked as Completed' : 'Mark as Complete'}
+              {message}
             </Button>
           ) : null}
           <Button
@@ -80,13 +91,14 @@ IslandPopup.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   handleClose: PropTypes.func.isRequired,
   id: PropTypes.string.isRequired,
-  isComplete: PropTypes.bool,
-  toggleComplete: PropTypes.func,
+  status: PropTypes.string,
+  togglePending: PropTypes.func,
+  jobseeker: PropTypes.func.isRequired,
 };
 
 IslandPopup.defaultProps = {
-  isComplete: false,
-  toggleComplete: () => {},
+  status: 'incomplete',
+  togglePending: () => {},
 };
 
 export default IslandPopup;

src/Components/Milestones/MilestoneButton.js

@@ -5,16 +5,23 @@ import IslandPopup from './IslandPopup';
 import './MilestoneButton.css';
 
 function MilestoneButton({
-  title, image, imageHover, id,
+  title, image, imageHover, id, jobseeker, setJobseeker,
 }) {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const [isHover, setIsHover] = React.useState(false);
   const handleOnMouseEnter = () => setIsHover(true);
   const handleOnMouseLeave = () => setIsHover(false);
-  const [isComplete, setComplete] = React.useState(false);
-  const toggleComplete = () => setComplete(!isComplete);
+  const togglePending = () => {
+    const originalId = id;
+    const parsedId = originalId.replace(/-/g, ' ');
+    if (jobseeker.milestones[parsedId] === 'incomplete') {
+      const temp = { ...jobseeker };
+      temp.milestones[parsedId] = 'waiting for approval';
+      setJobseeker(temp);
+    }
+  };
 
   return (
     <div>
@@ -31,9 +38,11 @@ function MilestoneButton({
         title={title}
         isOpen={open}
         handleClose={handleClose}
-        isComplete={isComplete}
-        toggleComplete={toggleComplete}
+        status={jobseeker.milestones[id.replace(/-/g, ' ')]}
+        togglePending={togglePending}
         id={id}
+        jobseeker={jobseeker}
+        setJobseeker={setJobseeker}
       />
     </div>
 
@@ -45,6 +54,8 @@ MilestoneButton.propTypes = {
   image: PropTypes.string.isRequired,
   imageHover: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
+  jobseeker: PropTypes.func.isRequired,
+  setJobseeker: PropTypes.func.isRequired,
 };
 
 export default MilestoneButton;

src/Components/Milestones/MilestoneMap.css

@@ -93,9 +93,12 @@
   left: -6%;
 }
 
-#resource {
-  top: 38%;
-  left: -10%;
+#resources {
+  width: fit-content;
+  height: fit-content;
+  margin-top: 20vh;
+  margin-left: -2vw;
+  position: absolute;
 }
 
 #hiring-info {