Merge pull request #81 from danskernesdigitalebibliotek/DDFBRA-253-a-…

…user-sees-material-types-in-singular

Material types in singular

components/pages/workPageLayout/WorkPageHeader.tsx

@@ -11,13 +11,14 @@ import {
   getManifestationByMaterialType,
   getManifestationLanguageIsoCode,
   getWorkMaterialTypes,
+  translateMaterialTypesForRender,
 } from "@/components/pages/workPageLayout/helper"
 import { Badge } from "@/components/shared/badge/Badge"
 import { CoverPicture } from "@/components/shared/coverPicture/CoverPicture"
 import SlideSelect, { SlideSelectOption } from "@/components/shared/slideSelect/SlideSelect"
-import { displayCreators } from "@/components/shared/workCard/helper"
 import { WorkFullWorkPageFragment } from "@/lib/graphql/generated/fbi/graphql"
-import { getCoverUrls, getLowResCoverUrl } from "@/lib/helpers/covers"
+import { getCoverUrls, getLowResCoverUrl } from "@/lib/helpers/helper.covers"
+import { displayCreators } from "@/lib/helpers/helper.creators"
 import { getIsbnsFromManifestation } from "@/lib/helpers/ids"
 import { useGetCoverCollection } from "@/lib/rest/cover-service-api/generated/cover-service"
 import { GetCoverCollectionSizesItem } from "@/lib/rest/cover-service-api/generated/model"
