Ignore:
Timestamp:
08/30/24 15:44:27 (4 weeks ago)
Author:
223021 <daniel.ilievski.2@…>
Branches:
main
Parents:
0f0add0
Message:

Implemented Google login, additional file uploads, response messages and email notifications

File:
1 edited

Legend:

Unmodified
Added
Removed

  • jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js

    r0f0add0 r4d97b63  
    2222
    2323
    24 
    2524    useEffect(() => {
    26         if(!dispatched && (applicationsByJobSeekerState.length === 0 || applicationsByJobSeekerState.length === 1) ) {
     25        if (!dispatched && (applicationsByJobSeekerState.length === 0 || applicationsByJobSeekerState.length === 1)) {
    2726            dispatch(ApplicationActions.fetchApplicationsByJobSeeker(auth.id, (success, response) => {
    28                 if(success && response.data.length > 0) {
     27                if (success && response.data.length > 0) {
    2928                    setApplicationsByJobSeeker(sortElementsBy(response.data, "submittedOn"));
    3029                }
    … …  
    4140    useEffect(() => {
    4241
    43         if(dispatched && !logoDispatched) {
     42        if (dispatched && !logoDispatched) {
    4443            applicationsByJobSeeker.forEach(jobAd => {
    45                 if(jobAd.recruiterId && !logos[jobAd.recruiterId]) {
     44                if (jobAd.recruiterId && !logos[jobAd.recruiterId]) {
    4645                    fetchLogo(jobAd.recruiterId);
    4746                }
    … …  
    4948            setLogoDispatched(true)
    5049            console.log("Fetch all logos GET")
    51         } else if (logoDispatched){
     50        } else if (logoDispatched) {
    5251            setLogos(logosState)
    5352            console.log("Fetch all logos STATE")
    … …  
    5857
    5958
    60 
    6159    const fetchLogo = (recruiterId) => {
    6260        dispatch(RecruiterActions.downloadLogo(recruiterId, (success, response) => {
    63             if(success) {
     61            if (success) {
    6462                setLogos(prevLogos => ({...prevLogos, [recruiterId]: response}))
    6563            }
    … …  
    6765    };
    6866
    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>}
     67    const options = [{
     68        value: 'PROPOSED', label: <span className="status" style={{backgroundColor: '#4A90E2'}}><i
     69            className="fa-solid fa-paper-plane"></i> Proposed</span>
     70    }, {
     71        value: 'UNDER_REVIEW', label: <span className="status" style={{backgroundColor: '#F5A623'}}><i
     72            className="fa-solid fa-file-pen"></i> Under Review</span>
     73    }, {
     74        value: 'ACCEPTED', label: <span className="status" style={{backgroundColor: '#7ED321'}}><i
     75            className="fa-solid fa-user-check"></i> Accepted</span>
     76    }, {
     77        value: 'DENIED', label: <span className="status" style={{backgroundColor: '#D0021B'}}><i
     78            className="fa-solid fa-user-slash"></i> Denied</span>
     79    }];
     80
     81    const [selectedFilter, setSelectedFilter] = useState('All');
     82
     83    const filters = [
     84        { value: 'ALL', label: 'All', icon: 'fa-folder-open' },
     85        { value: 'PROPOSED', label: 'Proposed', icon: 'fa-paper-plane' },
     86        { value: 'UNDER_REVIEW', label: 'Under Review', icon: 'fa-file-pen' },
     87        { value: 'ACCEPTED', label: 'Accepted', icon: 'fa-user-check' },
     88        { value: 'DENIED', label: 'Denied', icon: 'fa-user-slash' },
    7489    ];
     90
     91    const filterApplicationsByJobSeeker= (filter) => {
     92        dispatch(ApplicationActions.filterApplicationsByJobSeeker(auth.id, filter, (success, response) => {
     93            if(success) {
     94                //notify
     95            }
     96        }))
     97    }
    7598
    7699    let handleDefaultValue = (status) => {
    … …  
    79102
    80103
    81 
    82     return (
    83         <div className="custom-container">
     104    return (<div className="custom-container">
    84105
    85106            <div className="application-title">
    86107                <h3>Application history</h3>
    87108            </div>
     109
     110        <div className="application-filters d-inline-flex flex-row justify-content-start">
     111            {
     112                filters.map(filter => (
     113                    <span
     114                        key={filter.label}
     115                        className={selectedFilter === filter.label ? "selected" : ""}
     116                        onClick={() => {
     117                            setSelectedFilter(filter.label)
     118                            filterApplicationsByJobSeeker(filter.value)
     119                        }}
     120                    ><i className={`fa-solid ${filter.icon}`}></i> {filter.label}</span>
     121                ))
     122            }
     123        </div>
     124
    88125            {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>
     126                <div className="application-card-wrapper">
     127                    <div key={index} className="application-card">
     128                        <div className="app-company-logo">
     129                            <img
     130                                // loading gif
     131                                src={logosState[application.recruiterId]}
     132                                alt=""
     133                                width={75} height={75}
     134                            />
     135                        </div>
    98136
    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>
     137                        <div className="app-info">
     138                            <Link to={`/job-advertisements/${application.jobAdId}`}
     139                                  className="jobAd-title">{application.jobAdTitle}</Link>
     140                            {/*<h5 className="jobAd-title"></h5>*/}
     141                            <div className="contact-info">
     142                                <div className="contact-item">
     143                                    <i className="fa-solid fa-building"></i> <span>{application.recruiterName}</span>
     144                                </div>
     145                                <div className="contact-item">
     146                                    <i className="fa-solid fa-envelope"></i> <span>{application.recruiterEmail}</span>
     147                                </div>
     148                                <div className="contact-item">
     149                                    <i className="fa-solid fa-phone"></i>
     150                                    <span>{application.recruiterPhoneNumber}</span>
     151                                </div>
     152                                <span> • Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
     153                                    day: 'numeric', month: 'long', year: 'numeric'
     154                                })}</b></span>
    105155                            </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>
     156                        </div>
     157
     158                        <div className="app-status">
     159                            <ApplicationDetailsModal application={application}/>
     160                            <> {handleDefaultValue(application.status).label}</>
     161                            {/*<div className="select">*/}
     162                            {/*    <Select isDisabled={true} options={options} />*/}
     163                            {/*</div>*/}
     164
    117165                        </div>
    118166                    </div>
     167                    {application.response &&
     168                        <div className="response-message">
     169                            {application.response}
     170                        </div>
     171                    }
    119172
    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>*/}
     173                </div>
    126174
    127                     </div>
    128                 </div>
    129175            ))}
    130176
    131         </div>
    132     )
     177        </div>)
    133178}
Note: See TracChangeset for help on using the changeset viewer.