From d2631aa52faf1475dec325411bbf08042654ae00 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Fri, 2 Sep 2022 11:44:52 +0200 Subject: [PATCH] Move work description list data creation to helper In order to get a clearer overview of component --- src/apps/material/helper.ts | 95 +++++++++++++++++++++++++++++- src/apps/material/material.tsx | 102 ++++----------------------------- 2 files changed, 106 insertions(+), 91 deletions(-) diff --git a/src/apps/material/helper.ts b/src/apps/material/helper.ts index 48bd08fbe9..d3be8d4c9e 100644 --- a/src/apps/material/helper.ts +++ b/src/apps/material/helper.ts @@ -1,8 +1,15 @@ +import { ListData } from "../../components/material/MaterialDetailsList"; import { ManifestationsSimpleFieldsFragment, WorkMediumFragment } from "../../core/dbc-gateway/generated/graphql"; -import { orderManifestationsByYear } from "../../core/utils/helpers/general"; +import { + creatorsToString, + filterCreators, + flattenCreators, + orderManifestationsByYear +} from "../../core/utils/helpers/general"; +import { UseTextFunction } from "../../core/utils/text"; export const getManifestationType = ( manifestation: ManifestationsSimpleFieldsFragment @@ -24,3 +31,89 @@ export const getManifestationFromType = ( return allManifestationsThatMatchType.shift(); }; + +export const getWorkDescriptionListData = ({ + manifestation, + work, + t +}: { + manifestation: ManifestationsSimpleFieldsFragment | null; + work: WorkMediumFragment; + t: UseTextFunction; +}): ListData => { + const { titles, mainLanguages, creators, workYear } = work; + + const allLanguages = mainLanguages + .map((language) => language.display) + .join(", "); + const fallBackManifestation = getWorkManifestation(work); + const creatorsText = creatorsToString( + flattenCreators(filterCreators(creators, ["Person"])), + t + ); + + return [ + { + label: t("typeText"), + value: + (manifestation?.materialTypes?.[0]?.specific && "") || + (fallBackManifestation?.materialTypes?.[0]?.specific && ""), + type: "standard" + }, + { + label: t("languageText"), + value: allLanguages, + type: "standard" + }, + { + label: t("genreAndFormText"), + value: + (manifestation?.genreAndForm?.[0] ?? "") || + (fallBackManifestation?.genreAndForm?.[0] ?? ""), + type: "standard" + }, + { label: t("contributorsText"), value: creatorsText, type: "link" }, + { + label: t("originalTitleText"), + value: titles && workYear ? `${titles?.original} ${workYear}` : "", + type: "standard" + }, + { + label: t("isbnText"), + value: + (manifestation?.identifiers?.[0].value ?? "") || + (fallBackManifestation?.identifiers?.[0].value ?? ""), + type: "standard" + }, + { + label: t("editionText"), + value: + (manifestation?.edition?.summary ?? "") || + (fallBackManifestation?.edition?.summary ?? ""), + type: "standard" + }, + { + label: t("scopeText"), + value: + String(manifestation?.physicalDescriptions?.[0]?.numberOfPages ?? "") || + String( + fallBackManifestation?.physicalDescriptions?.[0]?.numberOfPages ?? "" + ), + type: "standard" + }, + { + label: t("publisherText"), + value: + (manifestation?.hostPublication?.publisher ?? "") || + (fallBackManifestation?.hostPublication?.publisher ?? ""), + type: "standard" + }, + { + label: t("audienceText"), + value: + (manifestation?.audience?.generalAudience[0] ?? "") || + (fallBackManifestation?.audience?.generalAudience[0] ?? ""), + type: "standard" + } + ]; +}; diff --git a/src/apps/material/material.tsx b/src/apps/material/material.tsx index 0dd675ffcf..62bb421633 100644 --- a/src/apps/material/material.tsx +++ b/src/apps/material/material.tsx @@ -16,20 +16,14 @@ import Disclosure from "../../components/material/disclosures/disclosure"; import { MaterialReviews } from "../../components/material/MaterialReviews"; import MaterialMainfestationItem from "../../components/material/MaterialMainfestationItem"; import { useText } from "../../core/utils/text"; -import { - creatorsToString, - filterCreators, - flattenCreators, - getManifestationPid -} from "../../core/utils/helpers/general"; -import MaterialDetailsList, { - ListData -} from "../../components/material/MaterialDetailsList"; +import { getManifestationPid } from "../../core/utils/helpers/general"; +import MaterialDetailsList from "../../components/material/MaterialDetailsList"; import { getUrlQueryParam, setQueryParametersInUrl } from "../../core/utils/helpers/url"; import { + getWorkDescriptionListData, getManifestationFromType, getManifestationType, getWorkManifestation @@ -54,7 +48,7 @@ const Material: React.FC = ({ wid }) => { if (!data?.work) return; const { work } = data; const type = getUrlQueryParam("type"); - // if there is no type in the url, getWorkManifestation is used to set the state and url type parameters + // if there is no type in the url, estation is used to set the state and url type parameters if (!type) { const workManifestation = getWorkManifestation(work); setCurrentManifestation(workManifestation); @@ -79,89 +73,19 @@ const Material: React.FC = ({ wid }) => { return
No work data
; } - const { manifestations, titles, mainLanguages, creators, workYear } = - data.work; + const { work } = data; + const { manifestations } = work; // TODO: Temporary way to get a pid we can use for showing a cover for the material. // It should be replaced with some dynamic feature // that follows the current type of the material. const pid = getManifestationPid(manifestations); - const fallBackManifestation = getWorkManifestation(data?.work); - const creatorsText = creatorsToString( - flattenCreators(filterCreators(creators, ["Person"])), - t - ); - - const allLanguages = mainLanguages - .map((language) => language.display) - .join(", "); - const listDescriptionData: ListData = [ - { - label: t("typeText"), - value: - (currentManifestation?.materialTypes?.[0]?.specific && "") || - (fallBackManifestation?.materialTypes?.[0]?.specific && ""), - type: "standard" - }, - { - label: t("languageText"), - value: allLanguages, - type: "standard" - }, - { - label: t("genreAndFormText"), - value: - (currentManifestation?.genreAndForm?.[0] ?? "") || - (fallBackManifestation?.genreAndForm?.[0] ?? ""), - type: "standard" - }, - { label: t("contributorsText"), value: creatorsText, type: "link" }, - { - label: t("originalTitleText"), - value: titles && workYear ? `${titles?.original} ${workYear}` : "", - type: "standard" - }, - { - label: t("isbnText"), - value: - (currentManifestation?.identifiers?.[0].value ?? "") || - (fallBackManifestation?.identifiers?.[0].value ?? ""), - type: "standard" - }, - { - label: t("editionText"), - value: - (currentManifestation?.edition?.summary ?? "") || - (fallBackManifestation?.edition?.summary ?? ""), - type: "standard" - }, - { - label: t("scopeText"), - value: - String( - currentManifestation?.physicalDescriptions?.[0]?.numberOfPages ?? "" - ) || - String( - fallBackManifestation?.physicalDescriptions?.[0]?.numberOfPages ?? "" - ), - type: "standard" - }, - { - label: t("publisherText"), - value: - (currentManifestation?.hostPublication?.publisher ?? "") || - (fallBackManifestation?.hostPublication?.publisher ?? ""), - type: "standard" - }, - { - label: t("audienceText"), - value: - (currentManifestation?.audience?.generalAudience[0] ?? "") || - (fallBackManifestation?.audience?.generalAudience[0] ?? ""), - type: "standard" - } - ]; + const listDescriptionData = getWorkDescriptionListData({ + manifestation: currentManifestation, + work, + t + }); return (
@@ -176,9 +100,7 @@ const Material: React.FC = ({ wid }) => { {manifestations.all.map((manifestation) => {