Merge pull request #487 from Discours/hotfix/sv-artical-component

Fix slug updating in ArticlePage component by managing currentSlug signal

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

@@ -1,6 +1,16 @@
 import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router'
 import { HttpStatusCode } from '@solidjs/start'
-import { ErrorBoundary, Show, Suspense, createEffect, on, onMount } from 'solid-js'
+import {
+  ErrorBoundary,
+  Match,
+  Show,
+  Suspense,
+  Switch,
+  createEffect,
+  createSignal,
+  on,
+  onMount
+} from 'solid-js'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { Loading } from '~/components/_shared/Loading'
 import { gaIdentity } from '~/config'
@@ -43,35 +53,13 @@ export type SlugPageProps = {
   topics: Topic[]
 }
 
-export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
-  if (props.params.slug.startsWith('@')) {
-    console.debug('[routes] [slug]/[...tab] starts with @, render as author page')
-    const patchedProps = {
-      ...props,
-      params: {
-        ...props.params,
-        slug: props.params.slug.slice(1, props.params.slug.length)
-      }
-    } as RouteSectionProps<AuthorPageProps>
-    return <AuthorPage {...patchedProps} />
-  }
-
-  if (props.params.slug.startsWith('!')) {
-    console.debug('[routes] [slug]/[...tab] starts with !, render as topic page')
-    const patchedProps = {
-      ...props,
-      params: {
-        ...props.params,
-        slug: props.params.slug.slice(1, props.params.slug.length)
-      }
-    } as RouteSectionProps<TopicPageProps>
-    return <TopicPage {...patchedProps} />
-  }
-
-  function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
+function ArticlePageContent(props: RouteSectionProps<ArticlePageProps>) {
   const loc = useLocation()
   const { t } = useLocalize()
-    const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug)))
+  const data = createAsync(async () => {
+    const result = props.data?.article || (await fetchShout(props.params.slug))
+    return result
+  })
 
   onMount(async () => {
     if (gaIdentity && data()?.id) {
@@ -127,6 +115,49 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
       </Suspense>
     </ErrorBoundary>
   )
-  }
-  return <ArticlePage {...props} />
+}
+
+export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
+  const [currentSlug, setCurrentSlug] = createSignal(props.params.slug)
+  createEffect(() => {
+    const newSlug = props.params.slug
+    if (newSlug !== currentSlug()) {
+      setCurrentSlug(newSlug)
+    }
+  })
+
+  return (
+    <Switch fallback={<div>Loading...</div>}>
+      <Match when={currentSlug().startsWith('@')}>
+        <AuthorPage
+          {...({
+            ...props,
+            params: {
+              ...props.params,
+              slug: currentSlug().slice(1)
+            }
+          } as RouteSectionProps<AuthorPageProps>)}
+        />
+      </Match>
+      <Match when={currentSlug().startsWith('!')}>
+        <TopicPage
+          {...({
+            ...props,
+            params: {
+              ...props.params,
+              slug: currentSlug().slice(1)
+            }
+          } as RouteSectionProps<TopicPageProps>)}
+        />
+      </Match>
+      <Match when={!['@', '!'].some((prefix) => currentSlug().startsWith(prefix))}>
+        <ArticlePageContent {...props} />
+      </Match>
+      <Match when={true}>
+        <ErrorBoundary fallback={() => <HttpStatusCode code={404} />}>
+          <FourOuFourView />
+        </ErrorBoundary>
+      </Match>
+    </Switch>
+  )
 }