JobList.jsx 2.26 KB
Newer Older
Nitin Jadhav's avatar
Nitin Jadhav committed
1 2 3 4 5 6
import { Link } from "react-router-dom";
import { VFLoaderBox } from "component-templates/VFLoader/VFLoader";
import { formatISODate, parseISODateFromTimeHtml } from "helpers/date-helpers";
import { stripHtml } from "helpers/helpers";
import "./JobList.scss";

Nitin Jadhav's avatar
Nitin Jadhav committed
7
export function JobList({ jobs, loading, resetFilters, isIframe = false }) {
Nitin Jadhav's avatar
Nitin Jadhav committed
8 9 10 11 12 13 14
  if (loading) {
    return <VFLoaderBox />;
  }

  return (
    <div className="vf-content">
      {jobs.map((job) => (
Ken Hawkins's avatar
Ken Hawkins committed
15
        <JobList.JobListItem key={job.id} job={job} isIframe={isIframe} />
Nitin Jadhav's avatar
Nitin Jadhav committed
16
      ))}
Nitin Jadhav's avatar
Nitin Jadhav committed
17 18 19 20 21 22 23 24 25
      {!jobs.length && (
        <p>
          No matching jobs found;{" "}
          <a href="#" onClick={resetFilters}>
            Reset your filters
          </a>
          .
        </p>
      )}
Nitin Jadhav's avatar
Nitin Jadhav committed
26 27 28
      <hr className="vf-divider" />

      <p>
29
        <Link to="/alerts">Create a customised email alert for jobs</Link>
Nitin Jadhav's avatar
Nitin Jadhav committed
30 31 32 33 34
      </p>
    </div>
  );
}

Ken Hawkins's avatar
Ken Hawkins committed
35
JobList.JobListItem = function JobListItem({ job, isIframe = false }) {
Nitin Jadhav's avatar
Nitin Jadhav committed
36 37 38 39 40 41 42 43
  const strippedText = stripHtml(job.field_jobs_description);
  return (
    <article
      key={job.id}
      className="vf-summary vf-summary--job | jplist-text-area"
    >
      <h3 className="job-title vf-summary__title">
        <Link
Nitin Jadhav's avatar
Nitin Jadhav committed
44 45 46 47
          to={{
            pathname: `/position/${job.field_jobs_reference_number}`,
            state: { job },
          }}
Nitin Jadhav's avatar
Nitin Jadhav committed
48
          target={isIframe ? "_parent" : "_self"}
Nitin Jadhav's avatar
Nitin Jadhav committed
49 50 51 52 53 54 55 56 57 58 59 60 61
          className="vf-summary__link"
        >
          {job.title}
        </Link>
      </h3>

      <p className="vf-summary__meta">
        {job.field_jobs_staff_category}{" "}
        {job.field_jobs_group === "EMBO" ? (
          <>
            at <span className="jplist-duty-station">EMBO</span> in Heidelberg
          </>
        ) : (
Ken Hawkins's avatar
Ken Hawkins committed
62
          <>at {job.field_jobs_duty_station.replace(/<[^>]+>/g, "")}</>
Nitin Jadhav's avatar
Nitin Jadhav committed
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
        )}
      </p>

      <p className="vf-summary__text job-summary multiline-ellipsis">
        {strippedText}
      </p>
      <span className="vf-u-display-none | used-for-search-index">
        {strippedText}
      </span>

      <span className="jplist-job-type | vf-u-display-none">
        {job.field_jobs_type_key}
      </span>
      <p className="vf-summary__date">
        Closes{" "}
        {formatISODate(parseISODateFromTimeHtml(job.field_jobs_expiration))}
      </p>
    </article>
  );
};