From 3ae14e1fa43e41d133c35b9373e7c0a530151f35 Mon Sep 17 00:00:00 2001
From: Jackie Quach <jackiequach14@gmail.com>
Date: Thu, 11 Jul 2024 13:13:57 -0400
Subject: [PATCH] add error handling for invalid read data

---
 CHANGELOG.md                                 |  1 +
 src/components/ReaderLayout/ReaderLayout.tsx |  5 +++
 src/pages/404.tsx                            | 34 +++++++++++++-------
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad3d50c8..b6d143f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Fix cut off text on search bar dropdown
 - Fix broken link on the About page
 - SFR-2008: Automate License Page Headers and Sub-Headers
+- Add error page for /read links with invalid source
 
 ## [0.18.1]
 
diff --git a/src/components/ReaderLayout/ReaderLayout.tsx b/src/components/ReaderLayout/ReaderLayout.tsx
index cca41102..102484f0 100644
--- a/src/components/ReaderLayout/ReaderLayout.tsx
+++ b/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
@@ -68,6 +69,10 @@ const ReaderLayout: React.FC<{
   const isEmbed = MediaTypes.embed.includes(link.media_type);
   const isRead = MediaTypes.read.includes(link.media_type);
 
+  if (!isEmbed && !isRead) {
+    return NotFound404();
+  }
+
   const pdfWorkerSrc = `${origin}/pdf-worker/pdf.worker.min.js`;
 
   /**
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index f0b50a82..366fa2f4 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,21 +1,31 @@
+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;