From 11897d44a78a79184c4dbe81738c34b6dd4f9de5 Mon Sep 17 00:00:00 2001
From: atridadl <me@atri.dad>
Date: Mon, 27 Nov 2023 11:49:46 -0700
Subject: [PATCH] 404 error boundary fixes

---
 app/components/FourOhFour.tsx | 12 ++++++++----
 app/routes/room.$roomId.tsx   |  6 ++++--
 app/routes/sign-in.$.tsx      |  7 +------
 app/routes/sign-up.$.tsx      |  7 +------
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/app/components/FourOhFour.tsx b/app/components/FourOhFour.tsx
index 310534c..ae2c593 100644
--- a/app/components/FourOhFour.tsx
+++ b/app/components/FourOhFour.tsx
@@ -1,12 +1,16 @@
-import { Link } from "@remix-run/react";
+import { Link, isRouteErrorResponse, useRouteError } from "@remix-run/react";
 
 export default function FourOhFour() {
+  const error = useRouteError();
+  let message =
+    "Oops! This room does not appear to exist, or may have been deleted! 😢";
+  if (isRouteErrorResponse(error)) {
+    message = error.statusText;
+  }
   return (
     <span className="text-center">
       <h1 className="text-5xl font-bold m-2">4️⃣0️⃣4️⃣</h1>
-      <h1 className="text-5xl font-bold m-2">
-        Oops! This room does not appear to exist, or may have been deleted! 😢
-      </h1>
+      <h1 className="text-5xl font-bold m-2">{message}</h1>
       <h2 className="text-2xl font-bold m-2">
         If you believe you reached this page in error, please file an issue{" "}
         <a
diff --git a/app/routes/room.$roomId.tsx b/app/routes/room.$roomId.tsx
index f4c69fd..05be860 100644
--- a/app/routes/room.$roomId.tsx
+++ b/app/routes/room.$roomId.tsx
@@ -45,7 +45,8 @@ export const loader: LoaderFunction = async (args) => {
   if (!room) {
     throw new Response(null, {
       status: 404,
-      statusText: "Not Found",
+      statusText:
+        "Oops! This room does not appear to exist, or may have been deleted! 😢",
     });
   }
 
@@ -61,7 +62,8 @@ export const loader: LoaderFunction = async (args) => {
   if (isShit) {
     throw new Response(null, {
       status: 404,
-      statusText: "Not Found",
+      statusText:
+        "Wowee zowee! This wasn't supposed to happen! Maybe try refreshing the page... 🤔🧐",
     });
   }
 
diff --git a/app/routes/sign-in.$.tsx b/app/routes/sign-in.$.tsx
index 0421a36..8d2dc4b 100644
--- a/app/routes/sign-in.$.tsx
+++ b/app/routes/sign-in.$.tsx
@@ -1,10 +1,5 @@
 import { SignIn } from "@clerk/remix";
 
 export default function SignInPage() {
-  return (
-    <div>
-      <h1>Sign In route</h1>
-      <SignIn />
-    </div>
-  );
+  return <SignIn />;
 }
diff --git a/app/routes/sign-up.$.tsx b/app/routes/sign-up.$.tsx
index 9a9d777..fc9baa0 100644
--- a/app/routes/sign-up.$.tsx
+++ b/app/routes/sign-up.$.tsx
@@ -1,10 +1,5 @@
 import { SignUp } from "@clerk/remix";
 
 export default function SignUpPage() {
-  return (
-    <div>
-      <h1>Sign Up route</h1>
-      <SignUp />
-    </div>
-  );
+  return <SignUp />;
 }