amend latest jobs

sourceflow-uk · Oct 17, 2023 · 6ea012f · 6ea012f
1 parent 8d17353
commit 6ea012f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 36 deletions.
diff --git a/src/components/LatestJobs/index.jsx b/src/components/LatestJobs/index.jsx
@@ -7,35 +7,28 @@ import ChevronRight from "@/assets/ChevronRight.svg";
 import ChevronLeft from "@/assets/ChevronLeft.svg";
 import { JobCard, Title } from "@/ui";
 import { getRoute } from "@/getters/getRoute";
+import { jobs_helper } from "@/helpers/jobs_helper";
+
+export default function LatestJobs({ className, title, button, visibleCount }) {
+  const items = jobs_helper.fetch();
 
-export default function LatestJobs({ className, title, items, button, visibleCount }) {
   return (
     <div className={clsx(className, classes.jobs)}>
       <Container className="mw-xxl">
         <Title title={title} />
         <Carousel
           className="mb-4"
-          controls={true}
+          controls={items.length > visibleCount}
           indicators={false}
           prevIcon={<ChevronLeft width="14" height="25" />}
           nextIcon={<ChevronRight width="14" height="25" />}
         >
           {chunk(items, visibleCount).map((items, k) => (
             <Carousel.Item key={k}>
               <Row>
-                {items.map(({ title, sectors, location, logo, salary_package, role_type, published_at, href }, k) => (
+                {items.map((job, k) => (
                   <Col key={k} xs={12} md={12 / visibleCount}>
-                    <JobCard
-                      className="bg-light h-100"
-                      title={title}
-                      sectors={sectors}
-                      location={location}
-                      logo={logo}
-                      salary_package={salary_package}
-                      role_type={role_type}
-                      published_at={published_at}
-                      href={href}
-                    />
+                    <JobCard className="bg-light h-100" {...job} />
                   </Col>
                 ))}
               </Row>
@@ -59,7 +52,6 @@ LatestJobs.defaultProps = {
   className: "py-5",
   title: null,
   visibleCount: 3,
-  items: [],
   button: {
     label: "View more jobs",
     href: getRoute("jobs"),
@@ -75,15 +67,6 @@ LatestJobs.propTypes = {
     }),
     PropTypes.string,
   ]),
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      location: PropTypes.string,
-      salary_package: PropTypes.string,
-      role_type: PropTypes.string,
-      href: PropTypes.string,
-    })
-  ),
   button: PropTypes.shape({
     label: PropTypes.string,
     href: PropTypes.string,

diff --git a/src/helpers/jobs_helper.js b/src/helpers/jobs_helper.js
@@ -0,0 +1,16 @@
+import data from "../../.sourceflow/jobs.json";
+import CollectionHelper from "@/helpers/CollectionHelper";
+
+class JobsCollectionHelper extends CollectionHelper {
+  getCategoryValues(search, { categories }) {
+    const category = categories.find((i) => i.id === search || i.name === search);
+
+    if (!category) {
+      return null;
+    }
+
+    return category.values;
+  }
+}
+
+export const jobs_helper = new JobsCollectionHelper(data.jobs);
diff --git a/src/ui/JobCard/index.jsx b/src/ui/JobCard/index.jsx
@@ -5,8 +5,12 @@ import { trimText } from "@/functions/trimText";
 import Location from "@/assets/Location.svg";
 import Contract from "@/assets/Contract.svg";
 import { CTA } from "@/ui";
+import { getRoute } from "@/getters/getRoute";
+import { jobs_helper } from "@/helpers/jobs_helper";
+
+export default function JobCard({ className, title, location, salary_package, categories, url_slug }) {
+  const role_types = jobs_helper.getCategoryValues("275d8990-bd9e-4f79-a0e2-d81bb734c855", { categories });
 
-export default function JobCard({ className, title, location, salary_package, role_type, href }) {
   return (
     <div className={clsx(className, classes.card, "p-4")}>
       <div className={classes.card__body}>
@@ -29,26 +33,18 @@ export default function JobCard({ className, title, location, salary_package, ro
             <span className="visually-hidden">Role Type</span>
             <Contract width="25" height="25" />
           </dt>
-          <dd>{role_type}</dd>
+          <dd>{role_types.map((i) => i.name).join(", ")}</dd>
         </dl>
-        <CTA className="mt-5" variant="secondary" href={href} label="View this job" />
+        <CTA className="mt-5" variant="secondary" href={getRoute("job", { url_slug })} label="View this job" />
       </div>
     </div>
   );
 }
 
 JobCard.defaultProps = {
   className: "bg-light",
-  title: "",
-  salary_package: "",
-  role_type: "",
-  href: "",
 };
 
 JobCard.propTypes = {
-  title: PropTypes.string,
-  location: PropTypes.string,
-  salary_package: PropTypes.string,
-  role_type: PropTypes.string,
-  href: PropTypes.string,
+  className: PropTypes.string,
 };