2023-02-14 11:49:14 +00:00
|
|
|
import { $, component$ } from '@builder.io/qwik'
|
2022-12-05 20:14:56 +00:00
|
|
|
import { MastodonStatus } from '~/types'
|
|
|
|
import * as timelines from 'wildebeest/functions/api/v1/timelines/public'
|
2023-02-10 11:52:21 +00:00
|
|
|
import { DocumentHead, loader$ } from '@builder.io/qwik-city'
|
2022-12-05 20:14:56 +00:00
|
|
|
import StickyHeader from '~/components/StickyHeader/StickyHeader'
|
2023-02-10 11:52:21 +00:00
|
|
|
import { getDocumentHead } from '~/utils/getDocumentHead'
|
2023-02-14 11:49:14 +00:00
|
|
|
import { StatusesPanel } from '~/components/StatusesPanel/StatusesPanel'
|
2023-02-23 12:18:37 +00:00
|
|
|
import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
|
2023-02-24 09:41:53 +00:00
|
|
|
import { getDatabase } from 'wildebeest/backend/src/database'
|
2022-12-05 20:14:56 +00:00
|
|
|
|
2023-02-17 17:02:18 +00:00
|
|
|
export const statusesLoader = loader$<Promise<MastodonStatus[]>, { DATABASE: D1Database; domain: string }>(
|
2023-02-03 22:26:30 +00:00
|
|
|
async ({ platform, html }) => {
|
|
|
|
try {
|
|
|
|
// TODO: use the "trending" API endpoint here.
|
2023-02-27 17:37:03 +00:00
|
|
|
const response = await timelines.handleRequest(platform.domain, await getDatabase(platform))
|
2023-02-03 22:26:30 +00:00
|
|
|
const results = await response.text()
|
|
|
|
// Manually parse the JSON to ensure that Qwik finds the resulting objects serializable.
|
|
|
|
return JSON.parse(results) as MastodonStatus[]
|
2023-02-23 12:18:37 +00:00
|
|
|
} 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'))
|
2023-02-03 22:26:30 +00:00
|
|
|
}
|
2022-12-05 20:14:56 +00:00
|
|
|
}
|
|
|
|
)
|
|
|
|
|
|
|
|
export default component$(() => {
|
2023-02-17 17:02:18 +00:00
|
|
|
const statuses = statusesLoader().value
|
2022-12-05 20:14:56 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<StickyHeader>
|
2023-01-09 22:49:18 +00:00
|
|
|
<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center text-white">
|
2023-01-10 17:55:57 +00:00
|
|
|
<i style={{ width: '1.25rem', height: '1rem' }} class="fa fa-globe fa-fw mr-3 w-5 h-4" />
|
2022-12-05 20:14:56 +00:00
|
|
|
<span>Federated timeline</span>
|
|
|
|
</div>
|
|
|
|
</StickyHeader>
|
2023-02-14 11:49:14 +00:00
|
|
|
<StatusesPanel
|
|
|
|
initialStatuses={statuses}
|
|
|
|
fetchMoreStatuses={$(async (numOfCurrentStatuses: number) => {
|
|
|
|
let statuses: MastodonStatus[] = []
|
|
|
|
try {
|
|
|
|
const response = await fetch(`/api/v1/timelines/public?offset=${numOfCurrentStatuses}`)
|
|
|
|
if (response.ok) {
|
|
|
|
const results = await response.text()
|
|
|
|
statuses = JSON.parse(results)
|
|
|
|
}
|
|
|
|
} catch {
|
|
|
|
/* empty */
|
|
|
|
}
|
|
|
|
return statuses
|
|
|
|
})}
|
|
|
|
/>
|
2022-12-05 20:14:56 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
})
|
2023-02-10 11:52:21 +00:00
|
|
|
|
2023-02-20 10:10:58 +00:00
|
|
|
export const requestUrlLoader = loader$(async ({ request }) => request.url)
|
2023-02-10 11:52:21 +00:00
|
|
|
|
2023-02-17 17:02:18 +00:00
|
|
|
export const head: DocumentHead = ({ resolveValue }) => {
|
2023-02-20 10:10:58 +00:00
|
|
|
const url = resolveValue(requestUrlLoader)
|
2023-02-10 11:52:21 +00:00
|
|
|
return getDocumentHead({
|
|
|
|
title: 'Federated timeline - Wildebeest',
|
|
|
|
og: {
|
|
|
|
url,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|