From cdaef74d37ead46a3ac457c8b1b8c9a66ca99c01 Mon Sep 17 00:00:00 2001
From: regalijan <r@regalijan.com>
Date: Thu, 19 Oct 2023 16:49:36 -0400
Subject: [PATCH] V2 future stuff

---
 app/root.tsx                     | 30 ++++++++++++++++++++++++++----
 app/routes/admin-application.tsx |  8 +++++---
 app/routes/appeals.tsx           |  8 +++++---
 app/routes/mod-queue.tsx         |  8 +++++---
 app/routes/privacy.tsx           |  8 +++++---
 app/routes/report.tsx            |  8 +++++---
 app/routes/support.tsx           |  8 +++++---
 app/routes/team.tsx              |  8 +++++---
 app/routes/terms.tsx             |  8 +++++---
 remix.config.js                  |  3 +++
 10 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/app/root.tsx b/app/root.tsx
index 738a303..d592928 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -11,6 +11,7 @@ import fontStyle from "@fontsource/plus-jakarta-sans/index.css";
 import Forbidden from "../components/Forbidden.js";
 import globalStyles from "../index.css";
 import {
+  isRouteErrorResponse,
   Links,
   LiveReload,
   Meta,
@@ -18,7 +19,9 @@ import {
   Scripts,
   useCatch,
   useLoaderData,
+  useRouteError,
 } from "@remix-run/react";
+import { type ErrorResponse } from "@remix-run/router";
 import { LinksFunction } from "@remix-run/cloudflare";
 import Login from "../components/Login.js";
 import Navigation from "../components/Navigation.js";
@@ -28,7 +31,28 @@ import theme from "../theme.js";
 import { withEmotionCache } from "@emotion/react";
 
 export function CatchBoundary() {
-  const { status } = useCatch();
+  const error = useRouteError() as ErrorResponse;
+
+  if (!isRouteErrorResponse(error))
+    return getMarkup(
+      { hide: true },
+      <Container maxW="container.lg" pt="8vh" textAlign="left">
+        <Heading size="4xl">???</Heading>
+        <br />
+        <Text fontSize="xl">Something bad happened!</Text>
+        <br />
+        <br />
+        <br />
+        <Text>Details: {error}</Text>
+        <br />
+        <br />
+        <Link color="#646cff" onClick={location.reload}>
+          Refresh
+        </Link>
+      </Container>
+    );
+
+  const { status } = error;
 
   switch (status) {
     case 303:
@@ -98,9 +122,7 @@ export async function loader({
 }
 
 export function meta() {
-  return {
-    title: "Car Crushers",
-  };
+  return [{ title: "Car Crushers" }];
 }
 
 function getMarkup(
diff --git a/app/routes/admin-application.tsx b/app/routes/admin-application.tsx
index 48c5819..2acea87 100644
--- a/app/routes/admin-application.tsx
+++ b/app/routes/admin-application.tsx
@@ -9,9 +9,11 @@ import {
 } from "@chakra-ui/react";
 
 export function meta() {
-  return {
-    title: "Admin Application - Car Crushers",
-  };
+  return [
+    {
+      title: "Admin Application - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/app/routes/appeals.tsx b/app/routes/appeals.tsx
index 505e835..2bcbaf0 100644
--- a/app/routes/appeals.tsx
+++ b/app/routes/appeals.tsx
@@ -53,9 +53,11 @@ export async function loader({ context }: { context: RequestContext }) {
 }
 
 export function meta() {
-  return {
-    title: "Appeals - Car Crushers",
-  };
+  return [
+    {
+      title: "Appeals - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx
index 5a0be59..27ea22b 100644
--- a/app/routes/mod-queue.tsx
+++ b/app/routes/mod-queue.tsx
@@ -78,9 +78,11 @@ export async function loader({ context }: { context: RequestContext }) {
 }
 
 export function meta() {
-  return {
-    title: "Moderation Queue - Car Crushers",
-  };
+  return [
+    {
+      title: "Moderation Queue - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/app/routes/privacy.tsx b/app/routes/privacy.tsx
index 2621897..7cb3cf6 100644
--- a/app/routes/privacy.tsx
+++ b/app/routes/privacy.tsx
@@ -1,9 +1,11 @@
 import { Container, Heading, Link, Text } from "@chakra-ui/react";
 
 export function meta() {
-  return {
-    title: "Privacy Police - Car Crushers",
-  };
+  return [
+    {
+      title: "Privacy Policy - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/app/routes/report.tsx b/app/routes/report.tsx
index 8dc805f..fee2b82 100644
--- a/app/routes/report.tsx
+++ b/app/routes/report.tsx
@@ -28,9 +28,11 @@ export async function loader({
 }
 
 export function meta() {
-  return {
-    title: "Report an Exploiter - Car Crushers",
-  };
+  return [
+    {
+      title: "Report an Exploiter - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/app/routes/support.tsx b/app/routes/support.tsx
index d4b4469..5191bdc 100644
--- a/app/routes/support.tsx
+++ b/app/routes/support.tsx
@@ -13,9 +13,11 @@ import {
 } from "@chakra-ui/react";
 
 export function meta() {
-  return {
-    title: "Support - Car Crushers",
-  };
+  return [
+    {
+      title: "Support - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/app/routes/team.tsx b/app/routes/team.tsx
index fdedd83..72da8af 100644
--- a/app/routes/team.tsx
+++ b/app/routes/team.tsx
@@ -12,9 +12,11 @@ import {
 import team from "../../data/team.json";
 
 export function meta() {
-  return {
-    title: "Our Team - Car Crushers",
-  };
+  return [
+    {
+      title: "Our Team - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/app/routes/terms.tsx b/app/routes/terms.tsx
index 5ac3e9b..50e7b1c 100644
--- a/app/routes/terms.tsx
+++ b/app/routes/terms.tsx
@@ -1,9 +1,11 @@
 import { Container, Heading, Link, Text } from "@chakra-ui/react";
 
 export function meta() {
-  return {
-    title: "Terms and Conditions - Car Crushers",
-  };
+  return [
+    {
+      title: "Terms and Conditions - Car Crushers",
+    },
+  ];
 }
 
 export default function () {
diff --git a/remix.config.js b/remix.config.js
index 800b0f1..2f1d737 100644
--- a/remix.config.js
+++ b/remix.config.js
@@ -1,5 +1,8 @@
 export default {
   future: {
+    v2_errorBoundary: true,
+    v2_meta: true,
+    v2_normalizeFormMethod: true,
     v2_routeConvention: true,
   },
   server: "./server.ts",