Changeset befb988 for jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js

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.

File:

• jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js (modified) (3 diffs)

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>