diff --git a/components/pages/workPageLayout/WorkPageHeader.tsx b/components/pages/workPageLayout/WorkPageHeader.tsx index 20b02070..d3c6ecda 100644 --- a/components/pages/workPageLayout/WorkPageHeader.tsx +++ b/components/pages/workPageLayout/WorkPageHeader.tsx @@ -29,9 +29,17 @@ 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((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( @@ -39,11 +47,18 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => { [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 (
-
+
{!isLoadingCovers && ( {
{ setSelectedManifestation( getManifestationByMaterialType(work, optionSelected.value) ||