From aa11c8d8b80eac3bcea4394bcea8596d7e2409a1 Mon Sep 17 00:00:00 2001
From: dufok <duffokin@gmail.com>
Date: Wed, 25 Sep 2024 09:59:12 -0300
Subject: [PATCH] debug: With load topics and logs in slug tab to see why it is
 not loading topic from user page

---
 src/routes/[slug]/[...tab].tsx | 176 ++++++++++++++++++++-------------
 1 file changed, 105 insertions(+), 71 deletions(-)

diff --git a/src/routes/[slug]/[...tab].tsx b/src/routes/[slug]/[...tab].tsx
index 1e3be49e..dfac04fb 100644
--- a/src/routes/[slug]/[...tab].tsx
+++ b/src/routes/[slug]/[...tab].tsx
@@ -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} />
 }