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/dashboard/Dashboard.js

    r19398ad r28b3398  
    2020
    2121    const [role, setRole] = useState("");
    22     const [sortOrder, setSortOrder] = useState("newest");
    23     const [selectedDateRange, setSelectedDateRange] = useState("all");
     22    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
     23    const [selectedIndustry, setSelectedIndustry] = useState("all");
    2424    const [searchTerm, setSearchTerm] = useState("");
    2525    const [dispatched, setDispatched] = useState(false)
    … …  
    3232
    3333    useEffect(() => {
    34         if(!dispatched && jobAdvertisementsState.length == 0) {
     34        if (!dispatched && jobAdvertisementsState.length == 0) {
    3535            dispatch(JobAdvertisementActions.fetchJobAdvertisements((success, response) => {
    3636                if (success && response.data.length > 0) {
    … …  
    3939                setDispatched(true)
    4040                console.log("Fetch all job advertisements GET")
    41                 console.log(response.data)
    4241            }))
    4342
    … …  
    4645            console.log("Fetch all job advertisements STATE")
    4746        }
    48     }, [])
     47    }, [jobAdvertisementsState])
    4948
     49    let filterJobAdvertisements = () => {
     50        JobAdvertisementActions.filterJobAdvertisements(
     51            {
     52                searchTerm: searchTerm,
     53                industry: selectedIndustry,
     54                sortOrder: selectedSortOrder
     55            }, (success, response) => {
     56                if (success) {
     57                    setJobAdvertisements(response.data);
     58                }
     59            }
     60        )
     61    }
    5062
    5163    return (
    … …  
    5365            <div className="head-dashboard-box">
    5466                <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>
     67                    <div className="col-md-12 filter-container">
     68                        <div className="search-container">
     69                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
    5870                            <input
    5971                                className="search-input"
    6072                                type="text"
    6173                                placeholder="Search job advertisement by title..."
    62                                 //value={searchTerm}
    63                                 //onChange={event => setSearchTerm(event.target.value)}
     74                                value={searchTerm}
     75                                onChange={event => setSearchTerm(event.target.value)}
    6476                            />
    6577                        </div>
    66                     </div>
    67                     <div className="col-md-9">
    6878                        <div className="sort-section item">
    6979                            <Select
    7080                                defaultValue={{value: "all", label: "All industries"}}
    71                                 //value={sortOrder.value}
    72                                 //onChange ={option => setSortOrder(option.value)}
     81                                value={selectedIndustry.value}
     82                                onChange={option => setSelectedIndustry(option.value)}
    7383                                options={industryOptionsFilter}
    7484                                className="sort-range sort"
    … …  
    7888                            <Select
    7989                                defaultValue={{value: "newest", label: "Date (Newest First)"}}
    80                                 //value={sortOrder.value}
    81                                 //onChange ={option => setSortOrder(option.value)}
    82                                 options = {sortOptions}
     90                                value={selectedSortOrder.value}
     91                                onChange={option => setSelectedSortOrder(option.value)}
     92                                options={sortOptions}
    8393                                className="sort-range sort"
    8494                            />
    8595                        </div>
    86                         <div className="date-range-section item">
    87                             <Select
    88                                 defaultValue={{value: "all", label: "Lifetime"}}
    89                                 //value={selectedDateRange.value}
    90                                 //onChange={option => setSelectedDateRange(option.value)}
    91                                 options={dataRangeOptions}
    92                                 className="date-range sort"
    93                             />
    94                         </div>
     96                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
    9597                    </div>
     98                    {/*<div className="col-md-3">*/}
     99
     100                    {/*<div className="date-range-section item">*/}
     101                    {/*    <Select*/}
     102                    {/*        defaultValue={{value: "all", label: "Lifetime"}}*/}
     103                    {/*        //value={selectedDateRange.value}*/}
     104                    {/*        //onChange={option => setSelectedDateRange(option.value)}*/}
     105                    {/*        options={dataRangeOptions}*/}
     106                    {/*        className="date-range sort"*/}
     107                    {/*    />*/}
     108                    {/*</div>*/}
     109                    {/*</div>*/}
    96110                </div>
    97111            </div>
    … …  
    104118                                <div className="card-head">
    105119                                    <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
    106                                     <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
     120                                    <span
     121                                        className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
    107122                                    {!jobAd.active && <span className="expired">Expired</span>}
    108123                                </div>
    109124                                <div className="card-body">
    110125                                    <h5 className="card-title">{jobAd.title}</h5>
    111                                     <span>{jobAd.industry} • <span style={{color: "black", fontWeight: "bold"}}>{formatRelativeTime(jobAd.postedOn)}</span></span>
     126                                    <span>{jobAd.industry} • <span style={{
     127                                        color: "black",
     128                                        fontWeight: "bold"
     129                                    }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
    112130                                    <div className="card-info">
    113                                         <span><i className="fa-solid fa-building" style={{color: "#000000"}}></i> Company: <span style={{color: "black", fontWeight: "bold"}}>{jobAd.recruiterName}</span></span> <br/>
     131                                        <span><i className="fa-solid fa-building"
     132                                                 style={{color: "#000000"}}></i> Company: <span style={{
     133                                            color: "black",
     134                                            fontWeight: "bold"
     135                                        }}>{jobAd.recruiterName}</span></span> <br/>
    114136                                    </div>
    115137
    116138                                    <div className="aligned">
    117                                         <Link to={`/job-advertisements/view/${jobAd.id}`} className="card-button">Read more</Link>
    118                                         {role===Roles.JOBSEEKER &&
    119                                             <>
    120                                                 {jobAd.active && <button className="card-button">Apply now</button> }
    121                                                 {!jobAd.active && <button className="card-button disabled">Apply now</button> }
    122                                             </>
    123                                         }
     139                                        <Link to={`/job-advertisements/${jobAd.id}`} className="card-button">Read
     140                                            more</Link>
    124141                                    </div>
    125142
Note: See TracChangeset for help on using the changeset viewer.