discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

feat: improve component structure and addded signal managment. Extract Article page Content into a separate block. Added createSignal and CreateEffect to track slug dynamically. Replace ifelse with Switch and Match.

Browse Source
This commit is contained in:
Stepan Vladovskiy 2024-09-30 16:35:15 +00:00
parent b91a1be989
commit 32ebcff5fe
1 changed files with 107 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/routes/[slug]/[...tab].tsx
View File

@ -1,6 +1,6 @@
import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router' import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router'
import { HttpStatusCode } from '@solidjs/start' import { HttpStatusCode } from '@solidjs/start'
import { ErrorBoundary, Show, Suspense, createEffect, on, onMount } from 'solid-js' import { ErrorBoundary, Show, Suspense, createEffect, on, onMount, Switch, Match, createSignal } from 'solid-js'
import { FourOuFourView } from '~/components/Views/FourOuFour' import { FourOuFourView } from '~/components/Views/FourOuFour'
import { Loading } from '~/components/_shared/Loading' import { Loading } from '~/components/_shared/Loading'
import { gaIdentity } from '~/config' import { gaIdentity } from '~/config'
@ -43,90 +43,115 @@ export type SlugPageProps = {
topics: Topic[] topics: Topic[]
} }
export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) { function ArticlePageContent(props: RouteSectionProps<ArticlePageProps>) {
if (props.params.slug.startsWith('@')) { const loc = useLocation()
console.debug('[routes] [slug]/[...tab] starts with @, render as author page') const { t } = useLocalize()
const patchedProps = { const data = createAsync(async () => {
...props, const result = props.data?.article || (await fetchShout(props.params.slug))
params: { return result
...props.params, })
slug: props.params.slug.slice(1, props.params.slug.length)
onMount(async () => {
console.debug('[ArticlePage] onMount')
if (gaIdentity && data()?.id) {
try {
await loadGAScript(gaIdentity)
initGA(gaIdentity)
} catch (error) {
console.warn('[routes] [slug]/[...tab] Failed to connect Google Analytics:', error)
} }
} as RouteSectionProps<AuthorPageProps> }
return <AuthorPage {...patchedProps} /> })
}
if (props.params.slug.startsWith('!')) { createEffect(
console.debug('[routes] [slug]/[...tab] starts with !, render as topic page') on(
const patchedProps = { data,
...props, (a?: Shout) => {
params: { if (!a?.id) return
...props.params, window?.gtag?.('event', 'page_view', {
slug: props.params.slug.slice(1, props.params.slug.length) page_title: a.title,
} page_location: window?.location.href || '',
} as RouteSectionProps<TopicPageProps> page_path: loc.pathname
return <TopicPage {...patchedProps} /> })
} },
{ defer: true }
function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
const loc = useLocation()
const { t } = useLocalize()
const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug)))
onMount(async () => {
if (gaIdentity && data()?.id) {
try {
await loadGAScript(gaIdentity)
initGA(gaIdentity)
} catch (error) {
console.warn('[routes] [slug]/[...tab] Failed to connect Google Analytics:', error)
}
}
})
createEffect(
on(
data,
(a?: Shout) => {
if (!a?.id) return
window?.gtag?.('event', 'page_view', {
page_title: a.title,
page_location: window?.location.href || '',
page_path: loc.pathname
})
},
{ defer: true }
)
) )
)
return ( return (
<ErrorBoundary fallback={() => <HttpStatusCode code={500} />}> <ErrorBoundary fallback={() => <HttpStatusCode code={500} />}>
<Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>
<Show <Show
when={data()?.id} when={data()?.id}
fallback={ fallback={
<PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}> <PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
<FourOuFourView /> <FourOuFourView />
<HttpStatusCode code={404} /> <HttpStatusCode code={404} />
</PageLayout>
}
>
<PageLayout
title={`${t('Discours')}${data()?.title ? ' :: ' : ''}${data()?.title || ''}`}
desc={descFromBody(data()?.body || '')}
keywords={keywordsFromTopics(data()?.topics as { title: string }[])}
headerTitle={data()?.title || ''}
slug={data()?.slug}
cover={data()?.cover || ''}
>
<ReactionsProvider>
<FullArticle article={data() as Shout} />
</ReactionsProvider>
</PageLayout> </PageLayout>
</Show> }
</Suspense> >
</ErrorBoundary> <PageLayout
) title={`${t('Discours')}${data()?.title ? ' :: ' : ''}${data()?.title || ''}`}
} desc={descFromBody(data()?.body || '')}
return <ArticlePage {...props} /> keywords={keywordsFromTopics(data()?.topics as { title: string }[])}
headerTitle={data()?.title || ''}
slug={data()?.slug}
cover={data()?.cover || ''}
>
<ReactionsProvider>
<FullArticle article={data() as Shout} />
</ReactionsProvider>
</PageLayout>
</Show>
</Suspense>
</ErrorBoundary>
)
} }
export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
console.debug('[routes] [slug]/[...tab] props:', props)
const { slug } = props.params
const [currentSlug, setCurrentSlug] = createSignal(props.params.slug);
createEffect(() => {
if (props.params.slug !== currentSlug()) {
setCurrentSlug(props.params.slug);
}
});
return (
<Switch fallback={<div>Loading...</div>}>
<Match when={currentSlug().startsWith('@')}>
<AuthorPage
{...{
...props,
params: {
...props.params,
slug: slug.slice(1),
},
} as RouteSectionProps<AuthorPageProps>}
/>
</Match>
<Match when={currentSlug().startsWith('!')}>
<TopicPage
{...{
...props,
params: {
...props.params,
slug: slug.slice(1),
},
} as RouteSectionProps<TopicPageProps>}
/>
</Match>
<Match when={!currentSlug().startsWith('@') && !currentSlug().startsWith('!')}>
<ArticlePageContent {...props} />
</Match>
<Match when={true}>
<ErrorBoundary fallback={() => <HttpStatusCode code={404} />}>
<FourOuFourView />
</ErrorBoundary>
</Match>
</Switch>
)
}