Ignore:
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:
1 moved

Legend:

Unmodified
Added
Removed

  • jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js

    rb248810 rbefb988  
    22
    33import "./JobAdvertisements.css"
     4import "../shared_css/Random.css"
     5
    46import {useDispatch, useSelector} from "react-redux";
    57import {useEffect, useState} from "react";
    … …  
    1214import {Link} from "react-router-dom";
    1315import JobType from "../../enumerations/JobType";
     16import {RecruiterActions} from "../../redux/actions/recruiterActions";
    1417
    15 export const JobAdvertisements = (props) => {
     18
     19export const Workspace = (props) => {
    1620
    1721    const dispatch = useDispatch();
     22    const [dispatched, setDispatched] = useState(false)
     23
     24    const auth = useSelector(state => (state.auth.currentUser))
     25
    1826    const [jobAdvertisementsByRecruiter, setJobAdvertisementsByRecruiter] = useState([]);
    19     const auth = useSelector(state => (state.auth.currentUser))
    2027    let jobAdvertisementsByRecruiterState = useSelector(state => (state.jobAd.jobAdvertisementsByRecruiter))
    2128
    22     const [role, setRole] = useState("");
     29    const [recruiterDetails, setRecruiterDetails] = useState(null);
     30
    2331    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
    2432    const [selectedIndustry, setSelectedIndustry] = useState("all");
    2533    const [searchTerm, setSearchTerm] = useState("");
    26     const [dispatched, setDispatched] = useState(false)
     34
     35    const [activeJobListingsCount, setActiveJobListingsCount] = useState(0);
     36
     37    useEffect(() => {
     38        if (auth) {
     39            dispatch(RecruiterActions.fetchRecruiterEditDetailsById(auth.id, (success, response) => {
     40                if (success) {
     41                    setRecruiterDetails(response.data)
     42                }
     43            }))
     44        }
     45    }, [auth]);
    2746
    2847
    2948    useEffect(() => {
    30         if (auth) {
    31             setRole(auth.role);
    32         }
    33     }, [auth]);
    34 
    35     useEffect(() => {
    3649        if (!dispatched && jobAdvertisementsByRecruiterState.length === 0) {
    37             dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter((success, response) => {
     50            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter(auth.id, (success, response) => {
    3851                if (success && response.data.length > 0) {
    3952                    setJobAdvertisementsByRecruiter(sortElementsBy(response.data))
    … …  
    4659            setJobAdvertisementsByRecruiter(jobAdvertisementsByRecruiterState)
    4760            console.log("Fetch job advertisements by recruiter STATE")
     61
     62            setActiveJobListingsCount(countActiveJobListings(jobAdvertisementsByRecruiterState));
    4863        }
     64
    4965    }, [jobAdvertisementsByRecruiterState])
    5066
    5167    let filterJobAdvertisements = () => {
    52         JobAdvertisementActions.filterJobAdvertisementsByRecruiter(
    53             {
    54                 searchTerm: searchTerm,
    55                 industry: selectedIndustry,
    56                 sortOrder: selectedSortOrder
    57             }, (success, response) => {
    58                 if (success) {
    59                     setJobAdvertisementsByRecruiter(response.data);
    60                 }
     68        JobAdvertisementActions.filterJobAdvertisementsByRecruiter({
     69            searchTerm: searchTerm, industry: selectedIndustry, sortOrder: selectedSortOrder
     70        }, (success, response) => {
     71            if (success) {
     72                setJobAdvertisementsByRecruiter(response.data);
    6173            }
    62         )
     74        })
    6375    }
    6476
    65     return (
    66         <div className="container">
    67             <div className="head-dashboard-box">
     77    function countActiveJobListings(jobAds) {
     78        if (jobAds.length > 0) {
     79            const activeJobListings = jobAds.filter(job => job.active)
     80            return activeJobListings.length;
     81        }
     82        return 0;
     83    }
     84
     85    return (<div className="container">
     86
     87            {/*<div className="line-separator"></div>*/}
     88
     89            <div className="filter-container">
    6890                <div className="row">
    69                     <div className="col-md-12 filter-container">
     91                    <div className="col-md-12 filter-box">
    7092                        <div className="search-container">
    7193                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
    … …  
    96118                            />
    97119                        </div>
    98                         <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
     120                        <button onClick={filterJobAdvertisements} className="blue-submit-button">Find jobs</button>
    99121                    </div>
    100122                </div>
    101123            </div>
    102             <div className="row row-cols-1 row-cols-md-4 g-4">
     124            <div className="row row-cols-1 row-cols-md-5 g-3">
    103125                <AddJobAdModal/>
    104126
    105                 {jobAdvertisementsByRecruiter &&
    106                     jobAdvertisementsByRecruiter.map((jobAd, index) => (
    107                         <div key={index} className="col">
    108                             <div className="custom-card">
    109                                 <div className="card-head">
    110                                     <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
    111                                     <span
    112                                         className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
    113                                     {!jobAd.active && <span className="expired">Expired</span>}
    114                                     <div className="card-management-btns">
    115                                         <DeleteJobAdModal props={jobAd}/>
    116                                         <EditJobAdModal props={jobAd}/>
    117                                     </div>
     127                {jobAdvertisementsByRecruiter && jobAdvertisementsByRecruiter.map((jobAd, index) => (
     128                    <div key={index} className="col">
     129                        <div className="custom-card">
     130                            <div className="card-head">
     131                                <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
     132                                <span
     133                                    className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
     134                                {!jobAd.active && <span className="expired">Expired</span>}
     135                                <div className="card-management-btns">
     136                                    <DeleteJobAdModal props={jobAd}/>
     137                                    <EditJobAdModal props={jobAd}/>
    118138                                </div>
    119                                 <div className="card-body">
    120                                     <h5 className="card-title">{jobAd.title}</h5>
    121                                     <span>{jobAd.industry} • <span style={{
    122                                         color: "black",
    123                                         fontWeight: "bold"
    124                                     }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
    125                                     <div className="card-info">
     139                            </div>
     140                            <div className="card-body">
     141                                <h5 className="card-title">{jobAd.title}</h5>
     142                                <span>{jobAd.industry} • <span style={{
     143                                    color: "black", fontWeight: "bold"
     144                                }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
     145                                <div className="card-info">
    126146                                        <span><i className="fa-solid fa-building"
    127147                                                 style={{color: "#000000"}}></i> Company: <span style={{
    128                                             color: "black",
    129                                             fontWeight: "bold"
     148                                            color: "black", fontWeight: "bold"
    130149                                        }}>{jobAd.recruiterName}</span></span> <br/>
    131                                     </div>
     150                                </div>
    132151
    133                                     <div className="aligned">
    134                                         <Link to={`/my-job-advertisements/${jobAd.id}/applications`}
    135                                               className="card-button solo">View applications</Link>
    136                                     </div>
     152                                <div className="aligned">
     153                                    <Link to={`/job-management-hub/applications/${jobAd.id}`}
     154                                          className="card-button solo">View applications</Link>
     155                                </div>
    137156
    138                                 </div>
    139157                            </div>
    140158                        </div>
    141                     ))}
    142 
     159                    </div>))}
    143160            </div>
    144161        </div>
     162
     163
    145164    )
    146165}
Note: See TracChangeset for help on using the changeset viewer.