Changeset befb988 for jobvista-frontend/src/views/job_advertisements/JobAdDetails.js

Timestamp:

06/17/24 21:59:14 (2 weeks ago)

Author:

223021 <daniel.ilievski.2@…>

Branches:

main

Children:

08f82ec

Parents:

b248810

Message:

Added an edit profile page for both job seekers and recruiters, where they can upload profile pictures/company logos and edit their profile data. Added profile page specifically for recruiters. Refactored existing code.

File:

• jobvista-frontend/src/views/job_advertisements/JobAdDetails.js (modified) (4 diffs)

jobvista-frontend/src/views/job_advertisements/JobAdDetails.js

@@ -10 +10 @@
 import {AddJobAdModal} from "./AddJobAdModal";
 import {ApplyToJobAdModal} from "../applications/ApplyToJobAdModal";
+import {Link} from "react-router-dom";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
 
 
@@ -20 +22 @@
     const auth = useSelector(state => state.auth.currentUser);
 
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false)
+    const [logoView, setLogoView] = useState(null);
+
     useEffect(() => {
         setRole(auth.role)
     }, [auth])
+
+    useEffect(() => {
+        if (jobAd) {
+            if (!logoDispatched && !logosState[jobAd.recruiterId]) {
+                dispatch(RecruiterActions.downloadLogo(jobAd.recruiterId, (success, response) => {
+                    if (success) {
+                        setLogoView(response)
+                        setLogoDispatched(true)
+                    }
+                }))
+            } else {
+                setLogoView(logosState[jobAd.recruiterId])
+            }
+
+        }
+
+    }, [jobAd])
 
 
@@ -41 +64 @@
             <div className="col-md-9">
                 <div className="details-wrap">
+                    <div className="row">
+                        <div className="col-md-9">
+                            <div className="title">
+                                <h2>{jobAd.title} </h2>
+                                <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
+                                {!jobAd.active && <span className="expired">Expired</span>}
+                            </div>
 
-                    <div className="title">
-                        <h2>{jobAd.title} </h2>
-                        <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
-                        {!jobAd.active && <span className="expired">Expired</span>}
+                            <p className="details-head-info">
+                                <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
+                            </p>
+
+                            <p><i className="fa-solid fa-money-check-dollar"></i> <span>Hourly rate: ${jobAd.startingSalary}</span></p>
+                            <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus==="FULL_TIME" ? "Full-time" : "Part-time"}</p>
+                            <p><i className="fa-solid fa-calendar-days"></i> Active until: {new Date(jobAd.activeUntil).toLocaleString('default', { day: 'numeric', month: 'long',  year: 'numeric' })}</p>
+
+                        </div>
+                        <div className="col-md-3">
+                            {jobAd.recruiterId &&
+                                <>
+                                    <img
+                                        // loading gif
+                                        src={logosState[jobAd.recruiterId]}
+                                        alt=""
+                                        width={200} height={200}
+                                    />
+                                </>
+                            }
+
+                        </div>
                     </div>
 
-                    <p className="details-head-info">
-                        <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
-                    </p>
-
-                    <p><i className="fa-solid fa-money-check-dollar"></i> <span>Hourly rate: ${jobAd.startingSalary}</span></p>
-                    <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus==="FULL_TIME" ? "Full-time" : "Part-time"}</p>
-                    <p><i className="fa-solid fa-calendar-days"></i> Active until: {new Date(jobAd.activeUntil).toLocaleString('default', { day: 'numeric', month: 'long',  year: 'numeric' })}</p>
 
                     <h4>About the job</h4>
@@ -66 +107 @@
             <div className="col-md-3">
                 <div className="details-wrap">
-                    <h3>{jobAd.recruiterName}</h3>
+                    <Link className="recruiter-link" to={`/recruiters/${jobAd.recruiterId}`}>{jobAd.recruiterName} </Link>
 
-                    {/*TO DO - AFTER IMPLEMENTING FORM FOR UPDATING PERSONAL INFO*/}
                     <h4>About the company</h4>
                     <p>
-                        For over two decades, we have been harnessing technology to drive meaningful change.  Working side by side with leading brands, we build strategies, products and solutions tailored to unique needs –regardless of industry, region or scale. By combining world-class engineering, industry expertise and a people-centric mindset, we consult and partner with our customers to create technological solutions that drive innovation and transform businesses.
-                        <br/><br/>
-                        From ideation to production, we support our customers with bespoke solutions across various industries, including payments, insurance, finance and banking, technology, media and entertainment, telecommunications, retail and consumer goods, supply chain and logistics, healthcare and life sciences, energy and resources, government, automotive and travel.
+                        {recruiterDetails.companyDescription
+                            ? recruiterDetails.companyDescription.length > 710
+                                ? `${recruiterDetails.companyDescription.substring(0, 710)}...`
+                                : recruiterDetails.companyDescription
+                            : "There is no info about this company yet."
+                        }
+                    </p>
 
+                    <p>
+                        <i className="fa-solid fa-envelope"></i> <span className="span-about"> {recruiterDetails.contactEmail}</span> <br/>
+                        <i className="fa-solid fa-phone"></i> <span className="span-about"> {recruiterDetails.contactPhoneNumber}</span> <br/>
+                        {recruiterDetails.receptionist && <><i className="fa-solid fa-user-tie"></i> <span className="span-about"> {recruiterDetails.receptionist}</span> </>}
                     </p>
-                    <p><span><i className="fa-solid fa-envelope"></i> {recruiterDetails.email}</span> • <span>
-                <i className="fa-solid fa-phone"></i> {recruiterDetails.phoneNumber}</span>
-                    </p>
+
+                    <div className="d-flex justify-content-center mt-4">
+                        <Link className="card-button" to={`/recruiters/${jobAd.recruiterId}`}>Read more </Link>
+                    </div>
                 </div>
             </div>