home-fetch-all-topics

src/components/Views/AllTopics/AllTopics.tsx

@@ -33,7 +33,7 @@ export const AllTopics = (props: Props) => {
   const topics = createMemo(() => sortedTopics() || props.topics)
   const [searchParams, changeSearchParams] = useSearchParams<{ by?: string }>()
   createEffect(on(() => searchParams?.by || 'shouts', setTopicsSort, { defer: true }))
-  onMount(() => setTimeout(() => !searchParams?.by && changeSearchParams({ by: 'shouts' }), 1))
+  onMount(() => !searchParams?.by && changeSearchParams({ by: 'shouts' }))
 
   // sorted derivative
   const byLetter = createMemo<{ [letter: string]: Topic[] }>(() => {

src/components/Views/Home.tsx

@@ -36,6 +36,7 @@ export interface HomeViewProps {
   topMonthShouts: Shout[]
   topViewedShouts: Shout[]
   topCommentedShouts: Shout[]
+  topics?: Topic[]
 }
 
 export const HomeView = (props: HomeViewProps) => {

src/routes/(home).tsx

@@ -1,6 +1,7 @@
 import { type RouteDefinition, type RouteSectionProps, createAsync } from '@solidjs/router'
-import { Show, Suspense, createSignal, onMount } from 'solid-js'
-import { loadShouts } from '~/graphql/api/public'
+import { Show, Suspense, createEffect, createSignal, onMount } from 'solid-js'
+import { useTopics } from '~/context/topics'
+import { loadShouts, loadTopics } from '~/graphql/api/public'
 import { LoadShoutsOptions } from '~/graphql/schema/core.gen'
 import { byStat } from '~/lib/sortby'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
@@ -12,6 +13,11 @@ import { ReactionsProvider } from '../context/reactions'
 
 export const SHOUTS_PER_PAGE = 20
 
+const fetchAllTopics = async () => {
+  const allTopicsLoader = loadTopics()
+  return await allTopicsLoader()
+}
+
 const fetchHomeTopData = async () => {
   const topCommentedLoader = loadShouts({
     filters: { featured: true },
@@ -50,13 +56,13 @@ export const route = {
       filters: { featured: true },
       limit
     })
-    return { ...(await fetchHomeTopData()), featuredShouts: await featuredLoader() }
+    return { ...(await fetchHomeTopData()), featuredShouts: await featuredLoader(), topics: await fetchAllTopics() }
   }
 } satisfies RouteDefinition
 
 export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
   const limit = 20
-
+  const { addTopics } = useTopics()
   const { t } = useLocalize()
   const [featuredOffset, setFeaturedOffset] = createSignal<number>(0)
 
@@ -71,6 +77,7 @@ export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
 
   // async ssr-friendly router-level cached data source
   const data = createAsync(async (prev?: HomeViewProps) => {
+    const topics = props.data?.topics || await fetchAllTopics()
     const featuredShoutsLoader = featuredLoader(featuredOffset())
     const featuredShouts = [
       ...(prev?.featuredShouts || []),
@@ -82,10 +89,12 @@ export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
       ...prev,
       ...props.data,
       topViewedShouts,
-      featuredShouts
+      featuredShouts,
+      topics
     }
     return result
   })
+  createEffect(() => data()?.topics && addTopics(data()?.topics || []))
 
   const [canLoadMoreFeatured, setCanLoadMoreFeatured] = createSignal(true)
   const loadMoreFeatured = async () => {

src/routes/author/(all-authors).tsx

@@ -1,8 +1,9 @@
 import { RouteDefinition, RouteLoadFuncArgs, type RouteSectionProps, createAsync } from '@solidjs/router'
-import { Suspense } from 'solid-js'
+import { Suspense, createEffect } from 'solid-js'
 import { AllAuthors } from '~/components/Views/AllAuthors'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
+import { useAuthors } from '~/context/authors'
 import { useLocalize } from '~/context/localize'
 import { ReactionsProvider } from '~/context/reactions'
 import { loadAuthors } from '~/graphql/api/public'
@@ -47,7 +48,9 @@ export const route = {
 
 export default function AllAuthorsPage(props: RouteSectionProps<{ authors: Author[] }>) {
   const { t } = useLocalize()
+  const { addAuthors } = useAuthors()
   const authors = createAsync<Author[]>(async () => props.data.authors || (await fetchData()))
+  createEffect(() => addAuthors(authors() || []))
   return (
     <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('All authors')}`}>
       <ReactionsProvider>