feat: add catch all 404 component

2023-09-16 12:49:29 -05:00
parent 5b40a37043
commit ab3858cd8c
6 changed files with 36 additions and 7 deletions
@@ -7,6 +7,8 @@ export default function Error({
  error: Error;
  reset: () => void;
 }) {
+  console.log(error);
+
  return (
    <div className="flex flex-col justify-center items-center flex-1">
      <div className="flex flex-col items-center w-full max-w-4xl gap-4">
@@ -14,6 +16,7 @@ export default function Error({
          Oops it looks like we&apos;ve run into an issue.
        </h2>
        <button
+          type="button"
          className="px-3 py-1 text-white bg-primary-accent rounded-md"
          onClick={() => reset()}
        >
@@ -11,6 +11,8 @@ export default function GlobalError({
  error: Error;
  reset: () => void;
 }) {
+  console.log(error);
+
  return (
    <html lang="en" className="w-full h-full">
      <body
@@ -0,0 +1,24 @@
+import Link from 'next/link';
+
+export default function NotFound({
+  heading = 'Not Found',
+  message = "Hmmm it looks like we couldn't find what you were looking for.",
+}: {
+  heading?: string;
+  message?: string;
+}) {
+  return (
+    <div className="flex flex-col justify-center items-center flex-1">
+      <div className="flex flex-col items-center w-full max-w-4xl gap-4">
+        <h2 className="text-2xl">{heading}</h2>
+        <p>{message}</p>
+        <Link
+          className="px-3 py-1 text-white bg-primary-accent rounded-md"
+          href="/"
+        >
+          Go to home page
+        </Link>
+      </div>
+    </div>
+  );
+}
@@ -1,3 +1,4 @@
+import NotFound from '@/app/not-found';
 import UserPosts from '@/components/UserPosts';
 import UserProfile from '@/components/UserProfile';
 import { getConvexClient } from '@/lib/convex';
@@ -19,8 +20,7 @@ export default async function UserProfilePage({
  });

  if (user === 'USER_NOT_FOUND') {
-    // TODO: Show real not found component
-    return <div>Not Found</div>;
+    return <NotFound />;
  }

  return (
@@ -1,9 +1,10 @@
 'use client';

+import NotFound from '@/app/not-found';
+import { useRouter } from '@/hooks';
 import { useUser } from '@clerk/nextjs';
 import { useMutation, useQuery } from 'convex/react';
 import Image from 'next/image';
-import { useRouter } from '@/hooks';
 import { useEffect, useRef } from 'react';
 import { api } from '../../convex/_generated/api';
 import { Id } from '../../convex/_generated/dataModel';
@@ -62,8 +63,7 @@ export default function DisplayPost({
  }

  if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
-    // TODO: Return actual not found component
-    return <h1>Not Found</h1>;
+    return <NotFound />;
  }

  if (post !== undefined && user.isLoaded) {
@@ -1,5 +1,6 @@
 'use client';

+import NotFound from '@/app/not-found';
 import { useRouter } from '@/hooks';
 import { useUser } from '@clerk/nextjs';
 import { useMutation, useQuery } from 'convex/react';
@@ -22,8 +23,7 @@ export default function EditPostForm({ postId }: { postId: string }) {
  }

  if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
-    // TODO: Return actual not found component
-    return <h1>Not Found</h1>;
+    return <NotFound />;
  }

  async function submitAction({