Changeset befb988 for jobvista-frontend/src/views/applications

Timestamp:

06/17/24 21:59:14 (2 weeks ago)

Author:

223021 <daniel.ilievski.2@…>

Branches:

main

Children:

08f82ec

Parents:

b248810

Message:

Added an edit profile page for both job seekers and recruiters, where they can upload profile pictures/company logos and edit their profile data. Added profile page specifically for recruiters. Refactored existing code.

Location:

jobvista-frontend/src/views/applications

Files:

• ApplicationDetailsModal.js (moved) (moved from jobvista-frontend/src/views/applications/ViewApplicationDetails.js ) (4 diffs)
• Applications.css (modified) (5 diffs)
• ApplicationsByJobAd.js (modified) (6 diffs)
• ApplicationsByJobSeeker.js (modified) (3 diffs)
• ApplyToJobAdModal.js (modified) (7 diffs)

jobvista-frontend/src/views/applications/ApplicationDetailsModal.js

@@ -1 +1 @@
 import React, {useEffect, useState} from "react";
-import "../job_advertisements/Form.css";
+import "../shared_css/Modal.css";
 
 import 'react-responsive-modal/styles.css';
@@ -19 +19 @@
 
 
-export const ViewApplicationDetails = (props) => {
+export const ApplicationDetailsModal = (props) => {
     const {application} = props
     const [modal, setModal] = useState(false);
@@ -54 +54 @@
                         <div className="col-md-6">
                             <label className="label">Why are you interested in joining our company?</label>
-                            <textarea disabled type="text" defaultValue={application.questionAnswers[0]} disabled placeholder="Write your answer here..." className="applictaion-textarea"/>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[0]} disabled placeholder="Write your answer here..." className="application-textarea"/>
 
 
                             <label className="label">What makes you a good fit for this position?</label>
-                            <textarea disabled type="text" defaultValue={application.questionAnswers[1]}  placeholder="Write your answer here..." className="applictaion-textarea"/>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[1]}  placeholder="Write your answer here..." className="application-textarea"/>
 
 
                             <label className="label">What do you hope to achieve in your first 6 months in this role?</label>
-                            <textarea disabled type="text" defaultValue={application.questionAnswers[2]}  placeholder="Write your answer here..." className="applictaion-textarea"/>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[2]}  placeholder="Write your answer here..." className="application-textarea"/>
 
                         </div>
@@ -73 +73 @@
                             <br/>
                             <label className="label">Message to the recruiter</label>
-                            <textarea disabled type="text" defaultValue={application.message} placeholder="Optional..." className="applictaion-textarea"/>
+                            <textarea disabled type="text" defaultValue={application.message} placeholder="Optional..." className="application-textarea"/>
 
                         </div>

jobvista-frontend/src/views/applications/Applications.css

