add page not found

frontend/src/routes/(frontend)/[accountId]/[...]/index.tsx

@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik'
+import { loader$ } from '@builder.io/qwik-city'
+
+export const loader = loader$(({ redirect }) => {
+	redirect(303, '/not-found')
+})
+
+export default component$(() => {
+	loader.use()
+	return <></>
+})

frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx

@@ -11,10 +11,12 @@ import { Avatar } from '~/components/avatar'
 export const statusLoader = loader$<
 	{ DATABASE: D1Database; domain: string },
 	Promise<{ status: MastodonStatus; context: StatusContext }>
->(async ({ platform, params }) => {
+>(async ({ redirect, platform, params }) => {
 	const response = await statusAPI.handleRequest(platform.DATABASE, params.statusId)
 	const results = await response.text()
-	// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
+	if (!results) {
+		throw redirect(303, '/not-found')
+	}
 	return { status: JSON.parse(results), context: { ancestors: [], descendants: [] } }
 })
 

frontend/src/routes/(frontend)/[accountId]/index.tsx

@@ -1,8 +1,22 @@
 import { component$ } from '@builder.io/qwik'
-import { useLocation } from '@builder.io/qwik-city'
+import { loader$ } from '@builder.io/qwik-city'
+
+export const accountLoader = loader$(({ redirect, request }) => {
+	const params = new URL(request.url).searchParams
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const accountId = params.get('accountId')
+
+	redirect(303, '/not-found')
+
+	// TODO: retrieve the account details from the backend
+	const accountDetails = null
+
+	return accountDetails
+})
 
 export default component$(() => {
-	const location = useLocation()
+	const accountDetails = accountLoader.use()
 
-	return <div>account details {location.params.accountId}</div>
+	// TODO: Implement the account view
+	return <>{accountDetails.value && <div>account details</div>}</>
 })

frontend/src/routes/not-found/index.tsx

@@ -0,0 +1,22 @@
+import { component$ } from '@builder.io/qwik'
+import { DocumentHead } from '@builder.io/qwik-city'
+
+export default component$(() => {
+	return (
+		<div class="h-screen w-screen bg-wildebeest-600 grid place-items-center">
+			<h1 class="text-wildebeest-200 text-xl text-center mx-5">The page you are looking for isn't here.</h1>
+		</div>
+	)
+})
+
+export const head: DocumentHead = () => {
+	return {
+		title: 'Wildebeest Not Found',
+		meta: [
+			{
+				name: 'description',
+				content: 'Wildebeest Page Not Found',
+			},
+		],
+	}
+}