Single investigations are now fetched on demand

src/App.js

@@ -31,6 +31,7 @@ import { fetchAllInvestigations } from './actions/investigations';
 import { fetchDataCollections } from './actions/datacollections';
 import { useQuery } from './helpers/hooks';
 import PageNotFound from './containers/PageNotFound';
+import LoadingBoundary from './components/LoadingBoundary';
 
 function App() {
   const user = useSelector((state) => state.user);
@@ -133,43 +134,44 @@ function App() {
             {isSampleTrackingEnabled && (
               <Route exact path="/addresses" component={AddressesPage} />
             )}
+            <LoadingBoundary message="Loading investigation..." spacedOut>
+              <Route
+                exact
+                path="/investigation/:investigationId/datasets"
+                render={({ match }) =>
+                  UI.investigationContainer.isDatasetListVisible ? (
+                    <DatasetsPage />
+                  ) : (
+                    <Redirect
+                      to={`/investigation/${match.params.investigationId}/events`}
+                    />
+                  )
+                }
+              />
 
-            <Route
-              exact
-              path="/investigation/:investigationId/datasets"
-              render={({ match }) =>
-                UI.investigationContainer.isDatasetListVisible ? (
-                  <DatasetsPage />
-                ) : (
-                  <Redirect
-                    to={`/investigation/${match.params.investigationId}/events`}
-                  />
-                )
-              }
-            />
-
-            <Route
-              exact
-              path="/investigation/:investigationId/events/tagManager"
-              component={EventTagPage}
-            />
-            <Route
-              exact
-              path="/investigation/:investigationId/events"
-              component={EventsPage}
-            />
-            {isSampleTrackingEnabled && (
               <Route
                 exact
-                path="/investigation/:investigationId/shipping"
-                component={ShippingPage}
+                path="/investigation/:investigationId/events/tagManager"
+                component={EventTagPage}
               />
-            )}
-            <Route
-              exact
-              path="/investigation/:investigationId/parcel/:parcelId"
-              component={ParcelPage}
-            />
+              <Route
+                exact
+                path="/investigation/:investigationId/events"
+                component={EventsPage}
+              />
+              {isSampleTrackingEnabled && (
+                <Route
+                  exact
+                  path="/investigation/:investigationId/shipping"
+                  component={ShippingPage}
+                />
+              )}
+              <Route
+                exact
+                path="/investigation/:investigationId/parcel/:parcelId"
+                component={ParcelPage}
+              />
+            </LoadingBoundary>
 
             <Route exact path="/selection" component={SelectionPage} />
             <Route exact path="/selection/mint" component={MintSelectionPage} />

src/components/Parcels/ParcelDetails.js

@@ -16,12 +16,10 @@ import StatusTable from './StatusTable';
 import styles from './ParcelDetails.module.css';
 import AddressPanel from '../Address/AddressPanel';
 import AdminPanel from './AdminPanel';
-import { useInvestigation } from '../../helpers/hooks';
-import Loader from '../Loader';
 import PageNotFound from '../../containers/PageNotFound';
 
 function ParcelDetails(props) {
-  const { investigationId, parcelId } = props;
+  const { investigation, investigationId, parcelId } = props;
 
   const initParcel = useResource(ParcelResource.detailShape(), {
     investigationId,
@@ -45,7 +43,7 @@ function ParcelDetails(props) {
     storageConditions,
   } = parcel;
   const [shipment] = useResource(ShipmentResource.listShape(), {
-    investigationId: parcel.investigationId,
+    investigationId,
   });
 
   const [isEditingParcel, setEditingParcel] = useState(false);
@@ -54,8 +52,6 @@ function ParcelDetails(props) {
   const dispatch = useDispatch();
   const user = useSelector((state) => state.user);
 
-  const { investigation, fetching } = useInvestigation(investigationId);
-
   useEffect(() => {
     if (investigation) {
       dispatch(
@@ -75,10 +71,6 @@ function ParcelDetails(props) {
     }
   }, [dispatch, investigation, parcel]);
 
-  if (fetching) {
-    return <Loader message="Loading parcel..." />;
-  }
-
   if (!parcel) {
     return <PageNotFound />;
   }

src/containers/DatasetsPage.js

 import React, { useEffect } from 'react';
 import { Col, Grid, Row } from 'react-bootstrap';
 import { useParams } from 'react-router';
-import { useInvestigation } from '../helpers/hooks';
 import { useDispatch, useSelector } from 'react-redux';
 import { setBreadCrumbs } from '../actions/breadcrumbs';
 import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
@@ -10,10 +9,14 @@ import DatasetTable from '../components/Dataset/DatasetTable';
 import { removeDatasetById, addDatasetById } from '../actions/selection';
 import PageNotFound from './PageNotFound';
 import { fetchDatasetsByInvestigationId } from '../actions/datasets';
+import { useResource } from 'rest-hooks';
+import InvestigationResource from '../resources/investigation';
 
 function DatasetsPage() {
   const { investigationId } = useParams();
-  const { investigation, fetching } = useInvestigation(investigationId);
+  const investigation = useResource(InvestigationResource.detailShape(), {
+    id: investigationId,
+  });
   const sessionId = useSelector((state) => state.user.sessionId);
   const datasets = useSelector((state) => state.datasets);
   const selection = useSelector((state) => state.selection);
@@ -35,11 +38,7 @@ function DatasetsPage() {
   }, [dispatch, investigationId, sessionId, investigation?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!investigation) {
-    return fetching ? (
-      <Loader message="Loading investigation..." spacedOut />
-    ) : (
-      <PageNotFound />
-    );
+    return <PageNotFound />;
   }
 
   const expanded =

src/containers/EventsPage.js

 import React, { useEffect } from 'react';
 import { Col, Grid, Row } from 'react-bootstrap';
 import { useParams } from 'react-router';
-import { useInvestigation } from '../helpers/hooks';
 import { useDispatch } from 'react-redux';
 import { setBreadCrumbs } from '../actions/breadcrumbs';
 import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
 import LogbookContainer from './Logbook/LogbookContainer';
-import Loader from '../components/Loader';
 import PageNotFound from './PageNotFound';
+import { useResource } from 'rest-hooks';
+import InvestigationResource from '../resources/investigation';
 
 function EventsPage() {
   const { investigationId } = useParams();
-  const { investigation, fetching } = useInvestigation(investigationId);
+  const investigation = useResource(InvestigationResource.detailShape(), {
+    id: investigationId,
+  });
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -26,11 +28,7 @@ function EventsPage() {
   }, [dispatch, investigation]);
 
   if (!investigation) {
-    return fetching ? (
-      <Loader message="Loading investigation..." spacedOut />
-    ) : (
-      <PageNotFound />
-    );
+    return <PageNotFound />;
   }
 
   return (

src/containers/ParcelPage.js

-import React, { Suspense } from 'react';
+import React from 'react';
 import { useParams } from 'react-router';
-import { NetworkErrorBoundary } from 'rest-hooks';
-import Loader from '../components/Loader';
+import { useResource } from 'rest-hooks';
 import ParcelDetails from '../components/Parcels/ParcelDetails';
+import InvestigationResource from '../resources/investigation';
+import LoadingBoundary from '../components/LoadingBoundary';
 
 function ParcelPage() {
   const { investigationId, parcelId } = useParams();
+  const investigation = useResource(InvestigationResource.detailShape(), {
+    id: investigationId,
+  });
 
   return (
     <div className="app__inner">
-      <Suspense fallback={<Loader message="Loading parcel..." />}>
-        <NetworkErrorBoundary>
-          <ParcelDetails
-            investigationId={investigationId}
-            parcelId={parcelId}
-          />
-        </NetworkErrorBoundary>
-      </Suspense>
+      <LoadingBoundary message="Loading parcel...">
+        <ParcelDetails
+          // Send the investigationId without waiting for investigation to trigger the fetch of the parcel
+          investigationId={investigationId}
+          investigation={investigation}
+          parcelId={parcelId}
+        />
+      </LoadingBoundary>
     </div>
   );
 }

src/containers/ShippingPage.js

@@ -3,16 +3,18 @@ import { Col, Grid, Row } from 'react-bootstrap';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router';
 import { setBreadCrumbs } from '../actions/breadcrumbs';
-import Loader from '../components/Loader';
 import ShippingPanel from '../components/Shipping/ShippingPanel';
 import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
-import { useInvestigation } from '../helpers/hooks';
 import PageNotFound from './PageNotFound';
 import LoadingBoundary from '../components/LoadingBoundary';
+import { useResource } from 'rest-hooks';
+import InvestigationResource from '../resources/investigation';
 
 function ShippingPage() {
   const { investigationId } = useParams();
-  const { investigation, fetching } = useInvestigation(investigationId);
+  const investigation = useResource(InvestigationResource.detailShape(), {
+    id: investigationId,
+  });
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -27,11 +29,7 @@ function ShippingPage() {
   }, [dispatch, investigation]);
 
   if (!investigation) {
-    return fetching ? (
-      <Loader message="Loading investigation..." spacedOut />
-    ) : (
-      <PageNotFound />
-    );
+    return <PageNotFound />;
   }
 
   return (

src/helpers/hooks.js

@@ -29,12 +29,3 @@ export function useAllInvestigations() {
     };
   });
 }
-
-export function useInvestigation(investigationId) {
-  const { investigations, fetching } = useAllInvestigations();
-
-  return {
-    investigation: investigations.find(({ id }) => `${id}` === investigationId),
-    fetching,
-  };
-}

src/resources/investigation.js

+import { Resource } from 'rest-hooks';
+import ICATPLUS from '../config/icat/icatPlus';
+import { store } from '../store';
+
+export default class InvestigationResource extends Resource {
+  id = undefined;
+  datasets = [];
+  endDate = '';
+  investigationGroups = [];
+  investigationInstruments = [];
+  investigationUsers = [];
+  keywords = [];
+  name = '';
+  parameters = [];
+  publications = [];
+  samples = [];
+  shifts = [];
+  startDate = '';
+  studyInvestigations = [];
+  summary = '';
+  title = '';
+  visitId = '';
+
+  pk() {
+    return this.id?.toString();
+  }
+
+  static get key() {
+    return 'InvestigationResource';
+  }
+
+  static url(params) {
+    const { sessionId } = store.getState().user;
+
+    return `${
+      ICATPLUS.server
+    }/catalogue/${sessionId}/investigation/id/${this.pk(params)}`;
+  }
+}