Merge pull request #334 from NYPL/SFR-914_edition_page_author_title

SFR-914: Add author and work title to edition page

CHANGELOG.md

@@ -6,6 +6,7 @@
 - CHORE: removes tugboat deploy
 - Change format filters to "Readable", "Downloadable", and "Requestable"
 - Upgrade to Web Reader version 3.1.0
+- Adds author and work title to edition detail page
 
 ## [0.13.1]
 - Added "Back to search results" link for works and editions

src/__tests__/fixtures/edition-detail.json

@@ -258,7 +258,22 @@
     "table_of_contents": "La marchandisation des services d'eau : les réformes des années 1980-1990. La fragmentation par les réseaux. Géographie des nouveaux assemblages en Afrique subsaharienne. Le pluralisme sans l'équité? L'écartèlement des territoires nationaux. Spatialisation et territorialisation des services d'eau : une inégale fragmentation.",
     "title": "A history of South Africa from the earliest European settlement",
     "volume": "Volume number",
-    "work_uuid": "0007511d-29be-4a3c-9965-fe367c55b1f8"
+    "work_authors": [
+      {
+          "lcnaf": "",
+          "name": "Edgar, John, 1876-",
+          "primary": "true",
+          "viaf": ""
+      },
+      {
+          "lcnaf": "n78095332",
+          "name": "Shakespeare, William- ()",
+          "primary": "true",
+          "viaf": "96994048"
+      }
+    ],
+    "work_uuid": "0007511d-29be-4a3c-9965-fe367c55b1f8",
+    "work_title": "A history of South Africa from the earliest European settlement"
   },
   "responseType": "singleEdition",
   "status": 200,

src/components/EditionDetail/Edition.test.tsx

@@ -34,15 +34,35 @@ describe("Renders edition component when given valid edition", () => {
       "/advanced-search"
     );
   });
-  test("Shows edition Title in Heading", () => {
+  test("Shows work work Title in Heading", () => {
     expect(
-      screen.getByRole("heading", { name: apiEdition.data.title })
+      screen.getByRole("heading", { name: apiEdition.data.work_title })
     ).toBeInTheDocument();
   });
   test("Shows edition Subtitle", () => {
     expect(screen.getByText(apiEdition.data.sub_title)).toBeInTheDocument();
   });
-
+  test("Shows Author name in Link", () => {
+    apiEdition.data.work_authors.forEach((author) =>
+      expect(screen.getByText(author.name)).toBeInTheDocument()
+    );
+  });
+  describe("Author links redirect to correct search query", () => {
+    test("Author without viaf", () => {
+      const authorElement = screen.getByText("Edgar, John, 1876-");
+      expect(authorElement.closest("a").href).toContain(
+        "query=author%3AEdgar%2C+John%2C+1876-"
+      );
+    });
+    test("Author with viaf", () => {
+      const authorElementWithViaf = screen.getByText(
+        "Shakespeare, William- ()"
+      );
+      expect(authorElementWithViaf.closest("a").href).toContain(
+        "query=viaf%3A96994048&display=author%3AShakespeare%2C+William-+%28%29"
+      );
+    });
+  });
   test("Three cards show up in page", () => {
     expect(
       screen.getByRole("heading", { name: "Featured Copy" })

src/components/EditionDetail/Edition.tsx

@@ -22,9 +22,13 @@ import Link from "~/src/components/Link/Link";
 import { InstanceCard } from "../InstanceCard/InstanceCard";
 import { defaultBreadcrumbs } from "~/src/constants/labels";
 import SearchHeader from "../SearchHeader/SearchHeader";
-import { truncateStringOnWhitespace } from "~/src/util/Util";
+import {
+  joinArrayOfElements,
+  truncateStringOnWhitespace,
+} from "~/src/util/Util";
 import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard";
 import { Instance } from "~/src/types/DataModel";
+import EditionCardUtils from "~/src/util/EditionCardUtils";
 
 const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
   props
@@ -35,6 +39,7 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
   const { pathname, query } = router;
   const featuredItemId = query.featured as string;
   const edition: ApiEdition = props.editionResult.data;
+  const authorsList = EditionCardUtils.getAuthorsList(edition.work_authors);
 
   const passedInFeaturedItem = featuredItemId
     ? edition.instances.find((instance) => {
@@ -90,9 +95,9 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
                   to={{
                     pathname: `/work/${edition.work_uuid}`,
                   }}
-                  title={edition.title}
+                  title={edition.work_title}
                 >
-                  {edition.title}
+                  {edition.work_title}
                 </Link>
               </Heading>
             )}
@@ -107,6 +112,9 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
             )}
           </Flex>
           {edition.sub_title && <Box>{edition.sub_title}</Box>}
+          {authorsList && authorsList.length && (
+            <Box>By {joinArrayOfElements(authorsList, "")}</Box>
+          )}
           <Box>
             {featuredInstance && (
               <>

src/components/Work/Work.tsx

@@ -100,7 +100,7 @@ const WorkDetail: React.FC<{ workResult: WorkResult; backUrl?: string }> = (
             </Flex>
             {work.sub_title && <Box>{work.sub_title}</Box>}
             {authorsList && authorsList.length && (
-              <Box>By {joinArrayOfElements(authorsList, ", ")}</Box>
+              <Box>By {joinArrayOfElements(authorsList, "")}</Box>
             )}
           </Box>
           {featuredEdition && (

src/types/EditionQuery.ts

@@ -29,4 +29,6 @@ export type ApiEdition = {
   instances: Instance[];
   title?: string;
   sub_title?: string;
+  work_title?: string;
+  work_authors?: Agent[];
 };