Changeset befb988 for jobvista-frontend/src/views/dashboard/Dashboard.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/dashboard/Dashboard.js (modified) (9 diffs)

jobvista-frontend/src/views/dashboard/Dashboard.js

@@ -1 @@
-import "./Dashboard.css"
+import "../shared_css/Random.css"
 
 import {useDispatch, useSelector} from "react-redux";
@@ -12 +12 @@
 import {AUTH_TOKEN} from "../../axios/axiosInstance";
 import {jwtDecode} from "jwt-decode";
-
-export const Dashboard = (props) => {
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+
+export const Dashboard = () => {
 
     const dispatch = useDispatch();
@@ -19 +20 @@
     const [jobAdvertisements, setJobAdvertisements] = useState([]);
     let jobAdvertisementsState = useSelector(state => state.jobAd.jobAdvertisements)
+    const [jobDispatched, setJobDispatched] = useState(false);
+
+    const [logos, setLogos] = useState({});
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false);
+
     const auth = useSelector(state => state.auth);
 
@@ -25 +32 @@
     const [selectedIndustry, setSelectedIndustry] = useState("all");
     const [searchTerm, setSearchTerm] = useState("");
-    const [dispatched, setDispatched] = useState(false)
+
+
 
     // const [user, setUser] = useState(null);
@@ -54 +62 @@
 
     useEffect(() => {
-        if (!dispatched && jobAdvertisementsState.length == 0) {
+        if (!jobDispatched && jobAdvertisementsState.length == 0) {
             dispatch(JobAdvertisementActions.fetchJobAdvertisements((success, response) => {
                 if (success && response.data.length > 0) {
-                    setJobAdvertisements(sortElementsBy(response.data))
+                    setJobAdvertisements(sortElementsBy(response.data, "postedOn"))
                 }
-                setDispatched(true)
+                setJobDispatched(true)
                 console.log("Fetch all job advertisements GET")
             }))
@@ -66 +74 @@
             setJobAdvertisements(jobAdvertisementsState)
             console.log("Fetch all job advertisements STATE")
+
+
         }
     }, [jobAdvertisementsState])
+
+    useEffect(() => {
+
+        if(jobDispatched && !logoDispatched) {
+            jobAdvertisements.forEach(jobAd => {
+                if(jobAd.recruiterId && !logos[jobAd.recruiterId]) {
+                    fetchLogo(jobAd.recruiterId);
+                }
+            })
+            setLogoDispatched(true)
+            console.log("Fetch all logos GET")
+        } else {
+            setLogos(logosState)
+            console.log("Fetch all logos STATE")
+        }
+
+        }, [jobDispatched, logosState])
+
+    const fetchLogo = (recruiterId) => {
+        dispatch(RecruiterActions.downloadLogo(recruiterId, (success, response) => {
+            if(success) {
+                setLogos(prevLogos => ({...prevLogos, [recruiterId]: response}))
+            }
+        }));
+    };
 
     let filterJobAdvertisements = () => {
@@ -86 +121 @@
 
         <div className="container">
-            <div className="head-dashboard-box">
+            <div className="filter-container">
                 <div className="row">
-                    <div className="col-md-12 filter-container">
+                    <div className="col-md-12 filter-box">
                         <div className="search-container">
                             <i className="fa-solid fa-magnifying-glass search-icon"></i>
@@ -117 +152 @@
                             />
                         </div>
-                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
+                        <button onClick={filterJobAdvertisements} className="blue-submit-button">Find jobs</button>
                     </div>
-                    {/*<div className="col-md-3">*/}
-
-                    {/*<div className="date-range-section item">*/}
-                    {/*    <Select*/}
-                    {/*        defaultValue={{value: "all", label: "Lifetime"}}*/}
-                    {/*        //value={selectedDateRange.value}*/}
-                    {/*        //onChange={option => setSelectedDateRange(option.value)}*/}
-                    {/*        options={dataRangeOptions}*/}
-                    {/*        className="date-range sort"*/}
-                    {/*    />*/}
-                    {/*</div>*/}
-                    {/*</div>*/}
                 </div>
             </div>
-            <div className="row row-cols-1 row-cols-md-4 g-4">
-
+            <div className="row row-cols-2 row-cols-md-4 g-4">
                 {jobAdvertisements &&
                     jobAdvertisements.map((jobAd, index) => (
@@ -146 +168 @@
                                 </div>
                                 <div className="card-body">
+                                    <img
+                                        // loading gif
+                                        src={logos[jobAd.recruiterId]}
+                                        alt=""
+                                        width={100} height={100}
+                                    />
                                     <h5 className="card-title">{jobAd.title}</h5>
                                     <span>{jobAd.industry} • <span style={{