@@ -1 @@
-.applications-container {
+.custom-container {
     width: 65% !important;
     max-width: 1500px !important;
@@ -6 +6 @@
 
 .application-title {
-    font-family: Ubuntu;
-    text-transform: uppercase;
-    margin: 25px auto;
+    font-family: "Segoe UI";
+    margin-top: 40px;
+    margin-bottom: 20px;
     display: flex;
-    justify-content: center;
+    justify-content: start;
+    border-bottom: 1px solid #CFCFCF;
 }
-.application-title h1 {
-    font-weight: bold;
+.application-title h3 {
+    font-weight: 500;
 }
 
@@ -28 +29 @@
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transform: translate(0, 0);
     height: auto;
     padding: 20px 20px;
     display: flex;
     justify-content: center;
+    gap: 20px;
     margin: 15px 0;
+    /*z-index: -1000;*/
+}
+.application-card .app-job-seeker-pic {
+    border: 1px solid gray;
+    border-radius: 50%
+}
+.application-card .app-job-seeker-pic img {
+    border-radius: 50%;
 }
 
-.application-card .left-box {
-    width: 55%;
-    display: inline-block;
+.application-card .app-info {
+    width: 60%;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 10px;
 }
 
-.application-card .left-box .jobAd-title {
+.application-card .app-info .jobAd-title {
     font-weight: 600;
     /*text-transform: uppercase;*/
     font-family: 'Segoe UI', sans-serif;
-    font-size: 22px;
+    /*font-size: 22px;*/
 }
+.application-card .app-info .jobAd-title
 
-.application-card .left-box .contact-info {
+.application-card .app-info .contact-info {
     display: inline-flex;
-    gap: 10px;
+    gap: 30px;
 }
-.application-card .left-box .contact-info .contact-item {
+.application-card .app-info .contact-info .contact-item {
     display: inline-flex;
     align-items: center;
     gap: 5px;
+    margin-right: 10px
 }
 
-.application-card .right-box {
-    width: 45%;
+.application-card .app-info .contact-info .contact-item span {
+   color: darkgray;
+}
+
+.application-card .app-status {
+    width: 40%;
     display: inline-flex;
     justify-content: end;
@@ -66 +85 @@
 }
 
-.application-card .right-box .select {
-    width: 35%;
+.application-card .app-status .select {
+    width: 45%;
     display: inline-block;
 }
+
+.status {
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    width: 150px;
+    text-align: center;
+}
+
 
 .application-button {
@@ -75 +103 @@
     border-radius: 8px;
     width: auto;
-    background-color: rgba(207, 235, 255, 1);
-    color: black;
-    font-weight: bold;
-    padding: 5px 10px;
-    transition: 0.2s;
+    background-image: linear-gradient(to bottom, #dddddd, #f0f0f0);
+    background-color: #dddddd;
+    color: #333333;
+
+    font-weight: 700;
+    padding: 8px 13px;
 }
+
 .application-button:hover {
-    background-color: rgb(187, 215, 235);
+    background: linear-gradient(to bottom, #bbbbbb, #dddddd);
+    color: #333333;
 }
 

jobvista-frontend/src/views/applications/ApplicationsByJobAd.js

@@ -1 @@
-import {useDispatch} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {useEffect, useState} from "react";
 import {useParams} from "react-router";
 import {ApplicationActions} from "../../redux/actions/applicationActions";
-import {ViewApplicationDetails} from "./ViewApplicationDetails";
+import {ApplicationDetailsModal} from "./ApplicationDetailsModal";
 import "./Applications.css"
 import Select from "react-select";
+import {sortElementsBy} from "../../utils/utils";
+import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
+import {notifyAppStatusUpdate} from "../../utils/toastUtils";
 
 export const ApplicationsByJobAd = () => {
@@ -11 +14 @@
     const dispatch = useDispatch();
     let {advertisement_id} = useParams();
+
     const [applicationsByJobAd, setApplicationsByJobAd] = useState([]);
+    let applicationsByJobAdState = useSelector(state => state.appl.applicationsByJobAdId)
+    const [dispatched, setDispatched] = useState(false);
+
+    const [profilePics, setProfilePics] = useState({});
+    let profilePicsState = useSelector(state => state.images.profilePictures)
+    const [profilePicsDispatched, setProfilePicsDispatched] = useState(false);
+
     const [jobAdTitle, setJobAdTitle] = useState("");
 
     useEffect(() => {
-        dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
-            if (success && reponse.data.length > 0) {
-                setApplicationsByJobAd(reponse.data)
-                setJobAdTitle(reponse.data[0].jobAdTitle)
+        if(!dispatched && (applicationsByJobAdState.length === 0 || applicationsByJobAdState.length === 1)) {
+            dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
+                if (success && reponse.data.length > 0) {
+                    setApplicationsByJobAd(sortElementsBy(reponse.data, "submittedOn"))
+                    setJobAdTitle(reponse.data[0].jobAdTitle)
+                }
+                setDispatched(true)
+                console.log("Fetch applications by job ad GET")
+            }))
+        } else {
+            setApplicationsByJobAd(sortElementsBy(applicationsByJobAdState, "submittedOn"));
+            if(applicationsByJobAdState.length > 0) {
+                setJobAdTitle(applicationsByJobAdState[0].jobAdTitle)
+            }
+
+        }
+
+    }, [applicationsByJobAdState])
+
+    useEffect(() => {
+        if(dispatched && !profilePicsDispatched) {
+            applicationsByJobAd.forEach(app => {
+                if(app.jobSeekerId && !profilePics[app.jobSeekerId]) {
+                    fetchProfilePic(app.jobSeekerId)
+                }
+            })
+            setProfilePicsDispatched(true);
+            console.log("Fetch all profile pics GET")
+        } else if(profilePicsDispatched) {
+            setProfilePics(profilePicsState)
+            console.log("Fetch all profile pics STATE")
+        }
+    }, [dispatched])
+
+    const fetchProfilePic = (jobSeekerId) => {
+        dispatch(JobSeekerActions.downloadProfilePic(jobSeekerId, (success, response) => {
+            if(success) {
+                setProfilePics(prevState => ({...prevState, [jobSeekerId]: response}))
             }
         }))
-    }, [])
+    }
+
 
     const options = [
@@ -37 +83 @@
         dispatch(ApplicationActions.updateApplicationStatus(id, selectedOption.value, (success, response) => {
             if(success) {
-                console.log("Status updated.")
+                // console.log("Status updated.")
+                notifyAppStatusUpdate()
             }
         }))
@@ -43 +90 @@
 
 
-    return (<div className="applications-container">
+    return (<div className="custom-container">
         <div className="application-title">
             {jobAdTitle ?
-                <h1>Applications for <span>{jobAdTitle}</span></h1> :
+                <h3>Applications for <b>{jobAdTitle}</b></h3> :
                 <h1></h1>
             }
-
         </div>
 
         {applicationsByJobAd && applicationsByJobAd.map((application, index) => (
             <div className="application-card">
-                <div className="left-box">
+                <div className="app-job-seeker-pic">
+                    <img
+                        // loading gif
+                        src={profilePicsState[application.jobSeekerId]}
+                        alt=""
+                        width={75} height={75}
+                    />
+                </div>
+                <div className="app-info">
                     <span>Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
                         day: 'numeric',
@@ -60 +114 @@
                         year: 'numeric'
                     })}</b></span>
-                    <br/><br/>
                     <div className="contact-info">
                         <div className="contact-item">
                             <i className="fa-solid fa-user"></i> <span>{application.jobSeekerName}</span>
-                        </div>
-                        <div className="contact-item">
+                        </div> <div className="contact-item">
                             <i className="fa-solid fa-envelope"></i> <span>{application.jobSeekerEmail}</span>
-                        </div>
-                        <div className="contact-item">
+                        </div> <div className="contact-item">
                             <i className="fa-solid fa-phone"></i> <span>{application.jobSeekerPhoneNumber}</span>
                         </div>
@@ -74 +125 @@
                 </div>
 
-                <div className="right-box">
-                    <ViewApplicationDetails application={application}/>
+                <div className="app-status">
+                    <ApplicationDetailsModal application={application}/>
                     <div className="select">
                         <Select options={options}  onChange={(selectedOption) => handleChangeStatus(selectedOption, application.id)} defaultValue={handleDefaultStatus(application.status)}/>

jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js

@@ -2 +2 @@
 import {useEffect, useState} from "react";
 import {ApplicationActions} from "../../redux/actions/applicationActions";
-import {ViewApplicationDetails} from "./ViewApplicationDetails";
+import {ApplicationDetailsModal} from "./ApplicationDetailsModal";
 import Select from "react-select";
+
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+import {sortElementsBy} from "../../utils/utils";
 
 export const ApplicationsByJobSeeker = () => {
     const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser);
+
     const [applicationsByJobSeeker, setApplicationsByJobSeeker] = useState([]);
     let applicationsByJobSeekerState = useSelector(state => state.appl.applicationsByJobSeeker);
     const [dispatched, setDispatched] = useState(false);
 
+    const [logos, setLogos] = useState({});
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false);
+
+
+
     useEffect(() => {
-        if(!dispatched && applicationsByJobSeekerState.length === 0) {
-            dispatch(ApplicationActions.fetchApplicationsByJobSeeker((success, response) => {
+        if(!dispatched && (applicationsByJobSeekerState.length === 0 || applicationsByJobSeekerState.length === 1) ) {
+            dispatch(ApplicationActions.fetchApplicationsByJobSeeker(auth.id, (success, response) => {
                 if(success && response.data.length > 0) {
-                    setApplicationsByJobSeeker(response.data);
+                    setApplicationsByJobSeeker(sortElementsBy(response.data, "submittedOn"));
                 }
+                setDispatched(true)
                 console.log("Fetch applications by job seeker GET")
             }))
-            setDispatched(true)
+
         } else {
-            setApplicationsByJobSeeker(applicationsByJobSeekerState);
+            setApplicationsByJobSeeker(sortElementsBy(applicationsByJobSeekerState, "submittedOn"));
             console.log("Fetch applications by job seeker STATE")
         }
     }, [applicationsByJobSeekerState])
 
+    useEffect(() => {
+
+        if(dispatched && !logoDispatched) {
+            applicationsByJobSeeker.forEach(jobAd => {
+                if(jobAd.recruiterId && !logos[jobAd.recruiterId]) {
+                    fetchLogo(jobAd.recruiterId);
+                }
+            })
+            setLogoDispatched(true)
+            console.log("Fetch all logos GET")
+        } else if (logoDispatched){
+            setLogos(logosState)
+            console.log("Fetch all logos STATE")
+
+        }
+
+    }, [dispatched, logosState])
+
+
+
+    const fetchLogo = (recruiterId) => {
+        dispatch(RecruiterActions.downloadLogo(recruiterId, (success, response) => {
+            if(success) {
+                setLogos(prevLogos => ({...prevLogos, [recruiterId]: response}))
+            }
+        }));
+    };
+
     const options = [
-        {value: 'PROPOSED', label: <span><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
-        {value: 'UNDER_REVIEW', label: <span><i className="fa-solid fa-file-pen"></i> Under Review</span>},
-        {value: 'ACCEPTED', label: <span><i className="fa-solid fa-user-check"></i> Accepted</span>},
-        {value: 'DENIED', label: <span><i className="fa-solid fa-user-slash"></i> Denied</span>}
+        {value: 'PROPOSED', label: <span className="status" style={{backgroundColor: '#4A90E2'}}><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
+        {value: 'UNDER_REVIEW', label: <span className="status" style={{backgroundColor: '#F5A623'}}><i className="fa-solid fa-file-pen"></i> Under Review</span>},
+        {value: 'ACCEPTED', label: <span className="status" style={{backgroundColor: '#7ED321'}}><i className="fa-solid fa-user-check"></i> Accepted</span>},
+        {value: 'DENIED', label: <span className="status" style={{backgroundColor: '#D0021B'}}><i className="fa-solid fa-user-slash"></i> Denied</span>}
     ];
 
@@ -40 +80 @@
 
     return (
-        <div className="applications-container">
+        <div className="custom-container">
+
             <div className="application-title">
-
+                <h3>Application history</h3>
             </div>
             {applicationsByJobSeeker && applicationsByJobSeeker.map((application, index) => (
                 <div key={index} className="application-card">
-                    <div className="left-box">
-                        <span className="jobAd-title">{application.jobAdTitle}</span>
-                        <br/>
-                        <br/>
+                    <div className="app-company-logo">
+                        <img
+                            // loading gif
+                            src={logosState[application.recruiterId]}
+                            alt=""
+                            width={75} height={75}
+                        />
+                    </div>
+
+                    <div className="app-info">
+                        <div className="jobAd-title">{application.jobAdTitle}</div>
                         <div className="contact-info">
                             <div className="contact-item">
@@ -68 +116 @@
                     </div>
 
-                    <div className="right-box">
-                        <ViewApplicationDetails application={application}/>
-                        <div className="select">
-                            <Select isDisabled={true} options={options} defaultValue={handleDefaultValue(application.status)}/>
-                        </div>
+                    <div className="app-status">
+                        <ApplicationDetailsModal application={application}/>
+                        <> {handleDefaultValue(application.status).label}</>
+                        {/*<div className="select">*/}
+                        {/*    <Select isDisabled={true} options={options} />*/}
+                        {/*</div>*/}
 
                     </div>

jobvista-frontend/src/views/applications/ApplyToJobAdModal.js

@@ -1 +1 @@
 import React, {useState} from "react";
-import "../job_advertisements/Form.css";
+import "../shared_css/Modal.css";
 
 import 'react-responsive-modal/styles.css';
 import {Modal} from 'react-responsive-modal';
-import Select from "react-select";
 
 //Validation
@@ -12 +11 @@
 
 
-import {employmentStatusOptions, industryOptions, jobTypeOptions} from "../selectOptions";
 import {useDispatch, useSelector} from "react-redux";
-import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
 import Roles from "../../enumerations/Roles";
 import {ApplicationActions} from "../../redux/actions/applicationActions";
+import {notifyJobAdApply} from "../../utils/toastUtils";
 
 
@@ -55 +53 @@
                 formData,(success, response) => {
                     if(success) {
-                        console.log("Job Advertisement added")
                         toggleModal()
+                        notifyJobAdApply()
                     }
                 }
@@ -70 +68 @@
         {role===Roles.JOBSEEKER &&
             <>
-                {jobAd.active && <button onClick={toggleModal} className="card-button apply">Apply now</button> }
+                {jobAd.active && <button onClick={toggleModal} className="apply-button apply">Apply now</button> }
                 {!jobAd.active && <button className="card-button apply disabled">Apply now</button> }
             </>
@@ -86 +84 @@
                             <label className="label">Why are you interested in joining our company?</label>
                             <textarea type="text" placeholder="Write your answer here..."
-                                      {...register("answerOne")} className="applictaion-textarea"/>
+                                      {...register("answerOne")} className="application-textarea"/>
                             <p style={{color: "red"}}>{errors.answerOne?.message}</p>
 
                             <label className="label">What makes you a good fit for this position?</label>
                             <textarea type="text" placeholder="Write your answer here..."
-                                      {...register("answerTwo")} className="applictaion-textarea"/>
+                                      {...register("answerTwo")} className="application-textarea"/>
                             <p style={{color: "red"}}>{errors.answerTwo?.message}</p>
 
                             <label className="label">What do you hope to achieve in your first 6 months in this role?</label>
                             <textarea type="text"  placeholder="Write your answer here..."
-                                   {...register("answerThree")} className="applictaion-textarea"/>
+                                   {...register("answerThree")} className="application-textarea"/>
                             <p style={{color: "red"}}>{errors.answerThree?.message}</p>
 
@@ -103 +101 @@
                             <label htmlFor="start">Curriculum vitae (CV)</label>
                             <br/>
-                            <input {...register("file")} onChange={(e) => setResumeFile(e.target.files[0])} required type="file" id="fileUpload" accept=".pdf"/>
+                            <input {...register("file")} className="resume-link" onChange={(e) => setResumeFile(e.target.files[0])} required type="file" id="fileUpload" accept=".pdf"/>
 
                             <br/>
                             <label className="label">Message to the recruiter</label>
                             <textarea type="text" placeholder="Optional..."
-                                      {...register("messageToRecruiter")} className="applictaion-textarea"/>
+                                      {...register("messageToRecruiter")} className="application-textarea"/>
 
                             <br/><br/>
@@ -115 +113 @@
                     </div>
 
-                    <div className="aligned">
+                    <div className="modal-buttons">
+                        <div className="cancel-btn" onClick={toggleModal}> Cancel</div>
                         <button className="submit-btn"> Submit</button>
                     </div>