Stevan/conve-x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add catch all 404 component

Browse Source
This commit is contained in:
Stevan Freeborn
2023-09-16 12:49:29 -05:00
parent 5b40a37043
commit ab3858cd8c
6 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/error.tsx
+3
View File
@@ -7,6 +7,8 @@ export default function Error({
error: Error; error: Error;
reset: () => void; reset: () => void;
}) { }) {
console.log(error);
return ( return (
<div className="flex flex-col justify-center items-center flex-1"> <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"> <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. Oops it looks like we&apos;ve run into an issue.
</h2> </h2>
<button <button
type="button"
className="px-3 py-1 text-white bg-primary-accent rounded-md" className="px-3 py-1 text-white bg-primary-accent rounded-md"
onClick={() => reset()} onClick={() => reset()}
> >
src/app/global-error.tsx
+2
View File
@@ -11,6 +11,8 @@ export default function GlobalError({
error: Error; error: Error;
reset: () => void; reset: () => void;
}) { }) {
console.log(error);
return ( return (
<html lang="en" className="w-full h-full"> <html lang="en" className="w-full h-full">
<body <body
src/app/not-found.tsx
+24
View File
@@ -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>
);
}
src/app/profile/[id]/page.tsx
+2 -2
View File
@@ -1,3 +1,4 @@
import NotFound from '@/app/not-found';
import UserPosts from '@/components/UserPosts'; import UserPosts from '@/components/UserPosts';
import UserProfile from '@/components/UserProfile'; import UserProfile from '@/components/UserProfile';
import { getConvexClient } from '@/lib/convex'; import { getConvexClient } from '@/lib/convex';
@@ -19,8 +20,7 @@ export default async function UserProfilePage({
}); });
if (user === 'USER_NOT_FOUND') { if (user === 'USER_NOT_FOUND') {
// TODO: Show real not found component return <NotFound />;
return <div>Not Found</div>;
} }
return ( return (
src/components/DisplayPost.tsx
+3 -3
View File
@@ -1,9 +1,10 @@
'use client'; 'use client';
import NotFound from '@/app/not-found';
import { useRouter } from '@/hooks';
import { useUser } from '@clerk/nextjs'; import { useUser } from '@clerk/nextjs';
import { useMutation, useQuery } from 'convex/react'; import { useMutation, useQuery } from 'convex/react';
import Image from 'next/image'; import Image from 'next/image';
import { useRouter } from '@/hooks';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { api } from '../../convex/_generated/api'; import { api } from '../../convex/_generated/api';
import { Id } from '../../convex/_generated/dataModel'; 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') { if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component return <NotFound />;
return <h1>Not Found</h1>;
} }
if (post !== undefined && user.isLoaded) { if (post !== undefined && user.isLoaded) {
src/components/EditPostForm.tsx
+2 -2
View File
@@ -1,5 +1,6 @@
'use client'; 'use client';
import NotFound from '@/app/not-found';
import { useRouter } from '@/hooks'; import { useRouter } from '@/hooks';
import { useUser } from '@clerk/nextjs'; import { useUser } from '@clerk/nextjs';
import { useMutation, useQuery } from 'convex/react'; 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') { if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component return <NotFound />;
return <h1>Not Found</h1>;
} }
async function submitAction({ async function submitAction({