Use unique material types & set initial option for SlideSelect on wor…

…k page
danskernesdigitalebibliotek · Nov 27, 2024 · 960ab55 · 960ab55
1 parent 4d23f0f
commit 960ab55
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/components/pages/workPageLayout/WorkPageHeader.tsx b/components/pages/workPageLayout/WorkPageHeader.tsx
@@ -29,21 +29,36 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => {
     },
     { query: { enabled: !!selectedManifestation?.pid } }
   )
-  const slideSelectOptions = getWorkMaterialTypes(work).map(materialType => {
+  const workMaterialTypes = getWorkMaterialTypes(work).map(materialType => {
     return { value: materialType.code, render: materialType.display }
   })
+  // We only want unique material types
+  const slideSelectOptions = workMaterialTypes.reduce<SlideSelectOption[]>((acc, materialType) => {
+    if (!acc.some(item => item.value === materialType.value)) {
+      acc.push(materialType)
+    }
+    return acc
+  }, [])
+
   const titleSuffix = selectedManifestation?.titles?.identifyingAddition
   const lowResCover = getLowResCoverUrl(dataCovers)
   const coverSrc = getCoverUrls(
     dataCovers,
     [selectedManifestation?.pid || ""],
     ["default", "original", "large", "medium-large", "medium", "small-medium", "small", "xx-small"]
   )
+  const findInitialOption = () => {
+    return slideSelectOptions.find(option => {
+      return !!selectedManifestation?.materialTypes.find(materialType => {
+        return materialType.materialTypeGeneral.code.includes(option.value)
+      })
+    })
+  }
 
   return (
     <div className="mt-5 flex w-full flex-col lg:flex-row">
       <div className="h-auto lg:order-2 lg:flex lg:flex-1 lg:basis-1/3 lg:flex-col">
-        <div className="relative mx-auto flex h-full w-[70vw] items-stretch justify-center lg:w-full">
+        <div className="relative mx-auto flex h-full w-[70vw] justify-center lg:min-h-[60vh] lg:w-full">
           {!isLoadingCovers && (
             <CoverPicture
               alt="Forsidebillede på værket"
@@ -55,6 +70,7 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => {
         <div className="flex w-full justify-center">
           <SlideSelect
             options={slideSelectOptions}
+            initialOption={findInitialOption()}
             onOptionSelect={(optionSelected: SlideSelectOption) => {
               setSelectedManifestation(
                 getManifestationByMaterialType(work, optionSelected.value) ||