atridad/pollo
1
0
Fork 0
Code Activity Actions

Split out error bound component for rooms and improved the message

Browse source
This commit is contained in:
Atridad Lahiji 2023-11-25 23:48:10 -07:00
parent fca1077310
commit 40c85eb5e0
No known key found for this signature in database
3 changed files with 33 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/components/FourOhFour.tsx Normal file
View file

@ -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>
);
}

4
app/routes/dashboard.tsx
View file

@ -1,7 +1,7 @@
import { getAuth } from "@clerk/remix/ssr.server"; import { getAuth } from "@clerk/remix/ssr.server";
import { LoaderFunction, redirect } from "@remix-run/node"; import { LoaderFunction, redirect } from "@remix-run/node";
import { Link } from "@remix-run/react"; 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 { useState } from "react";
import LoadingIndicator from "~/components/LoadingIndicator"; import LoadingIndicator from "~/components/LoadingIndicator";
import { useEventSource } from "remix-utils/sse/react"; import { useEventSource } from "remix-utils/sse/react";
@ -114,7 +114,7 @@ export default function Dashboard() {
<ShieldIcon className="inline-block text-primary" /> <ShieldIcon className="inline-block text-primary" />
)} )}
{isVIP(user?.publicMetadata) && ( {isVIP(user?.publicMetadata) && (
<ShieldIcon className="inline-block text-secondary" /> <StarIcon className="inline-block text-secondary" />
)} )}
</h1> </h1>

19
app/routes/room.$roomId.tsx
View file

@ -1,6 +1,6 @@
import { getAuth } from "@clerk/remix/ssr.server"; import { getAuth } from "@clerk/remix/ssr.server";
import { LoaderFunction, redirect } from "@remix-run/node"; import { LoaderFunction, redirect } from "@remix-run/node";
import { Link, useParams } from "@remix-run/react"; import { useParams } from "@remix-run/react";
import { import {
CheckCircleIcon, CheckCircleIcon,
CopyIcon, CopyIcon,
@ -28,6 +28,7 @@ import { db } from "~/services/db.server";
import { rooms } from "~/services/schema"; import { rooms } from "~/services/schema";
import { eq } from "drizzle-orm"; import { eq } from "drizzle-orm";
import { shitList } from "~/services/consts.server"; import { shitList } from "~/services/consts.server";
import FourOhFour from "~/components/FourOhFour";
// Loader // Loader
export const loader: LoaderFunction = async (args) => { export const loader: LoaderFunction = async (args) => {
@ -69,21 +70,7 @@ export const loader: LoaderFunction = async (args) => {
// Checks for 404 // Checks for 404
export function ErrorBoundary() { export function ErrorBoundary() {
return ( return <FourOhFour />;
<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>
);
} }
export default function Room() { export default function Room() {