Merge branch 'ebi-iframe-filter' into 'master'

added job filter for EBI iframe

See merge request !39

.eslintrc.json

@@ -25,6 +25,7 @@
         "no-unused-vars": "warn",
         "react/react-in-jsx-scope": "off",
         "react/prop-types": "off",
-        "react/no-unescaped-entities":"off"
+        "react/no-unescaped-entities":"off",
+        "no-debugger":"warn"
     }
 }
\ No newline at end of file

src/app/App.scss

@@ -17,8 +17,8 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   height: 2rem;
   text-decoration: none;
 }

src/components/EmblBreadcrumbs.jsx

 import React from "react";
-import { emblBreadcrumbs } from "@visual-framework/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup"; 
+import { emblBreadcrumbs } from "@visual-framework/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup";
 
 export class EmblBreadcrumbs extends React.Component {
   componentDidMount() {
     // window.setTimeout(function() {
-      emblBreadcrumbs();
+    emblBreadcrumbs();
     // }, 700);
   }
   render() {
     return (
-      <nav className="vf-breadcrumbs embl-breadcrumbs-lookup" aria-label="Breadcrumb" data-embl-js-breadcrumbs-lookup>
+      <nav
+        className="vf-breadcrumbs embl-breadcrumbs-lookup"
+        aria-label="Breadcrumb"
+        data-embl-js-breadcrumbs-lookup
+      >
         <div className="vf-list vf-list--inline | vf-breadcrumbs__list | embl-breadcrumbs-lookup--ghosting"></div>
       </nav>
     );

src/components/EmblFooter.jsx

 import React from "react";
-import { emblContentHub } from "@visual-framework/embl-content-hub-loader/embl-content-hub-loader"; 
+import { emblContentHub } from "@visual-framework/embl-content-hub-loader/embl-content-hub-loader";
 
 export class EmblFooter extends React.Component {
   componentDidMount() {
     // window.setTimeout(function() {
-      emblContentHub();
+    emblContentHub();
     // }, 700);
   }
   render() {

src/components/home/EBIHome.js

@@ -6,11 +6,9 @@ export function EBIHome() {
     <>
       <Helmet>
         {/* Supports iframe resizing on ebi.ac.uk/careers/jobs */}
-        <script
-          src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"
-        ></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
       </Helmet>
-      <Home showLocations={false} />
-     </>
+      <Home showLocations={false} jobLocation="EMBL-EBI Hinxton" />
+    </>
   );
- }
+}

src/components/home/Home.js

@@ -4,11 +4,11 @@ import {
   JobListFilters,
 } from "components/job-list-filters/JobListFilters";
 import { JobList } from "components/job-list/JobList";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useFetchJobsList } from "services/useFetchJobsList";
 import "./Home.scss";
 
-export function Home({ showLocations = true }) {
+export function Home({ showLocations = true, jobLocation }) {
   const [filters, setFilters] = useState(getInitialFilters());
 
   const {
@@ -17,13 +17,13 @@ export function Home({ showLocations = true }) {
     positionJobsCount,
     loading,
     error,
-  } = useFetchJobsList(filters);
+  } = useFetchJobsList(filters, jobLocation);
 
   const handleSearch = (searchTerm) => {
-    setFilters({
+    setFilters((filters) => ({
       ...filters,
       searchTerm,
-    });
+    }));
   };
 
   return (

src/components/job-list-filters/JobListFilters.jsx

@@ -22,10 +22,10 @@ export function JobListFilters({
     // toggle this element in array
     let selectedLocations = toggleInArray(filters.selectedLocations, location);
 
-    onFiltersChange({
+    onFiltersChange((filters) => ({
       ...filters,
       selectedLocations,
-    });
+    }));
   };
 
   const handleJobTypeFilterChange = (targetJobTypeKey) => {
@@ -35,17 +35,17 @@ export function JobListFilters({
       targetJobTypeKey
     );
 
-    onFiltersChange({
+    onFiltersChange((filters) => ({
       ...filters,
       selectedJobTypes,
-    });
+    }));
   };
 
   const handleClosingDateSortDirectionChange = (selectedClosingDateSortDir) => {
-    onFiltersChange({
+    onFiltersChange((filters) => ({
       ...filters,
       selectedClosingDateSortDir,
-    });
+    }));
   };
 
   const handleResetFilters = (event) => {
@@ -79,7 +79,8 @@ export function JobListFilters({
                   htmlFor={`location-checkbox-${index}`}
                   className="vf-form__label"
                 >
-                  {locationTitle}{` `}({jobCount})
+                  {locationTitle}
+                  {` `}({jobCount})
                 </label>
               </div>
             )
@@ -105,7 +106,7 @@ export function JobListFilters({
                 htmlFor={`jobtype-checkbox-${index}`}
                 className="vf-form__label"
               >
-                {positionTitle}({jobCount})
+                {positionTitle} ({jobCount})
               </label>
             </div>
           )

src/services/useFetchJobsList.js

@@ -4,7 +4,8 @@ import { stripHtml } from "helpers/helpers";
 import { useFetch } from "helpers/useFetch";
 import { locations, positionTypes } from "data/jobs-data.json";
 
-export function useFetchJobsList(filters) {
+/* Custom hook for jobs fetching and filtering. If jobLocation is not provided, assume all job locations */
+export function useFetchJobsList(filters, jobLocation) {
   const { data, loading, error } = useFetch(
     "jobs?_format=json&source=contenthub",
     []
@@ -18,7 +19,12 @@ export function useFetchJobsList(filters) {
   useEffect(() => {
     /* Extend job object with metadata necessary for display and search */
     if (data && data.length) {
-      let extendedJobs = extendJobsObjects(data); //remove nulls due to potential error while extending
+      const dataAtLocation = jobLocation
+        ? data.filter((datum) =>
+            datum.field_jobs_duty_station.includes(jobLocation)
+          )
+        : data;
+      let extendedJobs = extendJobsObjects(dataAtLocation); //remove nulls due to potential error while extending
       setExtendedJobs(extendedJobs);
 
       //LOCATIONS WITH JOB COUNT: count jobs at each location

src/vf-components/vf-componenet-rollup/index.scss

-@import 'package.variables.scss';
+@import "package.variables.scss";
 /*
  *
  * styles.css
@@ -13,14 +13,14 @@
  * Build time: #{map-get($componentInfo, 'buildTimeStamp')}
  */
 
-@import 'node_modules/@visual-framework/vf-sass-config/index.scss';
-@import 'node_modules/@visual-framework/vf-sass-config/mixins/vf-utility-mixins.scss';
+@import "node_modules/@visual-framework/vf-sass-config/index.scss";
+@import "node_modules/@visual-framework/vf-sass-config/mixins/vf-utility-mixins.scss";
 // Note, you can also do relative imports
 // @import '../vf-sass-config/index.scss';
 
 /* All Visual Framework Font components */
-$vf-font-plex-mono-prefix: '../../../../assets';
-@import 'node_modules/@visual-framework/vf-font-plex-mono/vf-font-plex-mono.scss';
+$vf-font-plex-mono-prefix: "../../../../assets";
+@import "node_modules/@visual-framework/vf-font-plex-mono/vf-font-plex-mono.scss";
 
 // @import 'node_modules/@visual-framework/vf-font-plex-sans/vf-font-plex-sans.scss';
 // @import 'node_modules/@visual-framework/vf-font-plex-sans/vf-font-plex-sans.scss';
@@ -28,25 +28,25 @@ $vf-font-plex-mono-prefix: '../../../../assets';
 // Here we're not making use of vf-core's Sass include paths, and there's an issue around
 // Plex's nesting of assets, so we manually import each font weight.
 // This is also an annoyance present in IBM Plex's distro https://www.npmjs.com/package/@ibm/plex
-$vf-font-plex-sans-prefix: '../../../../assets';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/italic/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/regular/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/_index.scss';
-
-$vf-font-plex-sans-prefix: '../../../../../assets';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/italic/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/italic/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/italic/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/italic/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/italic/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/italic/_index.scss';
-@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/italic/_index.scss';
+$vf-font-plex-sans-prefix: "../../../../assets";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/italic/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/regular/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/_index.scss";
+
+$vf-font-plex-sans-prefix: "../../../../../assets";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/italic/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/italic/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/italic/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/italic/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/italic/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/italic/_index.scss";
+@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/italic/_index.scss";
 
 html,
 button {
@@ -58,70 +58,70 @@ button {
 /* Visual Framework content compatibility
  * We put this first so it will have the least specificity
  */
-@import 'node_modules/@visual-framework/vf-content/vf-content.scss';
+@import "node_modules/@visual-framework/vf-content/vf-content.scss";
 
 /* All Visual Framework grids */
 
 // vf-grid-page is deprecated, use vf-body instead
 // @import 'vf-grid-page/vf-grid-page.scss';
-@import 'node_modules/@visual-framework/vf-body/vf-body.scss';
-@import 'node_modules/@visual-framework/vf-grid/vf-grid.scss';
-@import 'node_modules/@visual-framework/vf-cluster/vf-cluster.scss';
-@import 'node_modules/@visual-framework/vf-stack/vf-stack.scss';
-@import 'node_modules/@visual-framework/vf-flag/vf-flag.scss';
-@import 'node_modules/@visual-framework/vf-sidebar/vf-sidebar.scss';
+@import "node_modules/@visual-framework/vf-body/vf-body.scss";
+@import "node_modules/@visual-framework/vf-grid/vf-grid.scss";
+@import "node_modules/@visual-framework/vf-cluster/vf-cluster.scss";
+@import "node_modules/@visual-framework/vf-stack/vf-stack.scss";
+@import "node_modules/@visual-framework/vf-flag/vf-flag.scss";
+@import "node_modules/@visual-framework/vf-sidebar/vf-sidebar.scss";
 
-@import 'node_modules/@visual-framework/embl-grid/embl-grid.scss';
+@import "node_modules/@visual-framework/embl-grid/embl-grid.scss";
 
 /* All Visual Framework Elements */
 
-@import 'node_modules/@visual-framework/vf-badge/vf-badge.scss';
-@import 'node_modules/@visual-framework/vf-collapse/vf-collapse.scss';
-@import 'node_modules/@visual-framework/vf-link/vf-link.scss';
+@import "node_modules/@visual-framework/vf-badge/vf-badge.scss";
+@import "node_modules/@visual-framework/vf-collapse/vf-collapse.scss";
+@import "node_modules/@visual-framework/vf-link/vf-link.scss";
 // @import 'node_modules/@visual-framework/vf-logo/vf-logo.scss';
 // @import 'node_modules/@visual-framework/vf-embed/vf-embed.scss';
 // @import 'node_modules/@visual-framework/embl-logo/embl-logo.scss';
 // @import 'node_modules/@visual-framework/vf-explainer/vf-explainer.scss';
 // @import 'node_modules/@visual-framework/vf-form/vf-form.scss';
-@import 'node_modules/@visual-framework/vf-button/vf-button.scss';
-@import 'node_modules/@visual-framework/vf-figure/vf-figure.scss';
-@import 'node_modules/@visual-framework/vf-list/vf-list.scss';
-@import 'node_modules/@visual-framework/vf-blockquote/vf-blockquote.scss';
-@import 'node_modules/@visual-framework/vf-divider/vf-divider.scss';
-@import 'node_modules/@visual-framework/embl-conditional-edit/embl-conditional-edit.scss';
+@import "node_modules/@visual-framework/vf-button/vf-button.scss";
+@import "node_modules/@visual-framework/vf-figure/vf-figure.scss";
+@import "node_modules/@visual-framework/vf-list/vf-list.scss";
+@import "node_modules/@visual-framework/vf-blockquote/vf-blockquote.scss";
+@import "node_modules/@visual-framework/vf-divider/vf-divider.scss";
+@import "node_modules/@visual-framework/embl-conditional-edit/embl-conditional-edit.scss";
 
 // /* All Visual Framework Blocks */
 
-@import 'node_modules/@visual-framework/vf-box/vf-box.scss';
+@import "node_modules/@visual-framework/vf-box/vf-box.scss";
 
-@import 'node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs.scss';
-@import 'node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs--with-related.scss';
+@import "node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs.scss";
+@import "node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs--with-related.scss";
 
-@import 'node_modules/@visual-framework/vf-card/vf-card.scss';
-@import 'node_modules/@visual-framework/vf-card-container/vf-card-container.scss';
+@import "node_modules/@visual-framework/vf-card/vf-card.scss";
+@import "node_modules/@visual-framework/vf-card-container/vf-card-container.scss";
 
 // @import 'node_modules/@visual-framework/vf-discussion/vf-discussion.scss';
 
-@import 'node_modules/@visual-framework/vf-code-example/vf-code-example.scss';
-@import 'node_modules/@visual-framework/vf-page-header/vf-page-header.scss';
-@import 'node_modules/@visual-framework/vf-link-list/vf-link-list.scss';
-@import 'node_modules/@visual-framework/vf-header/vf-header.scss';
-@import 'node_modules/@visual-framework/vf-hero/vf-hero.scss';
+@import "node_modules/@visual-framework/vf-code-example/vf-code-example.scss";
+@import "node_modules/@visual-framework/vf-page-header/vf-page-header.scss";
+@import "node_modules/@visual-framework/vf-link-list/vf-link-list.scss";
+@import "node_modules/@visual-framework/vf-header/vf-header.scss";
+@import "node_modules/@visual-framework/vf-hero/vf-hero.scss";
 
-@import 'node_modules/@visual-framework/vf-lede/vf-lede.scss';
+@import "node_modules/@visual-framework/vf-lede/vf-lede.scss";
 
 // @import 'node_modules/@visual-framework/vf-masthead/vf-masthead.scss';
 
-@import 'node_modules/@visual-framework/vf-navigation/vf-navigation.scss';
-@import 'node_modules/@visual-framework/vf-navigation/vf-navigation--additional.scss';
+@import "node_modules/@visual-framework/vf-navigation/vf-navigation.scss";
+@import "node_modules/@visual-framework/vf-navigation/vf-navigation--additional.scss";
 
-@import 'node_modules/@visual-framework/vf-section-header/vf-section-header.scss';
+@import "node_modules/@visual-framework/vf-section-header/vf-section-header.scss";
 // @import 'node_modules/@visual-framework/vf-activity-list/vf-activity-list.scss';
 // @import 'node_modules/@visual-framework/vf-article-meta-information/vf-article-meta-information.scss';
 
 // @import 'node_modules/@visual-framework/vf-profile/vf-profile.scss';
 
-@import 'node_modules/@visual-framework/vf-search/vf-search.scss';
+@import "node_modules/@visual-framework/vf-search/vf-search.scss";
 
 // @import 'node_modules/@visual-framework/vf-social-links/vf-social-links.scss';
 
@@ -136,9 +136,9 @@ button {
 
 // @import 'node_modules/@visual-framework/vf-video/vf-video.scss';
 // @import 'node_modules/@visual-framework/vf-video-teaser/vf-video-teaser.scss';
-@import 'node_modules/@visual-framework/vf-global-header/vf-global-header.scss';
-@import 'node_modules/@visual-framework/vf-tabs/vf-tabs.scss';
-@import 'node_modules/@visual-framework/vf-table/vf-table.scss';
+@import "node_modules/@visual-framework/vf-global-header/vf-global-header.scss";
+@import "node_modules/@visual-framework/vf-tabs/vf-tabs.scss";
+@import "node_modules/@visual-framework/vf-table/vf-table.scss";
 // @import 'node_modules/@visual-framework/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
 // @import 'node_modules/@visual-framework/vf-pagination/vf-pagination.scss';
 // @import 'node_modules/@visual-framework/vf-pagination/vf-pagination--full.scss';
@@ -146,20 +146,20 @@ button {
 /* All Visual Framework Containers */
 
 // @import 'node_modules/@visual-framework/vf-activity-group/vf-activity-group.scss';
-@import 'node_modules/@visual-framework/vf-intro/vf-intro.scss';
-@import 'node_modules/@visual-framework/embl-content-hub-loader/embl-content-hub-loader.scss';
+@import "node_modules/@visual-framework/vf-intro/vf-intro.scss";
+@import "node_modules/@visual-framework/embl-content-hub-loader/embl-content-hub-loader.scss";
 
-@import 'node_modules/@visual-framework/vf-banner/vf-banner.scss';
+@import "node_modules/@visual-framework/vf-banner/vf-banner.scss";
 // @import 'node_modules/@visual-framework/vf-banner/vf-banner--phase.scss';
-@import 'node_modules/@visual-framework/vf-banner/vf-banner--alerts.scss';
-@import 'node_modules/@visual-framework/vf-banner/vf-banner--fixed.scss';
-@import 'node_modules/@visual-framework/vf-banner/vf-banner--gdpr.scss';
+@import "node_modules/@visual-framework/vf-banner/vf-banner--alerts.scss";
+@import "node_modules/@visual-framework/vf-banner/vf-banner--fixed.scss";
+@import "node_modules/@visual-framework/vf-banner/vf-banner--gdpr.scss";
 
 // @import 'node_modules/@visual-framework/vf-details/vf-details.scss';
 
 // @import 'node_modules/@visual-framework/vf-news-container/vf-news-container.scss';
 // @import 'node_modules/@visual-framework/vf-video-container/vf-video-container.scss';
-@import 'node_modules/@visual-framework/vf-footer/vf-footer.scss';
+@import "node_modules/@visual-framework/vf-footer/vf-footer.scss";
 
 // @import 'node_modules/@visual-framework/vf-show-more/vf-show-more.scss';
 
@@ -181,22 +181,21 @@ button {
 
 /* All Visual Framework Utility and high-specificity components */
 
-@import 'node_modules/@visual-framework/vf-heading/vf-heading.scss';
-@import 'node_modules/@visual-framework/vf-text/vf-text.scss';
-@import 'node_modules/@visual-framework/vf-u-fullbleed/vf-u-fullbleed.scss';
-@import '@visual-framework/vf-utility-classes/vf-utility-classes.scss';
-
-@import '@visual-framework/vf-form__helper/vf-form__helper.scss';
-@import '@visual-framework/vf-form__input/vf-form__input.scss';
-@import '@visual-framework/vf-form__legend/vf-form__legend.scss';
-@import '@visual-framework/vf-form__fieldset/vf-form__fieldset.scss';
-@import '@visual-framework/vf-form__select/vf-form__select.scss';
-@import '@visual-framework/vf-form__checkbox/vf-form__checkbox.scss';
-@import '@visual-framework/vf-form__radio/vf-form__radio.scss';
-@import '@visual-framework/vf-form__textarea/vf-form__textarea.scss';
-@import '@visual-framework/vf-form__item/vf-form__item.scss';
-@import '@visual-framework/vf-form__label/vf-form__label.scss';
-
+@import "node_modules/@visual-framework/vf-heading/vf-heading.scss";
+@import "node_modules/@visual-framework/vf-text/vf-text.scss";
+@import "node_modules/@visual-framework/vf-u-fullbleed/vf-u-fullbleed.scss";
+@import "@visual-framework/vf-utility-classes/vf-utility-classes.scss";
+
+@import "@visual-framework/vf-form__helper/vf-form__helper.scss";
+@import "@visual-framework/vf-form__input/vf-form__input.scss";
+@import "@visual-framework/vf-form__legend/vf-form__legend.scss";
+@import "@visual-framework/vf-form__fieldset/vf-form__fieldset.scss";
+@import "@visual-framework/vf-form__select/vf-form__select.scss";
+@import "@visual-framework/vf-form__checkbox/vf-form__checkbox.scss";
+@import "@visual-framework/vf-form__radio/vf-form__radio.scss";
+@import "@visual-framework/vf-form__textarea/vf-form__textarea.scss";
+@import "@visual-framework/vf-form__item/vf-form__item.scss";
+@import "@visual-framework/vf-form__label/vf-form__label.scss";
 
 // This is a demonstration of vf-core's ability to warn and proceed on missing
 // sass imports
@@ -204,4 +203,4 @@ button {
 
 // If you have any local overrides, put them in:
 // @import '../vf-sample/vf-sample.scss';
-@import '../vf-local-overrides/vf-local-overrides.scss';
+@import "../vf-local-overrides/vf-local-overrides.scss";