debugL

src/routes/[slug]/[...tab].tsx

@@ -1,6 +1,6 @@
-import { RouteDefinition, RouteSectionProps, useLocation } from '@solidjs/router'
+import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router'
 import { HttpStatusCode } from '@solidjs/start'
-import { ErrorBoundary, Show, Suspense, createEffect, on, createSignal, 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'
@@ -15,21 +15,17 @@ import { ReactionsProvider } from '../../context/reactions'
 import AuthorPage, { AuthorPageProps } from '../author/[slug]/[...tab]'
 import TopicPage, { TopicPageProps } from '../topic/[slug]/[...tab]'
 
-// Simplified fetch function for the shout
 const fetchShout = async (slug: string): Promise<Shout | undefined> => {
-  console.debug('fetchShout called with slug:', slug)
-  if (slug.startsWith('@')) return // Skip fetching article for slugs starting with @ (author pages)
-  const result = await getShout({ slug })
-  console.debug('fetchShout result:', result)
+  if (slug.startsWith('@')) return
+  const shoutLoader = getShout({ slug })
+  const result = await shoutLoader()
   return result
 }
 
 export const route: RouteDefinition = {
-  load: async ({ params }) => {
-    const article = await fetchShout(params.slug)
-    console.debug('route.load fetched article:', article)
-    return { article }
-  }
+  load: async ({ params }) => ({
+    article: await fetchShout(params.slug)
+  })
 }
 
 export type ArticlePageProps = {
@@ -48,7 +44,6 @@ export type SlugPageProps = {
 }
 
 export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
-  // If the slug starts with '@', render as author page
   if (props.params.slug.startsWith('@')) {
     console.debug('[routes] [slug]/[...tab] starts with @, render as author page')
     const patchedProps = {
@@ -61,7 +56,6 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
     return <AuthorPage {...patchedProps} />
   }
 
-  // If the slug starts with '!', render as topic page
   if (props.params.slug.startsWith('!')) {
     console.debug('[routes] [slug]/[...tab] starts with !, render as topic page')
     const patchedProps = {
@@ -74,40 +68,14 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
     return <TopicPage {...patchedProps} />
   }
 
-  // Handle regular article slugs
   function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
     const loc = useLocation()
     const { t } = useLocalize()
+    const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug)))
 
-    // Set up a signal for article data and loading state
-    const [article, setArticle] = createSignal<Shout | undefined>(props.data?.article)
-    const [isLoading, setIsLoading] = createSignal(false)
-
-    // Fetch article data manually based on slug changes
-    createEffect(() => {
-      const slug = props.params.slug
-      if (!slug) return
-
-      setIsLoading(true)
-      fetchShout(slug)
-        .then((result) => {
-          setArticle(result)
-          if (!result) {
-            console.warn('No article data found for slug:', slug)
-          }
-        })
-        .catch((error) => {
-          console.error('Error fetching shout:', error)
-        })
-        .finally(() => setIsLoading(false))
-    })
-
-    // onMount to load GA script
     onMount(async () => {
-      console.debug('onMount triggered')
-      if (gaIdentity && article()?.id) {
+      if (gaIdentity && data()?.id) {
         try {
-          console.debug('Loading GA script')
           await loadGAScript(gaIdentity)
           initGA(gaIdentity)
         } catch (error) {
@@ -116,10 +84,9 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
       }
     })
 
-    // Google Analytics effect
     createEffect(
       on(
-        article,
+        data,
         (a?: Shout) => {
           if (!a?.id) return
           window?.gtag?.('event', 'page_view', {
@@ -136,25 +103,24 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
       <ErrorBoundary fallback={() => <HttpStatusCode code={500} />}>
         <Suspense fallback={<Loading />}>
           <Show
-            when={!isLoading() && article()?.id}
+            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>
             }
           >
             <PageLayout
-              title={`${t('Discours')}${article()?.title ? ' :: ' : ''}${article()?.title || ''}`}
-              desc={descFromBody(article()?.body || '')}
-              keywords={keywordsFromTopics(article()?.topics as { title: string }[])}
-              headerTitle={article()?.title || ''}
-              slug={article()?.slug}
-              cover={article()?.cover || ''}
+              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={article() as Shout} />
+                <FullArticle article={data() as Shout} />
               </ReactionsProvider>
             </PageLayout>
           </Show>
@@ -162,6 +128,5 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
       </ErrorBoundary>
     )
   }
-
   return <ArticlePage {...props} />
 }