does not provide reactions where not needed

src/components/Views/Feed/Feed.tsx

@@ -1,6 +1,6 @@
 import { A, createAsync, useLocation, useNavigate, useSearchParams } from '@solidjs/router'
 import { clsx } from 'clsx'
-import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
 import { DropDown } from '~/components/_shared/DropDown'
 import { Option } from '~/components/_shared/DropDown/DropDown'
 import { Icon } from '~/components/_shared/Icon'
@@ -17,7 +17,7 @@ import { useUI } from '~/context/ui'
 import { loadUnratedShouts } from '~/graphql/api/private'
 import type { Author, Reaction, Shout } from '~/graphql/schema/core.gen'
 import { byCreated } from '~/lib/sortby'
-import { FeedSearchParams } from '~/routes/feed/[feed]'
+import { FeedSearchParams } from '~/routes/feed/(feed)'
 import { CommentDate } from '../../Article/CommentDate'
 import { getShareUrl } from '../../Article/SharePopup'
 import { AuthorBadge } from '../../Author/AuthorBadge'
@@ -64,16 +64,24 @@ export const FeedView = (props: FeedProps) => {
     setTopComments(comments.sort(byCreated).reverse())
   }
 
-  onMount(() => {
-    setIsLoading(true)
-    Promise.all([
-      loadTopComments(),
-      loadReactionsBy({ by: { shouts: props.shouts.map((s) => s.slug) } })
-    ]).finally(() => {
-      setIsRightColumnLoaded(true)
-      setIsLoading(false)
-    })
-  })
+  createEffect(
+    on(
+      () => props.shouts,
+      (sss: Shout[]) => {
+        if (sss) {
+          setIsLoading(true)
+          Promise.all([
+            loadTopComments(),
+            loadReactionsBy({ by: { shouts: sss.map((s: Shout) => s.slug) } })
+          ]).finally(() => {
+            setIsRightColumnLoaded(true)
+            setIsLoading(false)
+          })
+        }
+      },
+      { defer: true }
+    )
+  )
 
   const [shareData, setShareData] = createSignal<Shout | undefined>()
   const handleShare = (shared: Shout | undefined) => {

src/context/reactions.tsx

@@ -42,6 +42,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
   const loadReactionsBy = async (opts: QueryLoad_Reactions_ByArgs): Promise<Reaction[]> => {
     const fetcher = await loadReactions(opts)
     const result = (await fetcher()) || []
+    console.debug('[context.reactions] loaded', result)
     const newReactionsByShout: Record<string, Reaction[]> = {}
     const newReactionEntities = result.reduce(
       (acc: { [reaction_id: number]: Reaction }, reaction: Reaction) => {

src/routes/(home).tsx

@@ -9,7 +9,6 @@ import { HomeView, HomeViewProps } from '../components/Views/Home'
 import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { useLocalize } from '../context/localize'
-import { ReactionsProvider } from '../context/reactions'
 
 export const SHOUTS_PER_PAGE = 20
 
@@ -115,18 +114,16 @@ export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
 
   return (
     <PageLayout withPadding={true} title={t('Discours')} key={'home'}>
-      <ReactionsProvider>
-        <Suspense fallback={<Loading />}>
-          <HomeView {...(data() as HomeViewProps)} />
-          <Show when={canLoadMoreFeatured()}>
-            <p class="load-more-container">
-              <button class="button" onClick={loadMoreFeatured}>
-                {t('Load more')}
-              </button>
-            </p>
-          </Show>
-        </Suspense>
-      </ReactionsProvider>
+      <Suspense fallback={<Loading />}>
+        <HomeView {...(data() as HomeViewProps)} />
+        <Show when={canLoadMoreFeatured()}>
+          <p class="load-more-container">
+            <button class="button" onClick={loadMoreFeatured}>
+              {t('Load more')}
+            </button>
+          </p>
+        </Show>
+      </Suspense>
     </PageLayout>
   )
 }

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

@@ -6,7 +6,6 @@ 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, loadAuthorsAll } from '~/graphql/api/public'
 import { Author, AuthorsBy } from '~/graphql/schema/core.gen'
 
@@ -73,7 +72,6 @@ export default function AllAuthorsPage(props: RouteSectionProps<AllAuthorsData>)
       title={`${t('Discours')} :: ${t('All authors')}`}
       desc="List of authors of the open editorial community"
     >
-      <ReactionsProvider>
         <Suspense fallback={<Loading />}>
           <AllAuthors
             isLoaded={Boolean(data()?.authors)}
@@ -82,7 +80,6 @@ export default function AllAuthorsPage(props: RouteSectionProps<AllAuthorsData>)
             authorsByShouts={data()?.authorsByShouts}
           />
         </Suspense>
-      </ReactionsProvider>
     </PageLayout>
   )
 }

src/routes/feed/(feed).tsx

@@ -1,19 +1,10 @@
-import { RouteSectionProps, createAsync, useParams, useSearchParams } from '@solidjs/router'
+import { RouteSectionProps, createAsync, useSearchParams } from '@solidjs/router'
 import { Client } from '@urql/core'
 import { Show, createEffect, createSignal } from 'solid-js'
 import { Feed } from '~/components/Views/Feed'
 import { PageLayout } from '~/components/_shared/PageLayout'
-import { useGraphQL } from '~/context/graphql'
 import { useLocalize } from '~/context/localize'
 import { ReactionsProvider } from '~/context/reactions'
