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

debug: Added logic for robust reload data forslug before render

Browse Source
This commit is contained in:
Stepan Vladovskiy 2024-09-25 17:25:08 -03:00
parent dc2b6a5ab1
commit bbab1e4cb8
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router'
import { HttpStatusCode } from '@solidjs/start'
import { ErrorBoundary, Show, Suspense, onMount } from 'solid-js'
import { ErrorBoundary, Show, Suspense, createEffect, onMount } from 'solid-js'
import { FourOuFourView } from '~/components/Views/FourOuFour'
import { Loading } from '~/components/_shared/Loading'
import { gaIdentity } from '~/config'
@ -79,6 +79,8 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
const loc = useLocation()
const { t } = useLocalize()
// Refactored createAsync to ensure data fetch on route changes
const data = createAsync(async () => {
console.debug('createAsync fetching data with slug:', props.params.slug)
const result = props.data?.article || (await fetchShout(props.params.slug))
@ -86,6 +88,7 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
return result
})
// onMount to load GA and other scripts if needed
onMount(async () => {
console.debug('onMount triggered')
if (gaIdentity && data()?.id) {
@ -99,6 +102,18 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
}
})
// Re-trigger Google Analytics when data changes
createEffect(() => {
console.debug('createEffect triggered with data:', data())
if (data()?.id) {
window?.gtag?.('event', 'page_view', {
page_title: data()?.title,
page_location: window?.location.href || '',
page_path: loc.pathname
})
}
})
return (
<ErrorBoundary fallback={() => {
console.error('Rendering 500 error page')
@ -133,5 +148,7 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
</ErrorBoundary>
)
}
// Return the ArticlePage component to ensure the route handles properly
return <ArticlePage {...props} />
}