Merge pull request #985 from danskernesdigitalebibliotek/release/form…

…-sprint-8 Formidling sprint 8
danskernesdigitalebibliotek · Mar 12, 2024 · 4b06bb2 · 4b06bb2
2 parents 6749771 + a5d34ee
commit 4b06bb2
Show file tree

Hide file tree

Showing 17 changed files with 238 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -144,7 +144,7 @@
     "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated."
   },
   "dependencies": {
-    "@danskernesdigitalebibliotek/dpl-design-system": "2024.9.2-0ed07ad3efdf9ebdaf8871dc1ffea434cb8fb22d",
+    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.11.0-20df4b7c9e623101a57ce78e373273b226234bf9",
     "@reach/alert": "^0.17.0",
     "@reach/dialog": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.7",

diff --git a/src/apps/material-grid/MaterialGrid.tsx b/src/apps/material-grid/MaterialGrid.tsx
@@ -8,22 +8,28 @@ import {
   ValidSelectedIncrements,
   calculateAmountToDisplay
 } from "./materiel-grid-util";
+import { DisplayMaterialType } from "../../core/utils/types/material-type";
+
+export type MaterialGridItemProps = {
+  wid: WorkId;
+  materialType?: DisplayMaterialType;
+};
 
 export type MaterialGridProps = {
-  materialIds: WorkId[];
+  materials: MaterialGridItemProps[];
   title?: string;
   selectedAmountOfMaterialsForDisplay: ValidSelectedIncrements;
 };
 const MaterialGrid: React.FC<MaterialGridProps> = ({
-  materialIds,
+  materials,
   title,
   selectedAmountOfMaterialsForDisplay
 }) => {
   const t = useText();
 
   const initialMaximumDisplay = MaterialGridValidIncrements[0];
   const maximumCalculatedDisplay = calculateAmountToDisplay(
-    materialIds.length,
+    materials.length,
     selectedAmountOfMaterialsForDisplay
   );
   const moreMaterialsThanInitialMaximum =
@@ -45,13 +51,20 @@ const MaterialGrid: React.FC<MaterialGridProps> = ({
     <div className="material-grid">
       {title && <h2 className="material-grid__title">{title}</h2>}
       <ul className="material-grid__items">
-        {materialIds
+        {materials
           .slice(0, currentAmountOfDisplayedMaterials)
-          .map((materialId) => (
-            <li key={materialId}>
-              <RecommendedMaterial wid={materialId} partOfGrid />
-            </li>
-          ))}
+          .map((material) => {
+            const { wid, materialType } = material;
+            return (
+              <li key={wid}>
+                <RecommendedMaterial
+                  partOfGrid
+                  wid={wid}
+                  materialType={materialType}
+                />
+              </li>
+            );
+          })}
       </ul>
       {moreMaterialsThanInitialMaximum && !showAllMaterials && (
         <button

diff --git a/src/apps/material-grid/automatic/MaterialGridAutomatic.entry.tsx b/src/apps/material-grid/automatic/MaterialGridAutomatic.entry.tsx
@@ -28,19 +28,15 @@ const MaterialGridAutomaticEntry: React.FC<MaterialGridAutomaticEntryProps> = ({
   title,
   selectedAmountOfMaterialsForDisplay,
   buttonText
-}) => {
-  return (
-    <GuardedApp app="material-grid-automatic">
-      <MaterialGridAutomatic
-        cql={cql}
-        title={title}
-        selectedAmountOfMaterialsForDisplay={
-          selectedAmountOfMaterialsForDisplay
-        }
-        buttonText={buttonText}
-      />
-    </GuardedApp>
-  );
-};
+}) => (
+  <GuardedApp app="material-grid-automatic">
+    <MaterialGridAutomatic
+      cql={cql}
+      title={title}
+      selectedAmountOfMaterialsForDisplay={selectedAmountOfMaterialsForDisplay}
+      buttonText={buttonText}
+    />
+  </GuardedApp>
+);
 
 export default withConfig(withUrls(withText(MaterialGridAutomaticEntry)));
diff --git a/src/apps/material-grid/automatic/MaterialGridAutomatic.tsx b/src/apps/material-grid/automatic/MaterialGridAutomatic.tsx
@@ -33,12 +33,16 @@ const MaterialGridAutomatic: React.FC<MaterialGridAutomaticProps> = ({
   }
 
   const resultWorks: Work[] = data.complexSearch.works as Work[];
-  const materialIDs = resultWorks.map((work) => work.workId);
+  const materials = resultWorks.map((work) => {
+    return {
+      wid: work.workId
+    };
+  });
 
   return (
     <MaterialGrid
       title={title}
-      materialIds={materialIDs}
+      materials={materials}
       selectedAmountOfMaterialsForDisplay={selectedAmountOfMaterialsForDisplay}
     />
   );

diff --git a/src/apps/material-grid/manual/MaterialGridManual.dev.tsx b/src/apps/material-grid/manual/MaterialGridManual.dev.tsx
@@ -10,6 +10,41 @@ import MaterialGridManual, {
   MaterialGridManualEntryProps
 } from "./MaterialGridManual.entry";
 
+// 31 materials. Intentionally not using 32 in order to demonstrate the
+// logic for only displaying intervals of 4 materials.
+const materials = [
+  { wid: "work-of:870970-basis:25660722", materialType: "bog" },
+  { wid: "work-of:870970-basis:22383590", materialType: "e-bog" },
+  { wid: "work-of:870970-basis:25932625", materialType: "film" },
+  { wid: "work-of:870970-basis:26264340", materialType: "musik (online)" },
+  { wid: "work-of:870970-basis:52646251", materialType: "lydbog" },
+  { wid: "work-of:870970-basis:26856353", materialType: "artikel" },
+  { wid: "work-of:870970-basis:27275745", materialType: "tegneserie (online)" },
+  { wid: "work-of:870970-basis:22383590", materialType: "tidsskrift" },
+  { wid: "work-of:870970-basis:29788596", materialType: "cd" },
+  { wid: "work-of:870970-basis:52646251", materialType: "podcast" },
+  { wid: "work-of:870970-basis:50689360", materialType: "film (online)" },
+  { wid: "work-of:870970-basis:22383590", materialType: "lydbog (cd-mp3)" },
+  { wid: "work-of:870970-basis:46510534", materialType: "artikel (online)" },
+  { wid: "work-of:870970-basis:134877804", materialType: "tegneserie" },
+  { wid: "work-of:870970-basis:54129807", materialType: "tidsskrift (online)" },
+  { wid: "work-of:870970-basis:52646251", materialType: "billedbog" },
+  { wid: "work-of:870970-basis:25660722", materialType: "billedbog (online)" },
+  { wid: "work-of:870970-basis:25932625", materialType: "lydbog (online)" },
+  { wid: "work-of:870970-basis:26264340", materialType: "musik (online)" },
+  { wid: "work-of:870970-basis:22383590", materialType: "artikel" },
+  { wid: "work-of:870970-basis:26856353", materialType: "film" },
+  { wid: "work-of:870970-basis:27275745", materialType: "e-bog" },
+  { wid: "work-of:870970-basis:45363899", materialType: "cd" },
+  { wid: "work-of:870970-basis:29788596", materialType: "podcast" },
+  { wid: "work-of:870970-basis:52646251", materialType: "film (online)" },
+  { wid: "work-of:870970-basis:50689360", materialType: "lydbog" },
+  { wid: "work-of:870970-basis:53045650", materialType: "tegneserie (online)" },
+  { wid: "work-of:870970-basis:46510534", materialType: "tidsskrift" },
+  { wid: "work-of:870970-basis:134877804", materialType: "cd" },
+  { wid: "work-of:870970-basis:54129807", materialType: "podcast" },
+  { wid: "work-of:870970-basis:52646251", materialType: "film (online)" }
+];
 export default {
   title: "Apps / Material Grid / Manual",
   component: MaterialGridManual,
@@ -24,42 +59,9 @@ export default {
       defaultValue: "Show all",
       control: { type: "text" }
     },
-    materialIds: {
-      name: "Material IDs",
-      defaultValue: JSON.stringify([
-        "work-of:870970-basis:25660722",
-        "work-of:870970-basis:52646251",
-        "work-of:870970-basis:25932625",
-        "work-of:870970-basis:26264340",
-        "work-of:870970-basis:52646251",
-        "work-of:870970-basis:26856353",
-        "work-of:870970-basis:27275745",
-        "work-of:870970-basis:45363899",
-        "work-of:870970-basis:29788596",
-        "work-of:870970-basis:52646251",
-        "work-of:870970-basis:50689360",
-        "work-of:870970-basis:53045650",
-        "work-of:870970-basis:46510534",
-        "work-of:870970-basis:134877804",
-        "work-of:870970-basis:54129807",
-        "work-of:870970-basis:52646251",
-        "work-of:870970-basis:25660722",
-        "work-of:870970-basis:52646251",
-        "work-of:870970-basis:25932625",
-        "work-of:870970-basis:26264340",
-        "work-of:870970-basis:52646251",
-        "work-of:870970-basis:26856353",
-        "work-of:870970-basis:27275745",
-        "work-of:870970-basis:45363899",
-        "work-of:870970-basis:29788596",
-        "work-of:870970-basis:52646251",
-        "work-of:870970-basis:50689360",
-        "work-of:870970-basis:53045650",
-        "work-of:870970-basis:46510534",
-        "work-of:870970-basis:134877804",
-        "work-of:870970-basis:54129807",
-        "work-of:870970-basis:52646251"
-      ]),
+    materials: {
+      name: "Materials",
+      defaultValue: JSON.stringify(materials),
       control: { type: "array" }
     },
     materialUrl: {

diff --git a/src/apps/material-grid/manual/MaterialGridManual.entry.tsx b/src/apps/material-grid/manual/MaterialGridManual.entry.tsx
@@ -3,8 +3,8 @@ import GuardedApp from "../../../components/guarded-app";
 import { GlobalEntryTextProps } from "../../../core/storybook/globalTextArgs";
 import { withConfig } from "../../../core/utils/config";
 import { withText } from "../../../core/utils/text";
-import { WorkId } from "../../../core/utils/types/ids";
 import { withUrls } from "../../../core/utils/url";
+import { MaterialGridItemProps } from "../MaterialGrid";
 import MaterialGridManual from "./MaterialGridManual";
 
 interface MaterialGridManualEntryConfigProps {
@@ -17,20 +17,23 @@ interface MaterialGridManualEntryConfigProps {
 export interface MaterialGridManualEntryProps
   extends GlobalEntryTextProps,
     MaterialGridManualEntryConfigProps {
-  materialIds: string;
+  materials: string;
   title?: string;
 }
 
 const MaterialGridManualEntry: React.FC<MaterialGridManualEntryProps> = ({
-  materialIds,
+  materials,
   title
 }) => {
-  const parsedMaterialIdString: WorkId[] = JSON.parse(materialIds);
-  const parsedMaterialIds = parsedMaterialIdString.map((id) => id);
+  const parsedMaterialsString: MaterialGridItemProps[] = JSON.parse(materials);
+  const parsedMaterials = parsedMaterialsString.map((work) => ({
+    wid: work.wid,
+    materialType: work.materialType
+  }));
 
   return (
     <GuardedApp app="material-grid-manual">
-      <MaterialGridManual materialIds={parsedMaterialIds} title={title} />
+      <MaterialGridManual materials={parsedMaterials} title={title} />
     </GuardedApp>
   );
 };

diff --git a/src/apps/material-grid/manual/MaterialGridManual.tsx b/src/apps/material-grid/manual/MaterialGridManual.tsx
@@ -1,25 +1,24 @@
 import * as React from "react";
-import { WorkId } from "../../../core/utils/types/ids";
-import MaterialGrid from "../MaterialGrid";
+import MaterialGrid, { MaterialGridItemProps } from "../MaterialGrid";
 import { calculateAmountToDisplay } from "../materiel-grid-util";
 
 export type MaterialGridManualProps = {
-  materialIds: WorkId[];
+  materials: MaterialGridItemProps[];
   title?: string;
 };
 
 const MaterialGridManual: React.FC<MaterialGridManualProps> = ({
-  materialIds,
+  materials,
   title
 }) => {
   const selectedAmountOfMaterialsForDisplay = calculateAmountToDisplay(
-    materialIds.length
+    materials.length
   );
 
   return (
     <MaterialGrid
       title={title}
-      materialIds={materialIds}
+      materials={materials}
       selectedAmountOfMaterialsForDisplay={selectedAmountOfMaterialsForDisplay}
     />
   );

diff --git a/src/apps/material/helper.ts b/src/apps/material/helper.ts
@@ -1,4 +1,4 @@
-import { compact, groupBy, uniqBy, uniq, head } from "lodash";
+import { compact, groupBy, uniqBy, uniq, head, first } from "lodash";
 import { UseQueryOptions } from "react-query";
 import {
   getManifestationType,
@@ -14,7 +14,10 @@ import {
 import { UseTextFunction } from "../../core/utils/text";
 import { Manifestation, Work } from "../../core/utils/types/entities";
 import { FaustId } from "../../core/utils/types/ids";
-import { ManifestationMaterialType } from "../../core/utils/types/material-type";
+import {
+  DisplayMaterialType,
+  ManifestationMaterialType
+} from "../../core/utils/types/material-type";
 import {
   AccessTypeCode,
   WorkType
@@ -454,6 +457,36 @@ export const useGetHoldings = ({
   return { data, isLoading, isError };
 };
 
+export const getManifestationBasedOnType = (
+  work: Work,
+  materialType: DisplayMaterialType
+): Manifestation => {
+  const { bestRepresentation, all } = work.manifestations;
+
+  const bestRepresentationMaterialType =
+    getManifestationMaterialTypes(bestRepresentation);
+
+  if (materialType === bestRepresentationMaterialType) {
+    return bestRepresentation;
+  }
+
+  // Filters and sorts the manifestations if the best representation does not match.
+  const filteredAndSortedManifestations = filterManifestationsByType(
+    materialType,
+    all
+  );
+  const newestFilteredAndSortedManifestation = first(
+    filteredAndSortedManifestations
+  );
+
+  if (newestFilteredAndSortedManifestation) {
+    return newestFilteredAndSortedManifestation;
+  }
+  // Fallback returning best representation.
+  return bestRepresentation;
+};
+
+// ************** VITEST ***************
 if (import.meta.vitest) {
   const { describe, expect, it } = import.meta.vitest;
 

diff --git a/src/apps/recommendation/recommendation.dev.tsx b/src/apps/recommendation/recommendation.dev.tsx
@@ -1,22 +1,28 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import Recommendation, {
-  RecommendationEntryProps
-} from "./recommendation.entry";
 import globalTextArgs, {
   GlobalEntryTextProps
 } from "../../core/storybook/globalTextArgs";
 import serviceUrlArgs from "../../core/storybook/serviceUrlArgs";
+
+import DisplayMaterialTypeOptions from "../recommended-material/recommendedMaterialDisplayTypeData";
 import RecommendationSkeleton from "./RecommendationSkeleton";
+import Recommendation, {
+  RecommendationEntryProps
+} from "./recommendation.entry";
 
 export default {
   title: "Apps / Recommendation",
   component: Recommendation,
   argTypes: {
     wid: {
-      defaultValue: "work-of:870970-basis:136336282",
+      defaultValue: "work-of:870970-basis:22383590",
       control: { type: "text" }
     },
+    materialType: {
+      defaultValue: "bog",
+      control: { type: "select", options: DisplayMaterialTypeOptions }
+    },
     positionImageRight: {
       defaultValue: false,
       control: { type: "boolean" }

diff --git a/src/apps/recommendation/recommendation.entry.tsx b/src/apps/recommendation/recommendation.entry.tsx
@@ -1,23 +1,30 @@
 import React from "react";
+import GuardedApp from "../../components/guarded-app";
 import { GlobalEntryTextProps } from "../../core/storybook/globalTextArgs";
-import { withText } from "../../core/utils/text";
-import Recommendation from "./recommendation";
 import { withConfig } from "../../core/utils/config";
-import { withUrls } from "../../core/utils/url";
+import { withText } from "../../core/utils/text";
 import { WorkId } from "../../core/utils/types/ids";
-import GuardedApp from "../../components/guarded-app";
+import { DisplayMaterialType } from "../../core/utils/types/material-type";
+import { withUrls } from "../../core/utils/url";
+import Recommendation from "./recommendation";
 
 export interface RecommendationEntryProps extends GlobalEntryTextProps {
   wid: WorkId;
+  materialType?: DisplayMaterialType;
   positionImageRight?: boolean;
 }
 
 const RecommendationEntry: React.FC<RecommendationEntryProps> = ({
   wid,
+  materialType,
   positionImageRight
 }) => (
   <GuardedApp app="recommendation">
-    <Recommendation wid={wid} positionImageRight={positionImageRight} />
+    <Recommendation
+      wid={wid}
+      materialType={materialType}
+      positionImageRight={positionImageRight}
+    />
   </GuardedApp>
 );