1 | import {useDispatch, useSelector} from "react-redux";
|
---|
2 | import {useEffect, useState} from "react";
|
---|
3 | import {ApplicationActions} from "../../redux/actions/applicationActions";
|
---|
4 | import {ApplicationDetailsModal} from "./ApplicationDetailsModal";
|
---|
5 | import Select from "react-select";
|
---|
6 |
|
---|
7 | import {RecruiterActions} from "../../redux/actions/recruiterActions";
|
---|
8 | import {sortElementsBy} from "../../utils/utils";
|
---|
9 | import {Link} from "react-router-dom";
|
---|
10 |
|
---|
11 | export const ApplicationsByJobSeeker = () => {
|
---|
12 | const dispatch = useDispatch();
|
---|
13 | const auth = useSelector(state => state.auth.currentUser);
|
---|
14 |
|
---|
15 | const [applicationsByJobSeeker, setApplicationsByJobSeeker] = useState([]);
|
---|
16 | let applicationsByJobSeekerState = useSelector(state => state.appl.applicationsByJobSeeker);
|
---|
17 | const [dispatched, setDispatched] = useState(false);
|
---|
18 |
|
---|
19 | const [logos, setLogos] = useState({});
|
---|
20 | let logosState = useSelector(state => state.images.logos)
|
---|
21 | const [logoDispatched, setLogoDispatched] = useState(false);
|
---|
22 |
|
---|
23 |
|
---|
24 |
|
---|
25 | useEffect(() => {
|
---|
26 | if(!dispatched && (applicationsByJobSeekerState.length === 0 || applicationsByJobSeekerState.length === 1) ) {
|
---|
27 | dispatch(ApplicationActions.fetchApplicationsByJobSeeker(auth.id, (success, response) => {
|
---|
28 | if(success && response.data.length > 0) {
|
---|
29 | setApplicationsByJobSeeker(sortElementsBy(response.data, "submittedOn"));
|
---|
30 | }
|
---|
31 | setDispatched(true)
|
---|
32 | console.log("Fetch applications by job seeker GET")
|
---|
33 | }))
|
---|
34 |
|
---|
35 | } else {
|
---|
36 | setApplicationsByJobSeeker(sortElementsBy(applicationsByJobSeekerState, "submittedOn"));
|
---|
37 | console.log("Fetch applications by job seeker STATE")
|
---|
38 | }
|
---|
39 | }, [applicationsByJobSeekerState])
|
---|
40 |
|
---|
41 | useEffect(() => {
|
---|
42 |
|
---|
43 | if(dispatched && !logoDispatched) {
|
---|
44 | applicationsByJobSeeker.forEach(jobAd => {
|
---|
45 | if(jobAd.recruiterId && !logos[jobAd.recruiterId]) {
|
---|
46 | fetchLogo(jobAd.recruiterId);
|
---|
47 | }
|
---|
48 | })
|
---|
49 | setLogoDispatched(true)
|
---|
50 | console.log("Fetch all logos GET")
|
---|
51 | } else if (logoDispatched){
|
---|
52 | setLogos(logosState)
|
---|
53 | console.log("Fetch all logos STATE")
|
---|
54 |
|
---|
55 | }
|
---|
56 |
|
---|
57 | }, [dispatched, logosState])
|
---|
58 |
|
---|
59 |
|
---|
60 |
|
---|
61 | const fetchLogo = (recruiterId) => {
|
---|
62 | dispatch(RecruiterActions.downloadLogo(recruiterId, (success, response) => {
|
---|
63 | if(success) {
|
---|
64 | setLogos(prevLogos => ({...prevLogos, [recruiterId]: response}))
|
---|
65 | }
|
---|
66 | }));
|
---|
67 | };
|
---|
68 |
|
---|
69 | const options = [
|
---|
70 | {value: 'PROPOSED', label: <span className="status" style={{backgroundColor: '#4A90E2'}}><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
|
---|
71 | {value: 'UNDER_REVIEW', label: <span className="status" style={{backgroundColor: '#F5A623'}}><i className="fa-solid fa-file-pen"></i> Under Review</span>},
|
---|
72 | {value: 'ACCEPTED', label: <span className="status" style={{backgroundColor: '#7ED321'}}><i className="fa-solid fa-user-check"></i> Accepted</span>},
|
---|
73 | {value: 'DENIED', label: <span className="status" style={{backgroundColor: '#D0021B'}}><i className="fa-solid fa-user-slash"></i> Denied</span>}
|
---|
74 | ];
|
---|
75 |
|
---|
76 | let handleDefaultValue = (status) => {
|
---|
77 | return options.find(option => option.value === status);
|
---|
78 | }
|
---|
79 |
|
---|
80 |
|
---|
81 |
|
---|
82 | return (
|
---|
83 | <div className="custom-container">
|
---|
84 |
|
---|
85 | <div className="application-title">
|
---|
86 | <h3>Application history</h3>
|
---|
87 | </div>
|
---|
88 | {applicationsByJobSeeker && applicationsByJobSeeker.map((application, index) => (
|
---|
89 | <div key={index} className="application-card">
|
---|
90 | <div className="app-company-logo">
|
---|
91 | <img
|
---|
92 | // loading gif
|
---|
93 | src={logosState[application.recruiterId]}
|
---|
94 | alt=""
|
---|
95 | width={75} height={75}
|
---|
96 | />
|
---|
97 | </div>
|
---|
98 |
|
---|
99 | <div className="app-info">
|
---|
100 | <Link to={`/job-advertisements/${application.jobAdId}`} className="jobAd-title">{application.jobAdTitle}</Link>
|
---|
101 | {/*<h5 className="jobAd-title"></h5>*/}
|
---|
102 | <div className="contact-info">
|
---|
103 | <div className="contact-item">
|
---|
104 | <i className="fa-solid fa-building"></i> <span>{application.recruiterName}</span>
|
---|
105 | </div>
|
---|
106 | <div className="contact-item">
|
---|
107 | <i className="fa-solid fa-envelope"></i> <span>{application.recruiterEmail}</span>
|
---|
108 | </div>
|
---|
109 | <div className="contact-item">
|
---|
110 | <i className="fa-solid fa-phone"></i> <span>{application.recruiterPhoneNumber}</span>
|
---|
111 | </div>
|
---|
112 | <span> • Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
|
---|
113 | day: 'numeric',
|
---|
114 | month: 'long',
|
---|
115 | year: 'numeric'
|
---|
116 | })}</b></span>
|
---|
117 | </div>
|
---|
118 | </div>
|
---|
119 |
|
---|
120 | <div className="app-status">
|
---|
121 | <ApplicationDetailsModal application={application}/>
|
---|
122 | <> {handleDefaultValue(application.status).label}</>
|
---|
123 | {/*<div className="select">*/}
|
---|
124 | {/* <Select isDisabled={true} options={options} />*/}
|
---|
125 | {/*</div>*/}
|
---|
126 |
|
---|
127 | </div>
|
---|
128 | </div>
|
---|
129 | ))}
|
---|
130 |
|
---|
131 | </div>
|
---|
132 | )
|
---|
133 | } |
---|