draft abstract topic slug page

src/routes/topic/[slug].tsx

@@ -0,0 +1,63 @@
+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