Move work description list data creation to helper

In order to get a clearer overview of component
danskernesdigitalebibliotek · Sep 2, 2022 · d2631aa · d2631aa
1 parent 8877738
commit d2631aa
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 91 deletions.
diff --git 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
@@ -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<MaterialProps> = ({ 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, <getWorkManif></getWorkManif>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<MaterialProps> = ({ wid }) => {
     return <div>No work data</div>;
   }
 
-  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 (
     <main className="material-page">
@@ -176,9 +100,7 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
       <MaterialDescription pid={pid} work={data.work} />
       <Disclosure
         mainIconPath={VariousIcon}
-        title={`${t("editionsText")} (${
-          data?.work?.manifestations?.all.length
-        })`}
+        title={`${t("editionsText")} (${work?.manifestations?.all.length})`}
         disclosureIconExpandAltText=""
       >
         {manifestations.all.map((manifestation) => {