From 40c85eb5e087373140820d107f016ca4ec60d496 Mon Sep 17 00:00:00 2001
From: atridadl <me@atri.dad>
Date: Sat, 25 Nov 2023 23:48:10 -0700
Subject: [PATCH] Split out error bound component for rooms and improved the
 message

---
 app/components/FourOhFour.tsx | 28 ++++++++++++++++++++++++++++
 app/routes/dashboard.tsx      |  4 ++--
 app/routes/room.$roomId.tsx   | 19 +++----------------
 3 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 app/components/FourOhFour.tsx

diff --git a/app/components/FourOhFour.tsx b/app/components/FourOhFour.tsx
new file mode 100644
index 0000000..310534c
--- /dev/null
+++ b/app/components/FourOhFour.tsx
@@ -0,0 +1,28 @@
+import { Link } from "@remix-run/react";
+
+export default function FourOhFour() {
+  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>
+      <h2 className="text-2xl font-bold m-2">
+        If you believe you reached this page in error, please file an issue{" "}
+        <a
+          href="https://github.com/atridadl/sprintpadawan/issues/new"
+          className="link link-secondary"
+        >
+          here
+        </a>
+      </h2>
+      <Link
+        about="Back to home."
+        to="/"
+        className="btn btn-secondary normal-case text-xl m-2"
+      >
+        Back to Home
+      </Link>
+    </span>
+  );
+}
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
index 1020e78..829fe62 100644
--- a/app/routes/dashboard.tsx
+++ b/app/routes/dashboard.tsx
@@ -1,7 +1,7 @@
 import { getAuth } from "@clerk/remix/ssr.server";
 import { LoaderFunction, redirect } from "@remix-run/node";
 import { Link } from "@remix-run/react";
-import { LogInIcon, ShieldIcon, TrashIcon } from "lucide-react";
+import { LogInIcon, ShieldIcon, StarIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import { useEventSource } from "remix-utils/sse/react";
@@ -114,7 +114,7 @@ export default function Dashboard() {
           <ShieldIcon className="inline-block text-primary" />
         )}
         {isVIP(user?.publicMetadata) && (
-          <ShieldIcon className="inline-block text-secondary" />
+          <StarIcon className="inline-block text-secondary" />
         )}
       </h1>
 
diff --git a/app/routes/room.$roomId.tsx b/app/routes/room.$roomId.tsx
index a1510ad..f4c69fd 100644
--- a/app/routes/room.$roomId.tsx
+++ b/app/routes/room.$roomId.tsx
@@ -1,6 +1,6 @@
 import { getAuth } from "@clerk/remix/ssr.server";
 import { LoaderFunction, redirect } from "@remix-run/node";
-import { Link, useParams } from "@remix-run/react";
+import { useParams } from "@remix-run/react";
 import {
   CheckCircleIcon,
   CopyIcon,
@@ -28,6 +28,7 @@ import { db } from "~/services/db.server";
 import { rooms } from "~/services/schema";
 import { eq } from "drizzle-orm";
 import { shitList } from "~/services/consts.server";
+import FourOhFour from "~/components/FourOhFour";
 
 // Loader
 export const loader: LoaderFunction = async (args) => {
@@ -69,21 +70,7 @@ export const loader: LoaderFunction = async (args) => {
 
 // Checks for 404
 export function ErrorBoundary() {
-  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>
-      <Link
-        about="Back to home."
-        to="/"
-        className="btn btn-secondary normal-case text-xl m-2"
-      >
-        Back to Home
-      </Link>
-    </span>
-  );
+  return <FourOhFour />;
 }
 
 export default function Room() {