Add apiReqest to random topucs in Header (#220)

src/components/Nav/Header/Header.tsx

@@ -20,6 +20,8 @@ import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
 
 import styles from './Header.module.scss'
+import { apiClient } from '../../../utils/apiClient'
+import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
 
 type Props = {
   title?: string
@@ -28,7 +30,6 @@ type Props = {
   articleBody?: string
   cover?: string
   scrollToComments?: (value: boolean) => void
-  randomTopics?: Topic[]
 }
 
 type HeaderSearchParams = {
@@ -46,6 +47,7 @@ export const Header = (props: Props) => {
 
   const { page, searchParams } = useRouter<HeaderSearchParams>()
 
+  const [randomTopics, setRandomTopics] = createSignal([])
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
   const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
@@ -139,6 +141,10 @@ export const Header = (props: Props) => {
     }, time)
   }
 
+  onMount(async () => {
+    const topics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT })
+    setRandomTopics(topics)
+  })
   return (
     <header
       class={styles.mainHeader}
@@ -337,8 +343,8 @@ export const Header = (props: Props) => {
             onMouseOut={hideSubnavigation}
           >
             <ul class="nodash">
-              <Show when={props.randomTopics && props.randomTopics.length > 0}>
-                <For each={props.randomTopics}>
+              <Show when={randomTopics().length > 0}>
+                <For each={randomTopics()}>
                   {(topic) => (
                     <li class="item">
                       <a href={`/topic/${topic.slug}`}>

src/components/Views/Home.tsx

@@ -25,8 +25,7 @@ import { splitToPages } from '../../utils/splitToPages'
 import { ArticleCard } from '../Feed/ArticleCard'
 import { useLocalize } from '../../context/localize'
 
-type HomeProps = {
-  randomTopics: Topic[]
+type Props = {
   shouts: Shout[]
 }
 
@@ -35,7 +34,7 @@ export const RANDOM_TOPICS_COUNT = 12
 const CLIENT_LOAD_ARTICLES_COUNT = 29
 const LOAD_MORE_PAGE_SIZE = 16 // Row1 + Row3 + Row2 + Beside (3 + 1) + Row1 + Row 2 + Row3
 
-export const HomeView = (props: HomeProps) => {
+export const HomeView = (props: Props) => {
   const {
     sortedArticles,
     articlesByLayout,
@@ -47,9 +46,7 @@ export const HomeView = (props: HomeProps) => {
     shouts: props.shouts
   })
 
-  const { topTopics } = useTopicsStore({
-    randomTopics: props.randomTopics
-  })
+  const { topTopics } = useTopicsStore()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const { topAuthors } = useTopAuthorsStore()
   const { t } = useLocalize()

src/components/_shared/PageLayout.tsx

@@ -9,7 +9,7 @@ import styles from './PageLayout.module.scss'
 import { Meta } from '@solidjs/meta'
 import { Topic } from '../../graphql/types.gen'
 
-type PageLayoutProps = {
+type Props = {
   headerTitle?: string
   slug?: string
   articleBody?: string
@@ -20,10 +20,9 @@ type PageLayoutProps = {
   class?: string
   withPadding?: boolean
   scrollToComments?: (value: boolean) => void
-  randomTopics?: Topic[]
 }
 
-export const PageLayout = (props: PageLayoutProps) => {
+export const PageLayout = (props: Props) => {
   const isHeaderFixed = props.isHeaderFixed === undefined ? true : props.isHeaderFixed
   const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
 
@@ -43,7 +42,6 @@ export const PageLayout = (props: PageLayoutProps) => {
         cover={props.articleBody}
         isHeaderFixed={isHeaderFixed}
         scrollToComments={(value) => setScrollToComments(value)}
-        randomTopics={props.randomTopics}
       />
       <main
         class={clsx('main-content', {

src/pages/allTopics.page.tsx

@@ -18,7 +18,7 @@ export const AllTopicsPage = (props: PageProps) => {
   })
 
   return (
-    <PageLayout randomTopics={props.randomTopics}>
+    <PageLayout>
       <Show when={isLoaded()} fallback={<Loading />}>
         <AllTopicsView topics={props.allTopics} />
       </Show>

src/pages/index.page.server.ts

@@ -4,13 +4,12 @@ import type { PageProps } from './types'
 import { PRERENDERED_ARTICLES_COUNT, RANDOM_TOPICS_COUNT } from '../components/Views/Home'
 
 export const onBeforeRender = async (_pageContext: PageContext) => {
-  const randomTopics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT })
   const homeShouts = await apiClient.getShouts({
     filters: { visibility: 'public' },
     limit: PRERENDERED_ARTICLES_COUNT
   })
 
-  const pageProps: PageProps = { randomTopics, homeShouts }
+  const pageProps: PageProps = { homeShouts }
 
   return {
     pageContext: {

src/pages/index.page.tsx

@@ -10,7 +10,7 @@ import { useLocalize } from '../context/localize'
 import { ReactionsProvider } from '../context/reactions'
 
 export const HomePage = (props: PageProps) => {
-  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.homeShouts) && Boolean(props.randomTopics))
+  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.homeShouts))
   const { t } = useLocalize()
 
   onMount(async () => {
@@ -27,11 +27,11 @@ export const HomePage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <PageLayout randomTopics={props.randomTopics} withPadding={true}>
+    <PageLayout withPadding={true}>
       <ReactionsProvider>
         <Title>{t('Discours')}</Title>
         <Show when={isLoaded()} fallback={<Loading />}>
-          <HomeView randomTopics={props.randomTopics} shouts={props.homeShouts || []} />
+          <HomeView shouts={props.homeShouts || []} />
         </Show>
       </ReactionsProvider>
     </PageLayout>

src/pages/types.ts

@@ -3,7 +3,6 @@ import type { Author, Chat, Shout, Topic } from '../graphql/types.gen'
 
 // all the things (she said) that could be passed from the server
 export type PageProps = {
-  randomTopics?: Topic[]
   article?: Shout
   layoutShouts?: Shout[]
   authorShouts?: Shout[]