64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
|
import { RouteSectionProps, createAsync } from '@solidjs/router'
|
||
|
|
import { ErrorBoundary, Suspense, createMemo, createReaction } from 'solid-js'
|
||
|
|
import { FourOuFourView } from '~/components/Views/FourOuFour'
|
||
|
|
import { TopicView } from '~/components/Views/Topic'
|
||
|
|
import { Loading } from '~/components/_shared/Loading'
|
||
|
|
import { PageLayout } from '~/components/_shared/PageLayout'
|
||
|
|
import { useLocalize } from '~/context/localize'
|
||
|
|
import { ReactionsProvider } from '~/context/reactions'
|
||
|
|
import { useTopics } from '~/context/topics'
|
||
|
|
import { LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen'
|
||
|
|
import { loadShouts } from '~/lib/api'
|
||
|
|
import { SHOUTS_PER_PAGE } from '../(home)'
|
||
|
|
|
||
|
|
|
||
|
|
const fetchTopicShouts = async (slug: string) => {
|
||
|
|
const opts: LoadShoutsOptions = { filters: { topic: slug }, limit: SHOUTS_PER_PAGE }
|
||
|
|
const shoutsLoader = loadShouts(opts)
|
||
|
|
return await shoutsLoader()
|
||
|
|
}
|
||
|
|
|
||
|
|
export const route = {
|
||
|
|
load: async ({ params }: RouteSectionProps<{ articles: Shout[] }>) => await fetchTopicShouts(params.slug)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const TopicPage = (props: RouteSectionProps<{ articles: Shout[] }>) => {
|
||
|
|
const articles = createAsync(async () => props.data.articles || (await fetchTopicShouts(props.params.slug)) || [])
|
||
|
|
const { topicEntities } = useTopics()
|
||
|
|
const { t } = useLocalize()
|
||
|
|
const topic = createMemo(() => topicEntities?.()[props.params.slug])
|
||
|
|
const title = createMemo(() => `${t('Discours')}: ${topic()?.title || ''}`)
|
||
|
|
|
||
|
|
// docs: `a side effect that is run the first time the expression
|
||
|
|
// wrapped by the returned tracking function is notified of a change`
|
||
|
|
createReaction(() => {
|
||
|
|
if (topic()) {
|
||
|
|
console.debug('[routes.slug] article signal changed once')
|
||
|
|
window.gtag?.('event', 'page_view', {
|
||
|
|
page_title: topic()?.title,
|
||
|
|
page_location: window.location.href,
|
||
|
|
page_path: window.location.pathname
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return (
|
||
|
|
<ErrorBoundary fallback={(_err) => <FourOuFourView />}>
|
||
|
|
<Suspense fallback={<Loading />}>
|
||
|
|
<PageLayout
|
||
|
|
title={title()}
|
||
|
|
headerTitle={topic()?.title || ''}
|
||
|
|
slug={topic()?.slug}
|
||
|
|
articleBody={topic()?.body || ''}
|
||
|
|
cover={topic()?.pic || ''}
|
||
|
|
>
|
||
|
|
<ReactionsProvider>
|
||
|
|
<TopicView topic={topic() as Topic} topicSlug={props.params.slug} shouts={articles() as Shout[]}/>
|
||
|
|
</ReactionsProvider>
|
||
|
|
</PageLayout>
|
||
|
|
</Suspense>
|
||
|
|
</ErrorBoundary>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Page = TopicPage
|