Merge pull request #507 from NYPL/SFR-1944/add-error-handling-read-page

SFR-1944: Add error handling for invalid read data

CHANGELOG.md

@@ -7,6 +7,7 @@
 - SFR-2008: Automate License Page Headers and Sub-Headers
 - SFR-2033: Verify the external NYPL header links of DRB App
 - Update PR template with new Jira link
+- Add error page for /read links with invalid source
 
 ## [0.18.1]
 

src/components/ReaderLayout/ReaderLayout.tsx

@@ -26,6 +26,7 @@ import Link from "../Link/Link";
 import { addTocToManifest } from "@nypl/web-reader";
 import Loading from "../Loading/Loading";
 import { trackCtaClick } from "~/src/lib/adobe/Analytics";
+import NotFound404 from "~/src/pages/404";
 
 const origin =
   typeof window !== "undefined" && window.location?.origin
@@ -148,6 +149,10 @@ const ReaderLayout: React.FC<{
     );
   };
 
+  if (!isEmbed && !isRead) {
+    return NotFound404();
+  }
+
   return (
     <>
       {isEmbed && (

src/pages/404.tsx

@@ -1,21 +1,34 @@
+import { TemplateAppContainer } from "@nypl/design-system-react-components";
 import React from "react";
+import DrbBreakout from "../components/DrbBreakout/DrbBreakout";
 import Layout from "../components/Layout/Layout";
 import Link from "../components/Link/Link";
 
-const NotFound404 = () => (
-  <Layout>
-    <h1>404 Not Found</h1>
+const NotFound404 = () => {
+  const contentPrimaryElement = (
+    <>
+      <h1>404 Not Found</h1>
 
-    <p>We&apos;re sorry...</p>
+      <p>We&apos;re sorry...</p>
 
-    <p>The page you were looking for doesn&apos;t exist.</p>
+      <p>The page you were looking for doesn&apos;t exist.</p>
 
-    <p>
-      Search&nbsp;
-      <Link to="/">Digital Research Books Beta</Link>
-      {"."}
-    </p>
-  </Layout>
-);
+      <p>
+        Search&nbsp;
+        <Link to="/">Digital Research Books Beta</Link>
+        {"."}
+      </p>
+    </>
+  );
+
+  return (
+    <Layout>
+      <TemplateAppContainer
+        breakout={<DrbBreakout />}
+        contentPrimary={contentPrimaryElement}
+      />
+    </Layout>
+  );
+};
 
 export default NotFound404;