Ignore:
Timestamp:
06/09/24 14:24:03 (2 weeks ago)
Author:
223021 <daniel.ilievski.2@…>
Branches:
main
Children:
b248810
Parents:
19398ad
Message:

Implemented job application functionality, added job advertisement filtering and replaced text areas with editors

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r19398ad r28b3398  
    66import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
    77import {formatRelativeTime, sortElementsByDateCreated} from "../../utils/utils";
    8 import {dataRangeOptions, industryOptions, sortOptions} from "../selectOptions";
     8import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
    99import Select from "react-select";
    1010import {DeleteJobAdModal} from "./DeleteJobAdModal";
    … …  
    1313import JobType from "../../enumerations/JobType";
    1414
    15 export const JobAdvertisements = () => {
     15export const JobAdvertisements = (props) => {
    1616
    1717    const dispatch = useDispatch();
    … …  
    2121
    2222    const [role, setRole] = useState("");
    23     const [sortOrder, setSortOrder] = useState("newest");
    24     const [selectedDateRange, setSelectedDateRange] = useState("all");
     23    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
     24    const [selectedIndustry, setSelectedIndustry] = useState("all");
    2525    const [searchTerm, setSearchTerm] = useState("");
    2626    const [dispatched, setDispatched] = useState(false)
    … …  
    3535    useEffect(() => {
    3636        if (!dispatched && jobAdvertisementsByRecruiterState.length === 0) {
    37             dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter("deleteThis", (success, response) => {
     37            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter((success, response) => {
    3838                if (success && response.data.length > 0) {
    3939                    setJobAdvertisementsByRecruiter(sortElementsByDateCreated(response.data))
    … …  
    4949    }, [jobAdvertisementsByRecruiterState])
    5050
     51    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                }
     61            }
     62        )
     63    }
     64
    5165    return (
    5266        <div className="container">
    53             <div className="head-job-advertisements-box">
     67            <div className="head-dashboard-box">
    5468                <div className="row">
    55                     <div className="col-md-3">
    56                         <div className="search-container head-component">
    57                             <i className="fa-solid fa-magnifying-glass blue-colored"></i>
     69                    <div className="col-md-12 filter-container">
     70                        <div className="search-container">
     71                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
    5872                            <input
    5973                                className="search-input"
    6074                                type="text"
    6175                                placeholder="Search job advertisement by title..."
    62                                 //value={searchTerm}
    63                                 //onChange={event => setSearchTerm(event.target.value)}
     76                                value={searchTerm}
     77                                onChange={event => setSearchTerm(event.target.value)}
    6478                            />
    6579                        </div>
    66                     </div>
    67                     <div className="col-md-9">
    68 
    69                         <AddJobAdModal/>
     80                        <div className="sort-section item">
     81                            <Select
     82                                defaultValue={{value: "all", label: "All industries"}}
     83                                value={selectedIndustry.value}
     84                                onChange={option => setSelectedIndustry(option.value)}
     85                                options={industryOptionsFilter}
     86                                className="sort-range sort"
     87                            />
     88                        </div>
    7089                        <div className="sort-section item">
    7190                            <Select
    7291                                defaultValue={{value: "newest", label: "Date (Newest First)"}}
    73                                 //value={sortOrder.value}
    74                                 //onChange ={option => setSortOrder(option.value)}
     92                                value={selectedSortOrder.value}
     93                                onChange={option => setSelectedSortOrder(option.value)}
    7594                                options={sortOptions}
    7695                                className="sort-range sort"
    7796                            />
    7897                        </div>
    79                         <div className="date-range-section item">
    80                             <Select
    81                                 defaultValue={{value: "all", label: "Lifetime"}}
    82                                 //value={selectedDateRange.value}
    83                                 //onChange={option => setSelectedDateRange(option.value)}
    84                                 options={dataRangeOptions}
    85                                 className="date-range sort"
    86                             />
    87                         </div>
     98                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
    8899                    </div>
    89100                </div>
    90101            </div>
    91102            <div className="row row-cols-1 row-cols-md-4 g-4">
     103                <AddJobAdModal/>
    92104
    93105                {jobAdvertisementsByRecruiter &&
    … …  
    97109                                <div className="card-head">
    98110                                    <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
    99                                     <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
     111                                    <span
     112                                        className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
    100113                                    {!jobAd.active && <span className="expired">Expired</span>}
    101114                                    <div className="card-management-btns">
    … …  
    106119                                <div className="card-body">
    107120                                    <h5 className="card-title">{jobAd.title}</h5>
    108                                     <span>{jobAd.industry} • <span style={{color: "black", fontWeight: "bold"}}>{formatRelativeTime(jobAd.postedOn)}</span></span>
     121                                    <span>{jobAd.industry} • <span style={{
     122                                        color: "black",
     123                                        fontWeight: "bold"
     124                                    }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
    109125                                    <div className="card-info">
    110                                         <span><i className="fa-solid fa-building" style={{color: "#000000"}}></i> Company: <span style={{color: "black", fontWeight: "bold"}}>{jobAd.recruiterName}</span></span> <br/>
     126                                        <span><i className="fa-solid fa-building"
     127                                                 style={{color: "#000000"}}></i> Company: <span style={{
     128                                            color: "black",
     129                                            fontWeight: "bold"
     130                                        }}>{jobAd.recruiterName}</span></span> <br/>
    111131                                    </div>
    112132
    113133                                    <div className="aligned">
    114                                         <Link to={`/my-job-advertisements/view/${jobAd.id}`} className="card-button solo">View applications</Link>
     134                                        <Link to={`/my-job-advertisements/${jobAd.id}/applications`}
     135                                              className="card-button solo">View applications</Link>
    115136                                    </div>
    116137
Note: See TracChangeset for help on using the changeset viewer.