beautify not found page

petar-i-todorov · Jan 2, 2024 · 2f8c1f9 · 2f8c1f9
1 parent a9d1725
commit 2f8c1f9
Show file tree

Hide file tree

Showing 7 changed files with 16,955 additions and 16,920 deletions.
diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx
@@ -4,24 +4,33 @@ import { captureRemixErrorBoundaryError } from '@sentry/remix'
 export function GeneralErrorBoundary({
 	specialCases,
 }: {
-	specialCases?: { [key: number]: string }
+	specialCases?: { [key: number]: string | JSX.Element }
 }) {
 	const error = useRouteError()
 	console.error(error)
 	captureRemixErrorBoundaryError(error)
 	const isResponse = isRouteErrorResponse(error)
 	let errorMessage = 'Something went wrong. Please, try again later.'
 	const isClientError = isResponse && error.status >= 400 && error.status < 500
+	const specialCase = isClientError ? specialCases?.[error.status] : undefined
 	if (isResponse && isClientError) {
-		if (specialCases?.[error.status]) {
-			errorMessage = specialCases[error.status]
+		if (typeof specialCase === 'string') {
+			errorMessage = specialCase
 		} else {
 			errorMessage = error.statusText
 		}
 	}
+	let children: undefined | string | JSX.Element
+	if (typeof specialCase !== 'undefined' && typeof specialCase !== 'string') {
+		children = specialCase
+	} else {
+		children = isClientError
+			? `${error.status} - ${errorMessage}`
+			: errorMessage
+	}
 	return (
 		<div className="absolute bottom-0 left-0 right-0 top-0 m-auto flex h-full w-full items-center justify-center text-3xl font-semibold">
-			{isClientError ? `${error.status} - ${errorMessage}` : errorMessage}
+			{children}
 		</div>
 	)
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -22,7 +22,8 @@ import {
 	useLoaderData,
 } from '@remix-run/react'
 import cookie from 'cookie'
-import { Index as Confetti } from 'confetti-react'
+// import { Index as Confetti } from 'confetti-react'
+// import { useWindowSize } from '@uidotdev/usehooks'
 import { getUser, useOptionalUser } from '#app/utils/use-user.tsx'
 import HamburgerMenu from '#app/components/hamburger-menu-lg.tsx'
 import { honeypot } from '#app/utils/honeypot.server.ts'
@@ -203,25 +204,9 @@ function App() {
 
 	const userData = useOptionalUser()
 
-	const [width, setWidth] = React.useState(0)
-	const [height, setHeight] = React.useState(0)
+	// const { width, height } = useWindowSize()
 
-	React.useEffect(() => {
-		setWidth(document.documentElement.clientWidth)
-		setHeight(window.innerHeight)
-
-		const onResize = () => {
-			setWidth(document.documentElement.clientWidth)
-			setHeight(window.innerHeight)
-		}
-
-		window.addEventListener('resize', onResize)
-
-		return () => window.removeEventListener('resize', onResize)
-	}, [])
-
-	const { confetti, ENV, theme, categories, pastLgHint } =
-		useLoaderData<typeof loader>()
+	const { ENV, theme, categories, pastLgHint } = useLoaderData<typeof loader>()
 	const navbarOptions = [
 		...categories.map(category => ({
 			...category,
@@ -257,19 +242,19 @@ function App() {
 						
 						if (!("ee_theme" in keys) || !("ee_past-lg" in keys)) {
 						    if (!("ee_theme" in keys)) {
-						        const preferredTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+						        const preferredTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";path="/";
 						        document.cookie = "ee_theme=" + preferredTheme + ";max-age=60 * 60 * 24 * 30";
 						    }
 						
 						    if (!("ee_past-lg" in keys)) {
 						        const pastLgBreakpoint = window.matchMedia("(max-width: 1100px)").matches;
-						        document.cookie = "ee_past-lg=" + pastLgBreakpoint + ";max-age=60 * 60 * 24 * 30";
+						        document.cookie = "ee_past-lg=" + pastLgBreakpoint + ";max-age=60 * 60 * 24 * 30";path="/";
 						    }
 						
 						    location.reload();
 						}
 						if(keys["ee_past-lg"] !== String(window.matchMedia("(max-width: 1100px)").matches)) {
-							document.cookie = "ee_past-lg=" + window.matchMedia("(max-width: 1100px)").matches + ";max-age=60 * 60 * 24 * 30";
+							document.cookie = "ee_past-lg=" + window.matchMedia("(max-width: 1100px)").matches + ";max-age=60 * 60 * 24 * 30";path="/";
 							location.reload();
 						}
 				`,
@@ -348,14 +333,14 @@ function App() {
 				/>
 			</head>
 			<body className="min-h-[100dvh] w-full">
-				<Confetti
+				{/* <Confetti
 					key={confetti}
 					run={Boolean(confetti)}
 					recycle={false}
-					width={width}
-					height={height}
+					width={width ?? 0}
+					height={height ?? 0}
 					numberOfPieces={500}
-				/>
+				/> */}
 				<header className="w-full bg-background-dark px-[10px] text-foreground-dark">
 					<nav className="relative mx-auto flex h-[50px] w-[1290px] items-center justify-between text-sm font-semibold 1.5xl:w-full">
 						<div className="flex items-center justify-between gap-[25px]">

diff --git a/app/routes/articles_.$categorySlug_.$postSlug.tsx b/app/routes/articles_.$categorySlug_.$postSlug.tsx
@@ -3,14 +3,14 @@ import {
 	type LinksFunction,
 	type MetaFunction,
 	json,
-	redirect,
 } from '@remix-run/node'
 import {
 	Form,
 	Link,
 	useActionData,
 	useLoaderData,
 	useLocation,
+	useParams,
 	useRouteLoaderData,
 } from '@remix-run/react'
 import format from 'date-fns/format/index.js'
@@ -37,14 +37,41 @@ import { BlockContent } from '#app/sanity/block-content.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 
 export function ErrorBoundary() {
-	return <GeneralErrorBoundary />
+	const params = useParams()
+
+	return (
+		<GeneralErrorBoundary
+			specialCases={{
+				404: (
+					<div className="flex flex-col items-center gap-5 text-lg">
+						<img
+							src="/images/jackie-chan-confused.jpg"
+							alt="Jackie Chan looking confused meme"
+							width="400"
+							height="400"
+							className="object-cover object-center"
+						/>
+						<h1 className="text-center">
+							Oops, we couldn't find the post you're looking for. Maybe it's
+							been deleted or moved to a different URL
+						</h1>
+						<CustomLink to={`/articles/${params.categorySlug}`}>
+							Search for other posts
+						</CustomLink>
+					</div>
+				),
+			}}
+		/>
+	)
 }
 
 type ExtractFromArray<T> = T extends Array<infer U> ? U : never
 type Post = ExtractFromArray<Posts>
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-	const title = `${data?.post.title} | Epic Esports`
+	const title = `${
+		data?.post.title ? data.post.title : 'Not Found'
+	} | Epic Esports`
 	const description = data?.post.subtitle
 	const image = data?.post.banner.url
 	const imageAlt = data?.post.banner.alt
@@ -114,8 +141,8 @@ export const loader = async ({ params }: DataFunctionArgs) => {
 
 	const { data: post } = await loadQuery<Post>(POST_QUERY)
 
-	if (!post.id) {
-		throw redirect(`/${params.categoryName}`)
+	if (!post?.id) {
+		throw json({ message: 'Post not found' }, { status: 404 })
 	}
 
 	// post may exist in Sanity