@@ -39,7 +40,7 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => {
   const [initialSliderValue, setInitialSliderValue] = useState<SlideSelectOption | undefined>(
     undefined
   )
-  const workMaterialTypes = getWorkMaterialTypes(work).map(materialType => {
+  const workMaterialTypes = getWorkMaterialTypes(work.materialTypes).map(materialType => {
     return { value: materialType.code, render: materialType.display }
   })
 
@@ -79,8 +80,9 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => {
     // Initialize slideSelect options
     const slideSelectOptions = workMaterialTypes.reduce<SlideSelectOption[]>(
       (acc, materialType) => {
+        // We only want unique material types
         if (!acc.some(item => item.value === materialType.value)) {
-          acc.push(addMaterialTypeIconToSelectOption(materialType)) // We only want unique material types
+          acc.push(translateMaterialTypesForRender(addMaterialTypeIconToSelectOption(materialType)))
         }
         return acc
       },
@@ -148,7 +150,9 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => {
             className="hyphens-auto break-words text-typo-heading-3 lg:mt-0 lg:text-typo-heading-2">
             {`${selectedManifestation?.titles?.full || ""}${!!titleSuffix ? ` (${titleSuffix})` : ""}`}
           </h1>
-          <p className="mt-grid-gap-2 text-typo-caption uppercase lg:mt-7">{`af ${displayCreators(work.creators, 100)}`}</p>
+          <h2 className="mt-grid-gap-2 text-typo-subtitle-sm uppercase lg:mt-7">
+            {`af ${displayCreators(work.creators, 100) || displayCreators(selectedManifestation?.contributors || [], 100)}`}
+          </h2>
         </div>
         <div className="col-span-4 mt-grid-gap-3 flex flex-col items-end justify-end lg:order-3 lg:mt-0">
           <WorkPageButtons workId={work.workId} />

components/pages/workPageLayout/helper.ts

@@ -10,9 +10,11 @@ import {
 } from "@/lib/graphql/generated/fbi/graphql"
 
 export const getWorkMaterialTypes = (
-  work: WorkFullWorkPageFragment
+  materialTypes:
+    | WorkMaterialTypesFragment["materialTypes"]
+    | ManifestationWorkPageFragment["materialTypes"]
 ): WorkMaterialTypesFragment["materialTypes"][0]["materialTypeGeneral"][] => {
-  return work.materialTypes.map(materialType => materialType.materialTypeGeneral)
+  return materialTypes.map(materialType => materialType.materialTypeGeneral)
 }
 
 export const getManifestationMaterialType = (
@@ -94,6 +96,31 @@ export const getManifestationLanguageIsoCode = (
   return undefined
 }
 
+export const materialTypeTranslations = {
+  [GeneralMaterialTypeCodeEnum.Articles]: "Artikel",
+  [GeneralMaterialTypeCodeEnum.Books]: "Bog",
+  [GeneralMaterialTypeCodeEnum.Comics]: "Tegneserie",
+  [GeneralMaterialTypeCodeEnum.Ebooks]: "E-bog",
+  [GeneralMaterialTypeCodeEnum.ImageMaterials]: "Billedmateriale",
+  [GeneralMaterialTypeCodeEnum.NewspaperJournals]: "Avis",
+  [GeneralMaterialTypeCodeEnum.AudioBooks]: "Lydbog",
+  [GeneralMaterialTypeCodeEnum.Music]: "Musik",
+  [GeneralMaterialTypeCodeEnum.Podcasts]: "Podcast",
+  [GeneralMaterialTypeCodeEnum.SheetMusic]: "Noder",
+  [GeneralMaterialTypeCodeEnum.BoardGames]: "Brætspil",
+  [GeneralMaterialTypeCodeEnum.ComputerGames]: "Computerspil",
+  [GeneralMaterialTypeCodeEnum.Films]: "Film",
+  [GeneralMaterialTypeCodeEnum.TvSeries]: "Tv-serie",
+  [GeneralMaterialTypeCodeEnum.Other]: "Andet",
+}
+
+export const translateMaterialTypesForRender = (option: SlideSelectOption): SlideSelectOption => {
+  return {
+    ...option,
+    render: materialTypeTranslations[option.value as GeneralMaterialTypeCodeEnum],
+  }
+}
+
 export const findInitialSliderValue = (
   sliderOptions: SlideSelectOption[] | undefined | null,
   selectedManifestation: ManifestationWorkPageFragment | undefined | null,

components/shared/infoBox/InfoBox.tsx

@@ -29,22 +29,21 @@ const InfoBox = ({ work }: InfoBoxProps) => {
             )}
           </div>
           <dl className="flex-1">
-            {!!selectedManifestation?.audience?.ages.length && (
-              <InfoBoxItem
-                term="Alder"
-                description={selectedManifestation.audience.ages.map(age => age.display)}
-              />
-            )}
-            {!!selectedManifestation?.series?.length && (
-              <InfoBoxItem term="Serie" description={getSeriesInfo(selectedManifestation)} />
-            )}
-            {!!selectedManifestation?.subjects.all?.length && (
-              <InfoBoxItem
-                term="Emneord"
-                description={selectedManifestation.subjects.all.map(subject => subject.display)}
-                isButtons
-              />
-            )}
+            <InfoBoxItem
+              term="Alder"
+              description={selectedManifestation?.audience?.ages.map(age => age.display) || []}
+            />
+            <InfoBoxItem
+              term="Serie"
+              description={selectedManifestation ? getSeriesInfo(selectedManifestation) : []}
+            />
+            <InfoBoxItem
+              term="Emneord"
+              description={
+                selectedManifestation?.subjects.all.map(subject => subject.display) || []
+              }
+              isButtons
+            />
           </dl>
         </div>
       </section>

components/shared/infoBox/InfoBoxDetails.tsx

@@ -6,6 +6,8 @@ import { WorkFullWorkPageFragment } from "@/lib/graphql/generated/fbi/graphql"
 import { getIsbnsFromManifestation } from "@/lib/helpers/ids"
 import { useSelectedManifestationStore } from "@/store/selectedManifestation.store"
 
+import { getTranslatedMaterialTypes } from "./helper"
+
 type InfoBoxDetailsProps = {
   work: WorkFullWorkPageFragment
 }
@@ -22,59 +24,54 @@ const InfoBoxDetails = ({ work }: InfoBoxDetailsProps) => {
         <h2 className="mb-10 text-typo-heading-4 lg:mb-24">Detaljer</h2>
         <div className="flex w-full flex-col gap-grid-gap-3 lg:flex-row lg:gap-44">
           <dl className="flex-1">
-            {!!selectedManifestation && (
+            {!!selectedManifestation ? (
               <InfoBoxItem
                 term="Type"
-                description={selectedManifestation.materialTypes.map(
-                  type => type.materialTypeGeneral.display
-                )}
-              />
-            )}
-            {!!selectedManifestation?.languages?.main?.length && (
-              <InfoBoxItem
-                term="Sprog"
-                description={selectedManifestation.languages.main.map(language => language.display)}
-              />
-            )}
-            {!!selectedManifestation?.physicalDescription?.summaryFull && (
-              <InfoBoxItem
-                term="Omfang"
-                description={[selectedManifestation.physicalDescription.summaryFull]}
+                description={getTranslatedMaterialTypes(selectedManifestation)}
               />
+            ) : (
+              <InfoBoxItem term="Type" description={[]} />
             )}
-            {!!selectedManifestation?.dateFirstEdition?.display ||
-              (work.workYear?.display && (
-                <InfoBoxItem
-                  term="Udgivelsesår"
-                  description={[
-                    selectedManifestation?.dateFirstEdition?.display || work.workYear?.display,
-                  ]}
-                />
-              ))}
+            <InfoBoxItem
+              term="Sprog"
+              description={
+                selectedManifestation?.languages?.main?.map(language => language.display) || []
+              }
+            />
+            <InfoBoxItem
+              term="Omfang"
+              description={
+                selectedManifestation?.physicalDescription?.summaryFull
+                  ? [selectedManifestation.physicalDescription.summaryFull]
+                  : []
+              }
+            />
+            <InfoBoxItem
+              term="Udgivelsesår"
+              description={
+                !!selectedManifestation?.dateFirstEdition?.display || !!work.workYear?.display
+                  ? ([
+                      selectedManifestation?.dateFirstEdition?.display || work.workYear?.display,
+                    ] as string[])
+                  : []
+              }
+            />
           </dl>
           <dl className="flex-1">
-            {!!selectedManifestation?.genreAndForm?.length && (
-              <InfoBoxItem term="Genre" description={selectedManifestation.genreAndForm} />
-            )}
-            {!!selectedManifestation?.identifiers?.length &&
-              !!getIsbnsFromManifestation(selectedManifestation)?.length && (
-                <InfoBoxItem
-                  term="ISBN"
-                  description={getIsbnsFromManifestation(selectedManifestation)}
-                />
-              )}
-            {!!selectedManifestation?.publisher?.length && (
-              <InfoBoxItem term="Forlag" description={selectedManifestation.publisher} />
-            )}
-            {(!!selectedManifestation?.contributors?.length ||
-              !!selectedManifestation?.contributorsFromDescription?.length) && (
-              <InfoBoxItem
-                term="Bidragsyder"
-                description={selectedManifestation?.contributors
+            <InfoBoxItem term="Genre" description={selectedManifestation?.genreAndForm || []} />
+            <InfoBoxItem
+              term="ISBN"
+              description={getIsbnsFromManifestation(selectedManifestation)}
+            />
+            <InfoBoxItem term="Forlag" description={selectedManifestation?.publisher || []} />
+            <InfoBoxItem
+              term="Bidragsyder"
+              description={
+                selectedManifestation?.contributors
                   .map(item => item.display)
-                  .concat(selectedManifestation?.contributorsFromDescription)}
-              />
-            )}
+                  .concat(selectedManifestation?.contributorsFromDescription) || []
+              }
+            />
           </dl>
         </div>
       </section>

components/shared/infoBox/InfoBoxItem.tsx

@@ -22,8 +22,11 @@ const InfoBoxItem = ({ term, description, isButtons = false }: InfoBoxItemProps)
     <>
       <hr className="border-border not-first:mt-7" aria-hidden="true" />
       <dt className="mt-2 text-typo-caption">{term}</dt>
-      {!isButtons && <dd className="mt-6 text-typo-heading-5">{description.join(", ")}</dd>}
-      {isButtons && (
+      {!description.length && <dd className="mt-6 text-typo-heading-5">-</dd>}
+      {!!description.length && !isButtons && (
+        <dd className="mt-6 text-typo-heading-5">{description.join(", ")}</dd>
+      )}
+      {!!description.length && isButtons && (
         <dd className="mt-6 flex flex-row flex-wrap gap-2">
           {description.map(item => (
             <Button key={item} size={"sm"} className="px-3" onClick={() => handleClick(item)}>

components/shared/infoBox/helper.ts

@@ -1,7 +1,22 @@
+import {
+  getWorkMaterialTypes,
+  translateMaterialTypesForRender,
+} from "@/components/pages/workPageLayout/helper"
 import { ManifestationWorkPageFragment } from "@/lib/graphql/generated/fbi/graphql"
 
 export const getSeriesInfo = (manifestation: ManifestationWorkPageFragment) => {
   return manifestation.series.map(
     series => `${series.numberInSeries ? series.numberInSeries + " i " : ""}${series.title}`
   )
 }
+
+export const getTranslatedMaterialTypes = (manifestation: ManifestationWorkPageFragment) => {
+  return getWorkMaterialTypes(manifestation.materialTypes)
+    .map(materialType => {
+      return translateMaterialTypesForRender({
+        value: materialType.code,
+        render: materialType.display,
+      })
+    })
+    .map(item => item.render)
+}

components/shared/slideSelect/SlideSelect.tsx

@@ -61,7 +61,7 @@ const SlideSelect = ({ options, initialOption, onOptionSelect }: SlideSelectProp
               onOptionSelect(option)
             }}
             variant="transparent"
-            classNames={cn("z-slide-select min-w-28", selected === index && "text-background")}>
+            classNames={cn("z-slide-select min-w-36", selected === index && "text-background")}>
             {!!option.icon && (
               <Icon className="m-[-7px] h-7 w-7 flex-shrink-0" name={option.icon} />
             )}

components/shared/workCard/WorkCard.tsx

@@ -2,7 +2,8 @@ import Link from "next/link"
 import React from "react"
 
 import { WorkTeaserSearchPageFragment } from "@/lib/graphql/generated/fbi/graphql"
-import { getCoverUrls, getLowResCoverUrl } from "@/lib/helpers/covers"
+import { getCoverUrls, getLowResCoverUrl } from "@/lib/helpers/helper.covers"
+import { displayCreators } from "@/lib/helpers/helper.creators"
 import { resolveUrl } from "@/lib/helpers/helper.routes"
 import { getIsbnsFromWork } from "@/lib/helpers/ids"
 import { useGetCoverCollection } from "@/lib/rest/cover-service-api/generated/cover-service"
@@ -12,7 +13,7 @@ import { useGetV1ProductsIdentifier } from "@/lib/rest/publizon-api/generated/pu
 import { Badge } from "../badge/Badge"
 import { CoverPicture } from "../coverPicture/CoverPicture"
 import WorkCardAvailabilityRow from "./WorkCardAvailabilityRow"
-import { displayCreators, getAllWorkPids } from "./helper"
+import { getAllWorkPids } from "./helper"
 
 type WorkCardProps = {
   work: WorkTeaserSearchPageFragment

components/shared/workCard/helper.ts

@@ -4,22 +4,6 @@ import {
   WorkTeaserSearchPageFragment,
 } from "@/lib/graphql/generated/fbi/graphql"
 
-export const displayCreators = (
-  creators: SearchWithPaginationQuery["search"]["works"][0]["creators"],
-  amount: number
-) => {
-  return creators.reduce((acc, creator, index) => {
-    // We shorten to max <amount> creators
-    if (index === amount) {
-      return acc + ", et. al"
-    }
-    if (index > amount) {
-      return acc
-    }
-    return acc + (index > 0 ? ", " : "") + creator.display
-  }, "")
-}
-
 export const materialTypeCategories = {
   reading: [
     GeneralMaterialTypeCodeEnum.Articles,

lib/helpers/colors.ts

@@ -1,3 +1,6 @@
+// This file naming doesn't adhere to the "helper.xyz.ts" naming convention because Tailwind
+// otherwise doesn't recognize the file as a CSS file and doesn't apply the classes.
+
 export const contentColorClasses = [
   "bg-content-pink",
   "bg-content-purple",

lib/helpers/covers.ts → lib/helpers/helper.covers.ts

@@ -1,9 +1,8 @@
 import { flatten } from "lodash"
 
+import { filterFalsyValuesFromArray } from "@/lib/helpers/helper.arrays"
 import { Cover, CoverImageUrls } from "@/lib/rest/cover-service-api/generated/model"
 
-import { filterFalsyValuesFromArray } from "./arrays"
-
 const removeEmptyCovers = (coverData: Cover[], sizes: (keyof CoverImageUrls)[]) => {
   return coverData.filter((cover: Cover) => {
     return sizes.map(size => cover.imageUrls?.[size]?.url)

lib/helpers/helper.creators.ts

@@ -0,0 +1,21 @@
+import {
+  ManifestationDetailsFragment,
+  WorkFullWorkPageFragment,
+} from "@/lib/graphql/generated/fbi/graphql"
+
+export const displayCreators = (
+  creators: WorkFullWorkPageFragment["creators"] | ManifestationDetailsFragment["contributors"],
+  amount: number
+) => {
+  return creators.reduce((acc, creator, index) => {
+    // We shorten to max <amount> creators
+    if (index === amount) {
+      return acc + ", et. al"
+    }
+    // We don't want to show one person twice
+    if (index > amount || acc.includes(creator.display)) {
+      return acc
+    }
+    return acc + (index > 0 ? ", " : "") + creator.display
+  }, "")
+}

lib/helpers/ids.ts

@@ -1,12 +1,13 @@
 import { flatten } from "lodash"
 
+import { filterFalsyValuesFromArray } from "@/lib/helpers/helper.arrays"
+
 import {
   IdentifierTypeEnum,
   ManifestationIdentifiersFragment,
   ManifestationWorkPageFragment,
   WorkTeaserSearchPageFragment,
 } from "../graphql/generated/fbi/graphql"
-import { filterFalsyValuesFromArray } from "./arrays"
 
 export const getIsbnsFromManifestation = (
   manifestation: ManifestationIdentifiersFragment | ManifestationWorkPageFragment | null