1 | import "./JobAdDetails.css"
|
---|
2 | import {useEffect, useState} from "react";
|
---|
3 | import {useDispatch, useSelector} from "react-redux";
|
---|
4 | import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
|
---|
5 | import {useParams} from "react-router";
|
---|
6 | import Roles from "../../enumerations/Roles";
|
---|
7 | import JobType from "../../enumerations/JobType";
|
---|
8 | import EmploymentStatus from "../../enumerations/EmploymentStatus";
|
---|
9 | import {formatRelativeTime} from "../../utils/utils";
|
---|
10 | import {AddJobAdModal} from "./AddJobAdModal";
|
---|
11 |
|
---|
12 |
|
---|
13 | export const JobAdDetails = () => {
|
---|
14 | const dispatch = useDispatch();
|
---|
15 | const [jobAd, setJobAd] = useState("")
|
---|
16 | const [recruiterDetails, setRecruiterDetails] = useState("");
|
---|
17 | const [role, setRole] = useState("")
|
---|
18 | const {id} = useParams();
|
---|
19 | const auth = useSelector(state => state.auth.currentUser);
|
---|
20 |
|
---|
21 | useEffect(() => {
|
---|
22 | setRole(auth.role)
|
---|
23 | }, [auth])
|
---|
24 |
|
---|
25 |
|
---|
26 | useEffect(() => {
|
---|
27 | JobAdvertisementActions.fetchJobAdvertisementById(id, (success, response) => {
|
---|
28 | if (success) {
|
---|
29 | setJobAd(response.data)
|
---|
30 | JobAdvertisementActions.fetchRecruiterDetailsById(response.data.recruiterId, (successAgain, responseAgain) => {
|
---|
31 | if(successAgain) {
|
---|
32 | setRecruiterDetails(responseAgain.data)
|
---|
33 | }
|
---|
34 | })
|
---|
35 | }
|
---|
36 | });
|
---|
37 | }, [])
|
---|
38 | return (<div className="container">
|
---|
39 | <div className="row">
|
---|
40 | <div className="col-md-9">
|
---|
41 | <div className="details-wrap">
|
---|
42 |
|
---|
43 | <div className="title">
|
---|
44 | <h2>{jobAd.title} </h2>
|
---|
45 | <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
|
---|
46 | {!jobAd.active && <span className="expired">Expired</span>}
|
---|
47 | </div>
|
---|
48 |
|
---|
49 | <p className="details-head-info">
|
---|
50 | <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
|
---|
51 | </p>
|
---|
52 |
|
---|
53 | <p><i className="fa-solid fa-money-check-dollar"></i> <span>Hourly rate: ${jobAd.startingSalary}</span></p>
|
---|
54 | <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus===EmploymentStatus.FULL_TIME ? "Full-time" : "Part-time"}</p>
|
---|
55 | <p><i className="fa-solid fa-calendar-days"></i> Active until: {new Date(jobAd.activeUntil).toLocaleString('default', { day: 'numeric', month: 'long', year: 'numeric' })}</p>
|
---|
56 |
|
---|
57 | <h4>About the job</h4>
|
---|
58 | {jobAd.description && (
|
---|
59 | <p dangerouslySetInnerHTML={{ __html: jobAd.description.replace(/\n/g, "<br>") }}></p>
|
---|
60 | )}
|
---|
61 |
|
---|
62 |
|
---|
63 | {role===Roles.JOBSEEKER &&
|
---|
64 | <>
|
---|
65 | {jobAd.active && <button className="card-button apply">Apply now</button> }
|
---|
66 | {!jobAd.active && <button className="card-button apply disabled">Apply now</button> }
|
---|
67 | </>
|
---|
68 | }
|
---|
69 |
|
---|
70 | </div>
|
---|
71 | </div>
|
---|
72 | <div className="col-md-3">
|
---|
73 | <div className="details-wrap">
|
---|
74 | <h3>{jobAd.recruiterName}</h3>
|
---|
75 |
|
---|
76 | {/*TO DO - AFTER IMPLEMENTING FORM FOR UPDATING PERSONAL INFO*/}
|
---|
77 | <h4>About the company</h4>
|
---|
78 | <p>As a pioneering Swiss software company, we provide innovative IT products and tailored digital solutions. We bring decades of experience in designing, developing, and implementing highly scalable, secure, and user-centric software.
|
---|
79 | <br/><br/>
|
---|
80 | Working across the banking, payment, mobility, health, and publishing industries, we are experts at delivering seamless and secure user journeys within these privacy-driven environments. Our business-critical applications are designed to overcome complexity and drive growth.
|
---|
81 | <br/><br/>
|
---|
82 | We are based in Zurich, Switzerland, and have offices elsewhere in Europe, Asia, and the Middle East. Founded in 1996, we are a business of 800 experts, enabling our clients to create value with trusted software..
|
---|
83 | </p>
|
---|
84 | <p><span><i className="fa-solid fa-envelope"></i> {recruiterDetails.email}</span> • <span>
|
---|
85 | <i className="fa-solid fa-phone"></i> {recruiterDetails.phoneNumber}</span>
|
---|
86 | </p>
|
---|
87 | </div>
|
---|
88 | </div>
|
---|
89 |
|
---|
90 | </div>
|
---|
91 |
|
---|
92 |
|
---|
93 |
|
---|
94 | </div>)
|
---|
95 | } |
---|