Implement fallback for material page.

If the specified type in the URL does not exist in the data, we will fallback to the type in bestRepresentation. This change is implemented because currently, if an incorrect type is specified, the page will load indefinitely. DDFFORM-903
danskernesdigitalebibliotek · Jul 10, 2024 · c4e9f84 · c4e9f84
1 parent bd0b706
commit c4e9f84
Showing 1 changed file with 43 additions and 34 deletions.
diff --git a/src/apps/material/material.tsx b/src/apps/material/material.tsx
@@ -1,43 +1,45 @@
-import React, { useEffect, useState } from "react";
-import VariousIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/Various.svg";
 import CreateIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/Create.svg";
 import Receipt from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/Receipt.svg";
+import VariousIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/Various.svg";
+import React, { useEffect, useState } from "react";
 import { useDeepCompareEffect } from "react-use";
-import { WorkId } from "../../core/utils/types/ids";
+import DisclosureControllable from "../../components/Disclosures/DisclosureControllable";
+import DisclosureSummary from "../../components/Disclosures/DisclosureSummary";
+import DigitalModal from "../../components/material/digital-modal/DigitalModal";
+import InfomediaModal from "../../components/material/infomedia/InfomediaModal";
+import { hasCorrectAccess } from "../../components/material/material-buttons/helper";
 import MaterialDescription from "../../components/material/MaterialDescription";
-import { MaterialReviews } from "../../components/material/MaterialReviews";
-import MaterialMainfestationItem from "../../components/material/MaterialMainfestationItem";
-import { useText } from "../../core/utils/text";
 import MaterialDetailsList from "../../components/material/MaterialDetailsList";
+import MaterialHeader from "../../components/material/MaterialHeader";
+import MaterialMainfestationItem from "../../components/material/MaterialMainfestationItem";
+import { MaterialReviews } from "../../components/material/MaterialReviews";
+import MaterialSkeleton from "../../components/material/MaterialSkeleton";
+import { PeriodicalEdition } from "../../components/material/periodical/helper";
+import { statistics } from "../../core/statistics/statistics";
+import { useStatistics } from "../../core/statistics/useStatistics";
+import { getWorkPid } from "../../core/utils/helpers/general";
 import {
   getUrlQueryParam,
   setQueryParametersInUrl
 } from "../../core/utils/helpers/url";
+import { usePatronData } from "../../core/utils/helpers/usePatronData";
+import { isAnonymous, isBlocked } from "../../core/utils/helpers/user";
+import { useText } from "../../core/utils/text";
+import { Manifestation, Work } from "../../core/utils/types/entities";
+import { WorkId } from "../../core/utils/types/ids";
+import { ManifestationMaterialType } from "../../core/utils/types/material-type";
+import { useGetWork } from "../../core/utils/useGetWork";
 import {
-  getDetailsListData,
-  getInfomediaIds,
   divideManifestationsByMaterialType,
+  filterManifestationsByType,
   getBestMaterialTypeForWork,
+  getDetailsListData,
+  getInfomediaIds,
   getManifestationsOrderByTypeAndYear,
   isParallelReservation
 } from "./helper";
-import { Manifestation, Work } from "../../core/utils/types/entities";
-import { PeriodicalEdition } from "../../components/material/periodical/helper";
-import InfomediaModal from "../../components/material/infomedia/InfomediaModal";
-import { useStatistics } from "../../core/statistics/useStatistics";
-import { statistics } from "../../core/statistics/statistics";
-import DisclosureControllable from "../../components/Disclosures/DisclosureControllable";
-import DigitalModal from "../../components/material/digital-modal/DigitalModal";
-import { hasCorrectAccess } from "../../components/material/material-buttons/helper";
-import MaterialHeader from "../../components/material/MaterialHeader";
-import MaterialSkeleton from "../../components/material/MaterialSkeleton";
-import DisclosureSummary from "../../components/Disclosures/DisclosureSummary";
 import MaterialDisclosure from "./MaterialDisclosure";
-import { isAnonymous, isBlocked } from "../../core/utils/helpers/user";
 import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals";
-import { usePatronData } from "../../core/utils/helpers/usePatronData";
-import { useGetWork } from "../../core/utils/useGetWork";
-import { getWorkPid } from "../../core/utils/helpers/general";
 
 export interface MaterialProps {
   wid: WorkId;
@@ -104,25 +106,32 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
-  // This useEffect selects the current manifestation.
   useEffect(() => {
     if (!data?.work) return;
     const { work } = data as { work: Work };
-    const type = getUrlQueryParam("type");
+
+    // If the urlType is present in manifestations.all, we will use that type,
+    // otherwise fallback to the best material type for the work.
+    const urlType = getUrlQueryParam("type");
+    const urlTypeIsPresentInManifestations =
+      filterManifestationsByType(
+        urlType as ManifestationMaterialType,
+        work.manifestations.all
+      ).length > 0;
+
     const manifestationsByMaterialType = divideManifestationsByMaterialType(
       work.manifestations.all
     );
-    // If there is no type in the url, we select one.
-    if (!type) {
-      const bestMaterialType = getBestMaterialTypeForWork(work);
-      setSelectedManifestations(manifestationsByMaterialType[bestMaterialType]);
-      setQueryParametersInUrl({
-        type: bestMaterialType
-      });
+
+    if (urlType && urlTypeIsPresentInManifestations) {
+      setSelectedManifestations(manifestationsByMaterialType[urlType]);
       return;
     }
-    // If there is a type, use it to select a group of manifestations.
-    setSelectedManifestations(manifestationsByMaterialType[type]);
+    const bestMaterialType = getBestMaterialTypeForWork(work);
+    setSelectedManifestations(manifestationsByMaterialType[bestMaterialType]);
+    setQueryParametersInUrl({
+      type: bestMaterialType
+    });
   }, [data]);
 
   if (isLoading || !data?.work || !selectedManifestations) {