Merge pull request #361 from cloudflare/enable-about-and-settings

Enable about and settings pages + other small tweaks/improvements

frontend/src/components/layout/RightColumn/RightColumn.tsx

@@ -11,7 +11,7 @@ type LinkConfig = {
 }
 
 export default component$(() => {
-	const accessData = accessLoader.use().value
+	const accessData = accessLoader().value
 	const location = useLocation()
 
 	const renderNavLink = ({ iconName, linkText, linkTarget, linkActiveRegex }: LinkConfig) => {

frontend/src/routes/(admin)/settings/aliases/index.tsx

@@ -1,9 +1,8 @@
 import { component$, useStore, useSignal, $ } from '@builder.io/qwik'
 import { loader$ } from '@builder.io/qwik-city'
-import { WildebeestEnv } from '~/types'
 import { checkAuth } from '~/utils/checkAuth'
 
-export const loader = loader$<void, WildebeestEnv>(async ({ request, platform, redirect }) => {
+export const loader = loader$(async ({ request, platform, redirect }) => {
 	const isAuthorized = await checkAuth(request, platform)
 
 	if (!isAuthorized) {

frontend/src/routes/(admin)/settings/layout.tsx

@@ -1,16 +1,7 @@
 import { component$, Slot } from '@builder.io/qwik'
 import { WildebeestLogo } from '~/components/MastodonLogo'
 
-import { loader$ } from '@builder.io/qwik-city'
-import { getNotFoundHtml } from '~/utils/getNotFoundHtml/getNotFoundHtml'
-
-export const loader = loader$(({ html }) => {
-	html(404, getNotFoundHtml())
-})
-
 export default component$(() => {
-	loader()
-
 	return (
 		<div class="flex w-screen min-h-screen justify-center">
 			<AccountSidebar />

frontend/src/routes/(admin)/settings/migration/index.tsx

@@ -1,9 +1,8 @@
 import { component$ } from '@builder.io/qwik'
 import { loader$ } from '@builder.io/qwik-city'
-import { WildebeestEnv } from '~/types'
 // import { checkAuth } from '~/utils/checkAuth'
 
-export const loader = loader$<WildebeestEnv, void>(async ({ redirect }) => {
+export const loader = loader$(async ({ redirect }) => {
 	// Hiding this page for now
 	redirect(303, '/explore')
 

frontend/src/routes/(admin)/settings/server-settings/about/index.tsx

@@ -16,7 +16,7 @@ export const action = action$(async (data, { request, platform }) => {
 	let success = false
 	try {
 		const response = await handleRequestPost(
-			getDatabase(platform),
+			await getDatabase(platform),
 			new Request(request, { body: JSON.stringify(data) })
 		)
 		success = response.ok

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

@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik'
-import { Database, getDatabase } from 'wildebeest/backend/src/database'
+import { getDatabase } from 'wildebeest/backend/src/database'
 import { MastodonStatus, StatusContext } from '~/types'
 import Status from '~/components/Status'
 import * as statusAPI from 'wildebeest/functions/api/v1/statuses/[id]'
@@ -12,8 +12,7 @@ import { getDocumentHead } from '~/utils/getDocumentHead'
 import { Person } from 'wildebeest/backend/src/activitypub/actors'
 
 export const statusLoader = loader$<
-	Promise<{ status: MastodonStatus; statusTextContent: string; context: StatusContext }>,
-	{ DATABASE: Database }
+	Promise<{ status: MastodonStatus; statusTextContent: string; context: StatusContext }>
 >(async ({ request, html, platform, params }) => {
 	const domain = new URL(request.url).hostname
 	let statusText = ''

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

@@ -11,8 +11,7 @@ export const statusesLoader = loader$<
 	Promise<{
 		accountId: string
 		statuses: MastodonStatus[]
-	}>,
-	{ DATABASE: D1Database }
+	}>
 >(async ({ platform, request, html }) => {
 	let statuses: MastodonStatus[] = []
 	let accountId = ''

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

@@ -12,8 +12,7 @@ export const statusesLoader = loader$<
 	Promise<{
 		accountId: string
 		statuses: MastodonStatus[]
-	}>,
-	{ DATABASE: D1Database }
+	}>
 >(async ({ platform, request, html }) => {
 	let statuses: MastodonStatus[] = []
 	let accountId = ''

frontend/src/routes/(frontend)/about/index.tsx

@@ -5,7 +5,6 @@ import { getDomain } from 'wildebeest/backend/src/utils/getDomain'
 import { handleRequestGet as settingsHandleRequestGet } from 'wildebeest/functions/api/wb/settings/server/server'
 import { handleRequestGet as rulesHandleRequestGet } from 'wildebeest/functions/api/v1/instance/rules'
 import { Accordion } from '~/components/Accordion/Accordion'
-// import { AccountCard } from '~/components/AccountCard/AccountCard'
 import { HtmlContent } from '~/components/HtmlContent/HtmlContent'
 import { ServerSettingsData } from '~/routes/(admin)/settings/server-settings/layout'
 import { Account } from '~/types'
@@ -15,7 +14,6 @@ import { getAdmins } from 'wildebeest/functions/api/wb/settings/server/admins'
 import { emailSymbol } from 'wildebeest/backend/src/activitypub/actors'
 import { loadLocalMastodonAccount } from 'wildebeest/backend/src/mastodon/account'
 import { AccountCard } from '~/components/AccountCard/AccountCard'
-import { getNotFoundHtml } from '~/utils/getNotFoundHtml/getNotFoundHtml'
 
 type AboutInfo = {
 	image: string
@@ -27,9 +25,7 @@ type AboutInfo = {
 	}
 }
 
-export const aboutInfoLoader = loader$<Promise<AboutInfo>>(async ({ resolveValue, request, platform, html }) => {
-	throw html(404, getNotFoundHtml())
-
+export const aboutInfoLoader = loader$<Promise<AboutInfo>>(async ({ resolveValue, request, platform }) => {
 	// TODO: fetching the instance for the thumbnail, but that should be part of the settings
 	const instance = await resolveValue(instanceLoader)
 

frontend/src/routes/(frontend)/explore/index.tsx

@@ -7,21 +7,19 @@ import type { MastodonStatus } from '~/types'
 import { getDocumentHead } from '~/utils/getDocumentHead'
 import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
 
-export const statusesLoader = loader$<Promise<MastodonStatus[]>, { DATABASE: D1Database; domain: string }>(
-	async ({ platform, html }) => {
-		try {
-			// TODO: use the "trending" API endpoint here.
-			const response = await timelines.handleRequest(platform.domain, await getDatabase(platform))
-			const results = await response.text()
-			// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
-			return JSON.parse(results) as MastodonStatus[]
-		} catch (e: unknown) {
-			const error = e as { stack: string; cause: string }
-			console.warn(error.stack, error.cause)
-			throw html(500, getErrorHtml('The timeline is unavailable, please try again later'))
-		}
+export const statusesLoader = loader$<Promise<MastodonStatus[]>>(async ({ platform, html }) => {
+	try {
+		// TODO: use the "trending" API endpoint here.
+		const response = await timelines.handleRequest(platform.domain, await getDatabase(platform))
+		const results = await response.text()
+		// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
+		return JSON.parse(results) as MastodonStatus[]
+	} catch (e: unknown) {
+		const error = e as { stack: string; cause: string }
+		console.warn(error.stack, error.cause)
+		throw html(500, getErrorHtml('The timeline is unavailable, please try again later'))
 	}
-)
+})
 
 export default component$(() => {
 	const statuses = statusesLoader().value

frontend/src/routes/(frontend)/public/index.tsx

@@ -8,21 +8,19 @@ import { StatusesPanel } from '~/components/StatusesPanel/StatusesPanel'
 import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
 import { getDatabase } from 'wildebeest/backend/src/database'
 
-export const statusesLoader = loader$<Promise<MastodonStatus[]>, { DATABASE: D1Database; domain: string }>(
-	async ({ platform, html }) => {
-		try {
-			// TODO: use the "trending" API endpoint here.
-			const response = await timelines.handleRequest(platform.domain, await getDatabase(platform))
-			const results = await response.text()
-			// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
-			return JSON.parse(results) as MastodonStatus[]
-		} catch (e: unknown) {
-			const error = e as { stack: string; cause: string }
-			console.warn(error.stack, error.cause)
-			throw html(500, getErrorHtml('The public timeline is unavailable'))
-		}
+export const statusesLoader = loader$<Promise<MastodonStatus[]>>(async ({ platform, html }) => {
+	try {
+		// TODO: use the "trending" API endpoint here.
+		const response = await timelines.handleRequest(platform.domain, await getDatabase(platform))
+		const results = await response.text()
+		// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
+		return JSON.parse(results) as MastodonStatus[]
+	} catch (e: unknown) {
+		const error = e as { stack: string; cause: string }
+		console.warn(error.stack, error.cause)
+		throw html(500, getErrorHtml('The public timeline is unavailable'))
 	}
-)
+})
 
 export default component$(() => {
 	const statuses = statusesLoader().value

frontend/src/routes/(frontend)/public/local/index.tsx

@@ -8,21 +8,19 @@ import { getDocumentHead } from '~/utils/getDocumentHead'
 import { StatusesPanel } from '~/components/StatusesPanel/StatusesPanel'
 import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
 
-export const statusesLoader = loader$<Promise<MastodonStatus[]>, { DATABASE: D1Database; domain: string }>(
-	async ({ platform, html }) => {
-		try {
-			// TODO: use the "trending" API endpoint here.
-			const response = await timelines.handleRequest(platform.domain, await getDatabase(platform), { local: true })
-			const results = await response.text()
-			// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
-			return JSON.parse(results) as MastodonStatus[]
-		} catch (e: unknown) {
-			const error = e as { stack: string; cause: string }
-			console.warn(error.stack, error.cause)
-			throw html(500, getErrorHtml('The local timeline is unavailable'))
-		}
+export const statusesLoader = loader$<Promise<MastodonStatus[]>>(async ({ platform, html }) => {
+	try {
+		// TODO: use the "trending" API endpoint here.
+		const response = await timelines.handleRequest(platform.domain, await getDatabase(platform), { local: true })
+		const results = await response.text()
+		// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
+		return JSON.parse(results) as MastodonStatus[]
+	} catch (e: unknown) {
+		const error = e as { stack: string; cause: string }
+		console.warn(error.stack, error.cause)
+		throw html(500, getErrorHtml('The local timeline is unavailable'))
 	}
-)
+})
 
 export default component$(() => {
 	const statuses = statusesLoader().value

frontend/src/routes/(frontend)/tags/[tag]/index.tsx

@@ -8,7 +8,7 @@ import StickyHeader from '~/components/StickyHeader/StickyHeader'
 import { MastodonStatus } from '~/types'
 import { getDocumentHead } from '~/utils/getDocumentHead'
 
-export const loader = loader$<Promise<{ tag: string; statuses: MastodonStatus[] }>, { DATABASE: D1Database }>(
+export const loader = loader$<Promise<{ tag: string; statuses: MastodonStatus[] }>>(
 	async ({ request, platform, params }) => {
 		const tag = params.tag
 		const response = await handleRequest(await getDatabase(platform), request, getDomain(request.url), tag)

frontend/src/routes/layout.tsx

@@ -1,7 +1,6 @@
 import { component$, Slot } from '@builder.io/qwik'
 import { loader$ } from '@builder.io/qwik-city'
 import * as access from 'wildebeest/backend/src/access'
-import { WildebeestEnv } from '~/types'
 import { checkAuth } from '~/utils/checkAuth'
 
 type AccessLoaderData = {
@@ -9,7 +8,7 @@ type AccessLoaderData = {
 	isAuthorized: boolean
 }
 
-export const accessLoader = loader$<WildebeestEnv, Promise<AccessLoaderData>>(async ({ platform, request }) => {
+export const accessLoader = loader$<Promise<AccessLoaderData>>(async ({ platform, request }) => {
 	const isAuthorized = await checkAuth(request, platform)
 
 	return {