Merge pull request #32 from NYPL/SCC-3652/drb-sidebar-components

SCC-3652 - DRBResult model and DRBCard component
NYPL · Oct 13, 2023 · 982abf2 · 982abf2
2 parents 0a5cf47 + 3b43c25
commit 982abf2
Show file tree

Hide file tree

Showing 29 changed files with 860 additions and 509 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -34,5 +34,20 @@ module.exports = {
     "@typescript-eslint/strict-boolean-expressions": ["off"],
     "@typescript-eslint/explicit-function-return-type": ["off"],
     "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/naming-convention": [
+      "warn",
+      {
+        selector: ["typeProperty", "parameter"],
+        format: ["camelCase"],
+      },
+      {
+        selector: ["function"],
+        format: ["camelCase", "PascalCase"],
+      },
+      {
+        selector: "variable",
+        format: ["camelCase", "PascalCase", "UPPER_CASE"],
+      },
+    ],
   },
 }
diff --git a/__test__/pages/404/404.test.tsx b/__test__/pages/404/404.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react"
 
 import Custom404 from "../../../pages/404/index"
 import Redirect404 from "../../../pages/404/redirect"
-import { LEGACY_CATALOG_URL } from "../../../src/config/constants"
+import { appConfig } from "../../../src/config/config"
 
 describe("404", () => {
   it("should display 404 text", () => {
@@ -21,7 +21,10 @@ describe("404", () => {
     const legacyLink = screen.getByRole("link", {
       name: "Legacy Catalog",
     })
-    expect(legacyLink).toHaveAttribute("href", LEGACY_CATALOG_URL)
+    expect(legacyLink).toHaveAttribute(
+      "href",
+      appConfig.externalUrls.legacyCatalog
+    )
   })
 })
 

diff --git a/jest.setup.js b/jest.setup.js
@@ -5,3 +5,6 @@ import "@testing-library/jest-dom"
 // logged and we don't want to see expected errors while we test.
 jest.spyOn(global.console, "error").mockImplementation(() => jest.fn())
 jest.spyOn(global.console, "warn").mockImplementation(() => jest.fn())
+
+// Increase timeout on tests
+jest.setTimeout(35000)
diff --git a/pages/404/index.tsx b/pages/404/index.tsx
@@ -1,25 +1,28 @@
 import Head from "next/head"
 import { Heading } from "@nypl/design-system-react-components"
 
+import { appConfig } from "../../src/config/config"
+import Layout from "../../src/components/Layout/Layout"
 import RCLink from "../../src/components/RCLink/RCLink"
-import { LEGACY_CATALOG_URL } from "../../src/config/constants"
 
 export default function Custom404() {
   return (
     <>
       <Head>
         <title>404 Not Found</title>
       </Head>
-      <Heading level="one">404 Not Found</Heading>
-      <div>
+      <Layout activePage="404">
+        <Heading level="one">404 Not Found</Heading>
         <p>We&apos;re sorry...</p>
         <p>The page you were looking for doesn&apos;t exist.</p>
         <p>
           Search the <RCLink href="/">Research Catalog</RCLink> or our{" "}
-          <RCLink href={LEGACY_CATALOG_URL}>Legacy Catalog</RCLink> for research
-          materials.
+          <RCLink href={appConfig.externalUrls.legacyCatalog}>
+            Legacy Catalog
+          </RCLink>{" "}
+          for research materials.
         </p>
-      </div>
+      </Layout>
     </>
   )
 }
diff --git a/pages/404/redirect.tsx b/pages/404/redirect.tsx
@@ -1,32 +1,34 @@
 import Head from "next/head"
 import { Heading } from "@nypl/design-system-react-components"
 
+import { appConfig } from "../../src/config/config"
+import Layout from "../../src/components/Layout/Layout"
 import RCLink from "../../src/components/RCLink/RCLink"
-import {
-  CIRCULATING_CATALOG_URL,
-  LEGACY_CATALOG_URL,
-} from "../../src/config/constants"
 
 export default function Redirect404() {
   return (
     <>
       <Head>
         <title>404 Not Found</title>
       </Head>
-      <Heading level="one">We&apos;re sorry...</Heading>
-      <div>
+      <Layout activePage="404">
+        <Heading level="one">We&apos;re sorry...</Heading>
         <p>You&apos;ve followed an out-of-date link to our research catalog.</p>
         <p>
           You may be able to find what you&apos;re looking for in the{" "}
           <RCLink href="/">Research Catalog</RCLink> or the{" "}
-          <RCLink href={CIRCULATING_CATALOG_URL}>Circulating Catalog</RCLink>.
-          for research materials.
+          <RCLink href={appConfig.externalUrls.circulatingCatalog}>
+            Circulating Catalog
+          </RCLink>
+          . for research materials.
         </p>
         <p>
           You can also try the{" "}
-          <RCLink href={LEGACY_CATALOG_URL}>Legacy Catalog</RCLink>
+          <RCLink href={appConfig.externalUrls.legacyCatalog}>
+            Legacy Catalog
+          </RCLink>
         </p>
-      </div>
+      </Layout>
     </>
   )
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,19 +1,14 @@
 import Head from "next/head"
 import "@nypl/design-system-react-components/dist/styles.css"
 
-import Layout from "../src/components/Layout/Layout"
-import { getActivePage } from "../src/utils/appUtils"
-
-function App({ Component, pageProps, router }) {
-  const activePage = getActivePage(router.pathname)
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function App({ Component, pageProps }) {
   return (
     <>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <Layout activePage={activePage}>
-        <Component {...pageProps} />
-      </Layout>
+      <Component {...pageProps} />
     </>
   )
 }

diff --git a/pages/api/drb.ts b/pages/api/drb.ts
@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next"
 
 import type { SearchParams } from "../../src/types/searchTypes"
-import type { DRBResultsResponse } from "../../src/types/drbTypes"
+import type { DRBResults } from "../../src/types/drbTypes"
 import nyplApiClient from "../../src/server/nyplApiClient/index"
 import { DRB_API_NAME } from "../../src/config/constants"
 import { getDRBQueryStringFromSearchParams } from "../../src/utils/drbUtils"
@@ -12,7 +12,7 @@ import { mapQueryToSearchParams } from "../../src/utils/searchUtils"
  */
 export async function fetchDRBResults(
   searchParams: SearchParams
-): Promise<DRBResultsResponse | Error> {
+): Promise<DRBResults | Error> {
   const drbQueryString = getDRBQueryStringFromSearchParams(searchParams)
 
   try {

diff --git a/pages/api/search.ts b/pages/api/search.ts
@@ -9,6 +9,7 @@ import {
   PATHS,
   DISCOVERY_API_NAME,
   DISCOVERY_API_SEARCH_ROUTE,
+  DRB_API_NAME,
   RESULTS_PER_PAGE,
 } from "../../src/config/constants"
 import nyplApiClient from "../../src/server/nyplApiClient/index"
@@ -18,6 +19,7 @@ import {
   mapRequestBodyToSearchParams,
 } from "../../src/utils/searchUtils"
 import { standardizeBibId } from "../../src/utils/bibUtils"
+import { getDRBQueryStringFromSearchParams } from "../../src/utils/drbUtils"
 
 export async function fetchResults(
   searchParams: SearchParams
@@ -39,29 +41,47 @@ export async function fetchResults(
         }
       : {}
 
-  const queryString = getQueryString({
+  const modifiedSearchParams = {
     ...searchParams,
     ...journalParams,
     q: keywordsOrBibId,
-  })
+  }
+
+  const queryString = getQueryString(modifiedSearchParams)
 
   const aggregationQuery = `/aggregations${queryString}`
   const resultsQuery = `${queryString}&per_page=${RESULTS_PER_PAGE.toString()}`
+  const drbQuery = getDRBQueryStringFromSearchParams(modifiedSearchParams)
 
   // Get the following in parallel:
   //  - search results
   //  - aggregations
+  //  - drb results
   const client = await nyplApiClient({ apiName: DISCOVERY_API_NAME })
+  const drbClient = await nyplApiClient({ apiName: DRB_API_NAME })
+
+  const [resultsResponse, aggregationsResponse, drbResultsResponse] =
+    await Promise.allSettled([
+      await client.get(`${DISCOVERY_API_SEARCH_ROUTE}${resultsQuery}`),
+      await client.get(`${DISCOVERY_API_SEARCH_ROUTE}${aggregationQuery}`),
+      await drbClient.get(drbQuery),
+    ])
+
+  // Assign results values for each response when status is fulfilled
+  const results =
+    resultsResponse.status === "fulfilled" && resultsResponse.value
+
+  const aggregations =
+    aggregationsResponse.status === "fulfilled" && aggregationsResponse.value
 
-  const [results, aggregations] = await Promise.all([
-    await client.get(`${DISCOVERY_API_SEARCH_ROUTE}${resultsQuery}`),
-    await client.get(`${DISCOVERY_API_SEARCH_ROUTE}${aggregationQuery}`),
-  ])
+  const drbResults =
+    drbResultsResponse.status === "fulfilled" && drbResultsResponse.value
 
   try {
     return {
       results,
       aggregations,
+      drbResults,
       page: searchParams.page,
     }
   } catch (error) {