-import { useSession } from '~/context/session'
-import {
-  loadBookmarkedShouts,
-  loadCoauthoredShouts,
-  loadDiscussedShouts,
-  loadFollowedShouts,
-  loadUnratedShouts
-} from '~/graphql/api/private'
 import { loadShouts } from '~/graphql/api/public'
 import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
 import { SHOUTS_PER_PAGE } from '../(home)'
@@ -55,38 +46,6 @@ const fetchPublishedShouts = async (offset?: number, _client?: Client) => {
   return await shoutsLoader()
 }
 
-const fetchBookmarkedShouts = async (offset?: number, client?: Client) => {
-  const shoutsLoader = loadBookmarkedShouts(client, { limit: SHOUTS_PER_PAGE, offset })
-  return await shoutsLoader()
-}
-
-const fetchUnratedShouts = async (offset?: number, client?: Client) => {
-  const shoutsLoader = loadUnratedShouts(client, { limit: SHOUTS_PER_PAGE, offset })
-  return await shoutsLoader()
-}
-
-const fetchFollowedShouts = async (offset?: number, client?: Client) => {
-  const shoutsLoader = loadFollowedShouts(client, { limit: SHOUTS_PER_PAGE, offset })
-  return await shoutsLoader()
-}
-
-const fetchDiscussedShouts = async (offset?: number, client?: Client) => {
-  const shoutsLoader = loadDiscussedShouts(client, { limit: SHOUTS_PER_PAGE, offset })
-  return await shoutsLoader()
-}
-
-const fetchCoauthoredShouts = async (offset?: number, client?: Client) => {
-  const shoutsLoader = loadCoauthoredShouts(client, { limit: SHOUTS_PER_PAGE, offset })
-  return await shoutsLoader()
-}
-
-const fetchersByMode = {
-  followed: fetchFollowedShouts,
-  bookmarked: fetchBookmarkedShouts,
-  discussed: fetchDiscussedShouts,
-  coauthored: fetchCoauthoredShouts,
-  unrated: fetchUnratedShouts
-}
 
 export const route = {
   load: async ({ location: { query } }: RouteSectionProps<{ articles: Shout[] }>) => {
@@ -99,9 +58,6 @@ export const route = {
 export default (props: RouteSectionProps<Shout[]>) => {
   const [searchParams] = useSearchParams<FeedSearchParams>()
   const { t } = useLocalize()
-  const params = useParams()
-  const client = useGraphQL()
-  const { session } = useSession()
   const [offset, setOffset] = createSignal<number>(0)
   const shouts = createAsync(async () => ({ ...props.data }) || (await loadMore()))
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal<boolean>(true)
@@ -118,10 +74,7 @@ export default (props: RouteSectionProps<Shout[]>) => {
       const period = searchParams?.by || 'month'
       options.filters = { after: getFromDate(period as FeedPeriod) }
     }
-    if (!session()) return await fetchPublishedShouts(newOffset)
-    const fetcher = fetchersByMode[params.feed as keyof typeof fetchersByMode]
-    if (!fetcher) return await fetchPublishedShouts(newOffset)
-    return await fetcher(newOffset, client)
+    return await fetchPublishedShouts(newOffset)
   }
   createEffect(() => setIsLoadMoreButtonVisible(offset() < (shouts()?.length || 0)))
   return (

src/routes/search/(search).tsx

@@ -5,7 +5,6 @@ import { SearchView } from '~/components/Views/Search'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
-import { ReactionsProvider } from '~/context/reactions'
 import { loadShoutsSearch } from '~/graphql/api/public'
 import { QueryLoad_Shouts_SearchArgs, SearchResult } from '~/graphql/schema/core.gen'
 
@@ -49,7 +48,6 @@ export default () => {
 
   return (
     <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Search')}`}>
-      <ReactionsProvider>
         <Suspense fallback={<Loading />}>
           <Show when={isLoaded()} fallback={<Loading />}>
             <Show
@@ -64,7 +62,6 @@ export default () => {
             </Show>
           </Show>
         </Suspense>
-      </ReactionsProvider>
     </PageLayout>
   )
 }

src/routes/topic/(all-topics).tsx

@@ -4,7 +4,6 @@ import { AllTopics } from '~/components/Views/AllTopics'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
-import { ReactionsProvider } from '~/context/reactions'
 import { useTopics } from '~/context/topics'
 import { loadTopics } from '~/graphql/api/public'
 import { Topic } from '~/graphql/schema/core.gen'
@@ -29,11 +28,9 @@ export default (props: RouteSectionProps<{ topics: Topic[] }>) => {
       headerTitle={`${t('Discours')} :: ${t('All topics')}`}
       desc="Thematic table of contents of the magazine. Here you can find all the topics that the community authors wrote about"
     >
-      <ReactionsProvider>
         <Suspense fallback={<Loading />}>
           <AllTopics topics={topics() as Topic[]} />
         </Suspense>
-      </ReactionsProvider>
     </PageLayout>
   )
 }

src/routes/topic/[slug].tsx

@@ -5,7 +5,6 @@ import { TopicView } from '~/components/Views/Topic'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
-import { ReactionsProvider } from '~/context/reactions'
 import { useTopics } from '~/context/topics'
 import { loadShouts } from '~/graphql/api/public'
 import { LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen'
@@ -66,13 +65,11 @@ export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
           slug={topic()?.slug}
           cover={cover()}
         >
-          <ReactionsProvider>
             <TopicView
               topic={topic() as Topic}
               topicSlug={props.params.slug}
               shouts={articles() as Shout[]}
             />
-          </ReactionsProvider>
         </PageLayout>
       </Suspense>
     </ErrorBoundary>