404 error boundary fixes

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">
+      <h1 className="text-5xl font-bold m-2">{message}</h1>
-        Oops! This room does not appear to exist, or may have been deleted! 😢
-      </h1>
       <h2 className="text-2xl font-bold m-2">
         If you believe you reached this page in error, please file an issue{" "}
         <a

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... 🤔🧐",
     });
   }
 

app/routes/sign-in.$.tsx

@@ -1,10 +1,5 @@
 import { SignIn } from "@clerk/remix";
 
 export default function SignInPage() {
-  return (
+  return <SignIn />;
-    <div>
-      <h1>Sign In route</h1>
-      <SignIn />
-    </div>
-  );
 }

app/routes/sign-up.$.tsx

@@ -1,10 +1,5 @@
 import { SignUp } from "@clerk/remix";
 
 export default function SignUpPage() {
-  return (
+  return <SignUp />;
-    <div>
-      <h1>Sign Up route</h1>
-      <SignUp />
-    </div>
-  );
 }