topic navigation fix (#346)

* topic navigation fix

* topic loading state

src/components/Views/Topic.tsx

@@ -2,7 +2,7 @@ import type { Shout, Topic } from '../../graphql/types.gen'
 
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
-import { For, Show, createMemo, onMount, createSignal, createEffect } from 'solid-js'
+import { For, Show, createMemo, onMount, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
@@ -14,7 +14,6 @@ import { getImageUrl } from '../../utils/getImageUrl'
 import { getDescription } from '../../utils/meta'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
-import { Loading } from '../_shared/Loading'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 import { Beside } from '../Feed/Beside'
 import { Row1 } from '../Feed/Row1'
@@ -32,8 +31,6 @@ interface Props {
   topic: Topic
   shouts: Shout[]
   topicSlug: string
-  isLoaded: boolean
-  title: (val: string) => string
 }
 
 export const PRERENDERED_ARTICLES_COUNT = 28
@@ -88,7 +85,6 @@ export const TopicView = (props: Props) => {
   )
 
   const pageTitle = `#${capitalize(topic().title, true)}`
-  createEffect(() => props.title(pageTitle))
 
   const ogImage = topic().pic
     ? getImageUrl(topic().pic, { width: 1200 })
@@ -101,7 +97,7 @@ export const TopicView = (props: Props) => {
   return (
     <div class={styles.topicPage}>
       <Meta name="descprition" content={description} />
-      <Meta name="keywords" content={t('topicKeywords', { topic: topic().title })} />
+      <Meta name="keywords" content={t('topicKeywords', { topic: pageTitle })} />
       <Meta name="og:type" content="article" />
       <Meta name="og:title" content={ogTitle} />
       <Meta name="og:image" content={ogImage} />
@@ -110,8 +106,6 @@ export const TopicView = (props: Props) => {
       <Meta name="twitter:card" content="summary_large_image" />
       <Meta name="twitter:title" content={ogTitle} />
       <Meta name="twitter:description" content={description} />
-      <Show when={props.isLoaded} fallback={<Loading />}>
-        <Show when={topic()}>
       <FullTopic topic={topic()} />
       <div class="wide-container">
         <div class={clsx(styles.groupControls, 'row group__controls')}>
@@ -205,8 +199,6 @@ export const TopicView = (props: Props) => {
           </button>
         </p>
       </Show>
-        </Show>
-      </Show>
     </div>
   )
 }

src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx

@@ -5,6 +5,7 @@ import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
 import { Shout } from '../../../graphql/types.gen'
 import { ArticleCard } from '../../Feed/ArticleCard'
 import { Icon } from '../Icon'
+import { ShowOnlyOnClient } from '../ShowOnlyOnClient'
 
 import { SwiperRef } from './swiper'
 
@@ -25,6 +26,7 @@ export const ArticleCardSwiper = (props: Props) => {
   })
 
   return (
+    <ShowOnlyOnClient>
       <div class={clsx(styles.Swiper, styles.articleMode, styles.ArticleCardSwiper)}>
         <Show when={props.title}>
           <h2 class={styles.sliderTitle}>{props.title}</h2>
@@ -85,5 +87,6 @@ export const ArticleCardSwiper = (props: Props) => {
           </Show>
         </div>
       </div>
+    </ShowOnlyOnClient>
   )
 }

src/pages/topic.page.server.ts

@@ -3,6 +3,7 @@ import type { PageContext } from '../renderer/types'
 
 import { render } from 'vike/abort'
 
+import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Topic'
 import { apiClient } from '../utils/apiClient'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
@@ -14,7 +15,12 @@ export const onBeforeRender = async (pageContext: PageContext) => {
     throw render(404)
   }
 
-  const pageProps: PageProps = { topic, seo: { title: topic.title } }
+  const topicShouts = await apiClient.getShouts({
+    filters: { topic: topic.slug },
+    limit: PRERENDERED_ARTICLES_COUNT,
+  })
+
+  const pageProps: PageProps = { topic, topicShouts, seo: { title: topic.title } }
 
   return {
     pageContext: {

src/pages/topic.page.tsx

@@ -1,7 +1,8 @@
 import type { PageProps } from './types'
 
-import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
+import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js'
 
+import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../components/Views/Topic'
 import { ReactionsProvider } from '../context/reactions'
@@ -16,7 +17,7 @@ export const TopicPage = (props: PageProps) => {
   const [isLoaded, setIsLoaded] = createSignal(
     Boolean(props.topicShouts) && Boolean(props.topic) && props.topic.slug === slug(),
   )
-  const [pageTitle, setPageTitle] = createSignal<string>()
+
   const preload = () =>
     Promise.all([
       loadShouts({ filters: { topic: slug() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }),
@@ -51,15 +52,15 @@ export const TopicPage = (props: PageProps) => {
   const usePrerenderedData = props.topic?.slug === slug()
 
   return (
-    <PageLayout title={pageTitle()}>
+    <PageLayout title={props.seo.title}>
       <ReactionsProvider>
+        <Show when={isLoaded()} fallback={<Loading />}>
           <TopicView
-          title={(title) => setPageTitle(title)}
-          isLoaded={isLoaded()}
             topic={usePrerenderedData ? props.topic : null}
             shouts={usePrerenderedData ? props.topicShouts : null}
             topicSlug={slug()}
           />
+        </Show>
       </ReactionsProvider>
     </PageLayout>
   )