kopia lustrzana https://github.com/cloudflare/wildebeest
70 wiersze
2.2 KiB
TypeScript
70 wiersze
2.2 KiB
TypeScript
import { $, component$ } from '@builder.io/qwik'
|
|
import { DocumentHead, loader$ } from '@builder.io/qwik-city'
|
|
import { getDatabase } from 'wildebeest/backend/src/database'
|
|
import { getDomain } from 'wildebeest/backend/src/utils/getDomain'
|
|
import { handleRequest } from 'wildebeest/functions/api/v1/timelines/tag/[tag]'
|
|
import { StatusesPanel } from '~/components/StatusesPanel/StatusesPanel'
|
|
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 }>(
|
|
async ({ request, platform, params }) => {
|
|
const tag = params.tag
|
|
const response = await handleRequest(await getDatabase(platform), request, getDomain(request.url), tag)
|
|
const results = await response.text()
|
|
const statuses: MastodonStatus[] = JSON.parse(results)
|
|
return { tag, statuses }
|
|
}
|
|
)
|
|
|
|
export default component$(() => {
|
|
const loaderData = loader()
|
|
|
|
return (
|
|
<>
|
|
<div class="flex flex-col flex-1">
|
|
<StickyHeader withBackButton backButtonPlacement="end">
|
|
<h2 class="text-reg text-md m-0 p-4 flex bg-wildebeest-700">
|
|
<i class="fa fa-hashtag fa-fw mr-3 w-5 leading-tight inline-block" />
|
|
<span>{loaderData.value.tag}</span>
|
|
</h2>
|
|
</StickyHeader>
|
|
<StatusesPanel
|
|
initialStatuses={loaderData.value.statuses}
|
|
fetchMoreStatuses={$(async (numOfCurrentStatuses: number) => {
|
|
let statuses: MastodonStatus[] = []
|
|
try {
|
|
const response = await fetch(
|
|
`/api/v1/timelines/tags/${loaderData.value.tag}/?offset=${numOfCurrentStatuses}`
|
|
)
|
|
if (response.ok) {
|
|
const results = await response.text()
|
|
statuses = JSON.parse(results)
|
|
}
|
|
} catch {
|
|
/* empty */
|
|
}
|
|
return statuses
|
|
})}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export const requestUrlLoader = loader$(async ({ request }) => request.url)
|
|
|
|
export const head: DocumentHead = ({ resolveValue }) => {
|
|
const { tag } = resolveValue(loader)
|
|
const url = resolveValue(requestUrlLoader)
|
|
|
|
return getDocumentHead({
|
|
title: `#${tag} - Wildebeest`,
|
|
description: `#${tag} tag page - Wildebeest`,
|
|
og: {
|
|
url,
|
|
},
|
|
})
|
|
}
|