Fixed email redirects

.vscode/launch.json

+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

src/app/App.jsx

@@ -3,13 +3,9 @@ import { Apply } from "components/apply/Apply";
 import { Partners } from "components/content/Partners";
 import { JobDetails } from "components/job-details/JobDetails";
 import { Metadata } from "components/Metadata";
-import {
-  BrowserRouter as Router,
-  Redirect,
-  Route,
-  Switch,
-} from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { ErrorPage404 } from "../component-templates/ErrorPages/ErrorPage404";
+import EmailAlertRedirects from "../components/alerts/EmailAlertRedirects";
 import { HrExcellenceInResearch } from "../components/content/HrExcellenceInResearch";
 import { Science4Refugees } from "../components/content/Science4Refugees";
 import { ConditionsEmployment } from "../components/content/work-at-embl/conditions-employment/ConditionsEmployment";
@@ -40,7 +36,7 @@ export function App() {
           <Route
             path="/alerts/alert-email/:jobRef"
             render={({ match }) => (
-              <Redirect to={`/position/${match.params.jobRef}`} />
+              <EmailAlertRedirects jobId={match.params.jobRef} />
             )}
           />
           <Route path="/alerts" component={Alerts} />

src/component-templates/VFCard.jsx

@@ -68,7 +68,7 @@ export function VFCard({
 
 VFCard.Container = function VFCardContainer({ children }) {
   return (
-    <section className="vf-card-container" id="about">
+    <section className="vf-card-container">
       <div className="vf-card-container__inner">{children}</div>
     </section>
   );

src/components/alerts/EmailAlertRedirects.jsx

+import { useEffect, useState } from "react";
+import { Redirect } from "react-router-dom";
+import { useFetchJobsList } from "../../services/useFetchJobsList";
+import { VFLoaderBox } from "component-templates/VFLoader/VFLoader";
+import { JobNotFound } from "components/job-details/JobDetails";
+
+/* Raison d'être of this component is to redirect users that come from email alerts to actual job page */
+export default function EmailAlertRedirects({ jobId }) {
+  const { filteredJobs, loading, error } = useFetchJobsList();
+  const [job, setJob] = useState();
+  useEffect(() => {
+    if (filteredJobs && filteredJobs.length) {
+      const foundJob = filteredJobs.find((job) => job.id === jobId);
+      setJob(foundJob);
+    }
+  }, [filteredJobs]);
+  if (job) {
+    return (
+      <Redirect
+        to={{
+          pathname: `/position/${job.field_jobs_reference_number}`,
+          state: { job },
+        }}
+      />
+    );
+  } else if (loading) {
+    return <VFLoaderBox />;
+  } else if (error) {
+    return <JobNotFound />;
+  }
+  return null;
+}

src/components/job-details/JobDetails.jsx

@@ -14,6 +14,7 @@ import { EmblBreadcrumbs } from "../EmblBreadcrumbs";
 import { EmblFooter } from "../EmblFooter";
 import { EBICards } from "../EBICards";
 import { VfIntro } from "component-templates/VFIntro";
+import { useScrollToTop } from "../../helpers/useScrollToTop";
 
 const shortcutLinks = [
   {
@@ -67,12 +68,22 @@ const shortcutLinks = [
 
 */
 
-export function JobDetails() {
+export function JobDetails({ location }) {
+  /*
+   * Note that its possible that job object may have been provided ("location?.state?.job"), but not necessary as state from react-router
+   * If such object present ("providedJob"), use it else fetch object based on refId provided as part of URL
+   */
+  const providedJob = location?.state?.job;
   const { jobRef } = useParams();
   const { data, loading, error } = useFetch(
-    `jobs?field_jobs_reference_number=${jobRef}&_format=json&source=contenthub`
+    providedJob
+      ? null
+      : `jobs?field_jobs_reference_number=${jobRef}&_format=json&source=contenthub`
   );
-  const [currentJob, setCurrentJob] = useState();
+  const [currentJob, setCurrentJob] = useState(providedJob);
+
+  // Scroll to top on job load
+  useScrollToTop();
 
   const isLocationHinxton =
     currentJob?.$stripped_field_jobs_duty_station === "EMBL-EBI Hinxton";
@@ -80,8 +91,10 @@ export function JobDetails() {
     currentJob?.field_jobs_staff_category !== "EICAT Advertising Only";
 
   useEffect(() => {
-    const extendedJob = extendJobsObjects(data)[0];
-    setCurrentJob(extendedJob);
+    if (data) {
+      const extendedJob = extendJobsObjects(data)[0];
+      setCurrentJob(extendedJob);
+    }
   }, [data]);
 
   if (loading) {
@@ -439,7 +452,7 @@ function renderWhyJoinUsVideo(jobType) {
   );
 }
 
-function JobNotFound() {
+export function JobNotFound() {
   return (
     <>
       <VfIntro

src/components/job-list/JobList.jsx

@@ -41,7 +41,10 @@ JobList.JobListItem = function JobListItem({ job, isIframe = false }) {
     >
       <h3 className="job-title vf-summary__title">
         <Link
-          to={`/position/${job.field_jobs_reference_number}`}
+          to={{
+            pathname: `/position/${job.field_jobs_reference_number}`,
+            state: { job },
+          }}
           target={isIframe ? "_parent" : "_self"}
           className="vf-summary__link"
         >

src/helpers/useFetch.js

@@ -25,7 +25,9 @@ export function useFetch(url, initialData) {
         setLoading(false);
       }
     }
-    getData();
+    if (url) {
+      getData();
+    }
   }, [url]);
 
   return { data, loading, error };

src/helpers/useScrollToTop.js

+const { useEffect } = require("react");
+
+// Call this hook to enable scroll to top on load functionality
+export function useScrollToTop() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+}

src/images/.stub

+// Add any images to be used here