[28b3398] | 1 | import {useDispatch} from "react-redux";
|
---|
| 2 | import {useEffect, useState} from "react";
|
---|
| 3 | import {useParams} from "react-router";
|
---|
| 4 | import {ApplicationActions} from "../../redux/actions/applicationActions";
|
---|
| 5 | import {ViewApplicationDetails} from "./ViewApplicationDetails";
|
---|
| 6 | import "./Applications.css"
|
---|
| 7 | import Select from "react-select";
|
---|
| 8 |
|
---|
| 9 | export const ApplicationsByJobAd = () => {
|
---|
| 10 |
|
---|
| 11 | const dispatch = useDispatch();
|
---|
| 12 | let {advertisement_id} = useParams();
|
---|
| 13 | const [applicationsByJobAd, setApplicationsByJobAd] = useState([]);
|
---|
| 14 | const [jobAdTitle, setJobAdTitle] = useState("");
|
---|
| 15 |
|
---|
| 16 | useEffect(() => {
|
---|
| 17 | dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
|
---|
| 18 | if (success && reponse.data.length > 0) {
|
---|
| 19 | setApplicationsByJobAd(reponse.data)
|
---|
| 20 | setJobAdTitle(reponse.data[0].jobAdTitle)
|
---|
| 21 | }
|
---|
| 22 | }))
|
---|
| 23 | }, [])
|
---|
| 24 |
|
---|
| 25 | const options = [
|
---|
| 26 | {value: 'PROPOSED', label: <span><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
|
---|
| 27 | {value: 'UNDER_REVIEW', label: <span><i className="fa-solid fa-file-pen"></i> Under Review</span>},
|
---|
| 28 | {value: 'ACCEPTED', label: <span><i className="fa-solid fa-user-check"></i> Accepted</span>},
|
---|
| 29 | {value: 'DENIED', label: <span><i className="fa-solid fa-user-slash"></i> Denied</span>}
|
---|
| 30 | ];
|
---|
| 31 |
|
---|
| 32 | let handleDefaultStatus = (status) => {
|
---|
| 33 | return options.find(option => option.value === status);
|
---|
| 34 | }
|
---|
| 35 |
|
---|
| 36 | let handleChangeStatus = (selectedOption, id) => {
|
---|
| 37 | dispatch(ApplicationActions.updateApplicationStatus(id, selectedOption.value, (success, response) => {
|
---|
| 38 | if(success) {
|
---|
| 39 | console.log("Status updated.")
|
---|
| 40 | }
|
---|
| 41 | }))
|
---|
| 42 | }
|
---|
| 43 |
|
---|
| 44 |
|
---|
| 45 | return (<div className="applications-container">
|
---|
| 46 | <div className="application-title">
|
---|
| 47 | {jobAdTitle ?
|
---|
| 48 | <h1>Applications for <span>{jobAdTitle}</span></h1> :
|
---|
| 49 | <h1></h1>
|
---|
| 50 | }
|
---|
| 51 |
|
---|
| 52 | </div>
|
---|
| 53 |
|
---|
| 54 | {applicationsByJobAd && applicationsByJobAd.map((application, index) => (
|
---|
| 55 | <div className="application-card">
|
---|
| 56 | <div className="left-box">
|
---|
| 57 | <span>Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
|
---|
| 58 | day: 'numeric',
|
---|
| 59 | month: 'long',
|
---|
| 60 | year: 'numeric'
|
---|
| 61 | })}</b></span>
|
---|
| 62 | <br/><br/>
|
---|
| 63 | <div className="contact-info">
|
---|
| 64 | <div className="contact-item">
|
---|
| 65 | <i className="fa-solid fa-user"></i> <span>{application.jobSeekerName}</span>
|
---|
| 66 | </div>
|
---|
| 67 | <div className="contact-item">
|
---|
| 68 | <i className="fa-solid fa-envelope"></i> <span>{application.jobSeekerEmail}</span>
|
---|
| 69 | </div>
|
---|
| 70 | <div className="contact-item">
|
---|
| 71 | <i className="fa-solid fa-phone"></i> <span>{application.jobSeekerPhoneNumber}</span>
|
---|
| 72 | </div>
|
---|
| 73 | </div>
|
---|
| 74 | </div>
|
---|
| 75 |
|
---|
| 76 | <div className="right-box">
|
---|
| 77 | <ViewApplicationDetails application={application}/>
|
---|
| 78 | <div className="select">
|
---|
| 79 | <Select options={options} onChange={(selectedOption) => handleChangeStatus(selectedOption, application.id)} defaultValue={handleDefaultStatus(application.status)}/>
|
---|
| 80 | </div>
|
---|
| 81 |
|
---|
| 82 | </div>
|
---|
| 83 | </div>
|
---|
| 84 | ))}
|
---|
| 85 |
|
---|
| 86 | </div>)
|
---|
| 87 | } |
---|