debug: With load topics and logs in slug tab to see why it is not loading topic from user page
This commit is contained in:
parent
6dc25260bb
commit
aa11c8d8b8
|
|
@ -1,11 +1,12 @@
|
|||
import { RouteDefinition, RouteSectionProps, useLocation, useParams } from '@solidjs/router'
|
||||
import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router'
|
||||
import { HttpStatusCode } from '@solidjs/start'
|
||||
import { ErrorBoundary, Show, Suspense, createEffect, onMount } from 'solid-js'
|
||||
import { ErrorBoundary, Show, Suspense, createEffect, on, onMount } from 'solid-js'
|
||||
import { FourOuFourView } from '~/components/Views/FourOuFour'
|
||||
import { Loading } from '~/components/_shared/Loading'
|
||||
import { gaIdentity } from '~/config'
|
||||
import { useLocalize } from '~/context/localize'
|
||||
import { getShout } from '~/graphql/api/public'
|
||||
import { useTopics } from '~/context/topics' // Import Topics context
|
||||
import type { Author, Reaction, Shout, Topic } from '~/graphql/schema/core.gen'
|
||||
import { initGA, loadGAScript } from '~/utils/ga'
|
||||
import { descFromBody, keywordsFromTopics } from '~/utils/meta'
|
||||
|
|
@ -43,104 +44,137 @@ export type SlugPageProps = {
|
|||
topics: Topic[]
|
||||
}
|
||||
|
||||
export default function SlugPage(props: RouteSectionProps<SlugPageProps>) {
|
||||
const params = useParams()
|
||||
export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
|
||||
const { topicEntities, loadTopics } = useTopics() // Get topics context
|
||||
const slug = props.params.slug
|
||||
|
||||
if (params.slug.startsWith('@')) {
|
||||
// Handle author page if slug starts with '@'
|
||||
if (slug.startsWith('@')) {
|
||||
console.debug('[routes] [slug]/[...tab] starts with @, render as author page')
|
||||
const patchedProps = {
|
||||
...props,
|
||||
params: {
|
||||
...props.params,
|
||||
slug: params.slug.slice(1)
|
||||
slug: slug.slice(1)
|
||||
}
|
||||
} as RouteSectionProps<AuthorPageProps>
|
||||
return <AuthorPage {...patchedProps} />
|
||||
}
|
||||
|
||||
if (params.slug.startsWith('!')) {
|
||||
// Handle topic page if slug starts with '!'
|
||||
if (slug.startsWith('!')) {
|
||||
console.debug('[routes] [slug]/[...tab] starts with !, render as topic page')
|
||||
|
||||
const topicSlug = slug.slice(1) // Remove '!' from slug
|
||||
const topic = topicEntities()[topicSlug] // Check if the topic is already loaded
|
||||
|
||||
// If the topic is not loaded, fetch topics
|
||||
if (!topic) {
|
||||
onMount(async () => {
|
||||
console.debug('Loading topics for the first time...')
|
||||
await loadTopics() // Load topics if not already available
|
||||
})
|
||||
|
||||
return <Loading /> // Show a loading state while fetching the topics
|
||||
}
|
||||
|
||||
const patchedProps = {
|
||||
...props,
|
||||
params: {
|
||||
...props.params,
|
||||
slug: params.slug.slice(1)
|
||||
slug: topicSlug
|
||||
}
|
||||
} as RouteSectionProps<TopicPageProps>
|
||||
return <TopicPage {...patchedProps} />
|
||||
}
|
||||
|
||||
return <ArticlePage {...props} />
|
||||
}
|
||||
// Handle topic pages without '!' or '@'
|
||||
if (!slug.startsWith('@') && !slug.startsWith('!')) {
|
||||
console.debug('[routes] [slug]/[...tab] regular topic page')
|
||||
|
||||
function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
|
||||
const loc = useLocation()
|
||||
const { t } = useLocalize()
|
||||
const params = useParams()
|
||||
const topic = topicEntities()[slug] // Check if the topic is already loaded
|
||||
|
||||
console.debug('Initial slug from useParams:', params.slug)
|
||||
// If the topic is not loaded, trigger topic loading
|
||||
if (!topic) {
|
||||
onMount(async () => {
|
||||
console.debug('Topic not found, loading topics...')
|
||||
await loadTopics()
|
||||
})
|
||||
|
||||
const [data, setData] = createSignal<Shout | undefined>(undefined)
|
||||
return <Loading /> // Show a loading state while fetching the topics
|
||||
}
|
||||
|
||||
const fetchData = async (slug: string) => {
|
||||
console.debug('Fetching article with slug (useParams):', slug)
|
||||
const result = await fetchShout(slug)
|
||||
console.debug('Fetched article data (useParams):', result)
|
||||
setData(result)
|
||||
const patchedProps = {
|
||||
...props,
|
||||
params: {
|
||||
...props.params,
|
||||
slug
|
||||
}
|
||||
} as RouteSectionProps<TopicPageProps>
|
||||
return <TopicPage {...patchedProps} />
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.debug('onMount triggered')
|
||||
fetchData(params.slug)
|
||||
})
|
||||
// ArticlePage logic for rendering articles if neither `@` nor `!` is in the slug
|
||||
function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
|
||||
const loc = useLocation()
|
||||
const { t } = useLocalize()
|
||||
const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug)))
|
||||
|
||||
createEffect(() => {
|
||||
console.debug('Slug changed (useParams):', params.slug)
|
||||
fetchData(params.slug)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
const article = data()
|
||||
if (!article?.id) return
|
||||
console.debug('Page view event for article:', article)
|
||||
window?.gtag?.('event', 'page_view', {
|
||||
page_title: article.title,
|
||||
page_location: window?.location.href || '',
|
||||
page_path: loc.pathname
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<ErrorBoundary fallback={() => {
|
||||
console.error('Rendering 500 error page')
|
||||
return <HttpStatusCode code={500} />
|
||||
}}>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Show
|
||||
when={data()?.id}
|
||||
fallback={
|
||||
<PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
|
||||
{console.warn('Rendering 404 error page - no article data found')}
|
||||
<FourOuFourView />
|
||||
<HttpStatusCode code={404} />
|
||||
</PageLayout>
|
||||
}
|
||||
>
|
||||
{console.debug('Rendering article page with data:', data())}
|
||||
<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 || ''}
|
||||
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 (
|
||||
<ErrorBoundary fallback={() => <HttpStatusCode code={500} />}>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Show
|
||||
when={data()?.id}
|
||||
fallback={
|
||||
<PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
|
||||
<FourOuFourView />
|
||||
<HttpStatusCode code={404} />
|
||||
</PageLayout>
|
||||
}
|
||||
>
|
||||
<ReactionsProvider>
|
||||
<FullArticle article={data() as Shout} />
|
||||
</ReactionsProvider>
|
||||
</PageLayout>
|
||||
</Show>
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
)
|
||||
<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>
|
||||
</Show>
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
)
|
||||
}
|
||||
|
||||
return <ArticlePage {...props} />
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user