Fix Topic Top Articles

src/components/Views/Expo/Expo.tsx

@@ -31,8 +31,8 @@ export const Expo = (props: Props) => {
   const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.shouts))
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
-  const [randomTopArticles, setRandomTopArticles] = createSignal<Shout[]>([])
-  const [randomTopMonthArticles, setRandomTopMonthArticles] = createSignal<Shout[]>([])
+  const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
+  const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
 
   const { t } = useLocalize()
 
@@ -42,7 +42,7 @@ export const Expo = (props: Props) => {
   })
 
   const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
-    const filters = { featured: true, ...additionalFilters }
+    const filters = { ...additionalFilters }
 
     if (!filters.layouts) filters.layouts = []
     if (props.layout) {
@@ -77,12 +77,12 @@ export const Expo = (props: Props) => {
 
   const loadRandomTopArticles = async () => {
     const options: LoadShoutsOptions = {
-      filters: getLoadShoutsFilters(),
+      filters: { ...getLoadShoutsFilters(), featured: true },
       limit: 10,
       random_limit: 100,
     }
     const result = await apiClient.getRandomTopShouts({ options })
-    setRandomTopArticles(result)
+    setFavoriteTopArticles(result)
   }
 
   const loadRandomTopMonthArticles = async () => {
@@ -90,19 +90,15 @@ export const Expo = (props: Props) => {
     const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
 
     const options: LoadShoutsOptions = {
-      filters: getLoadShoutsFilters({ after }),
+      filters: { ...getLoadShoutsFilters({ after }), reacted: true },
       limit: 10,
       random_limit: 10,
     }
 
     const result = await apiClient.getRandomTopShouts({ options })
-    setRandomTopMonthArticles(result)
+    setReactedTopMonthArticles(result)
   }
 
-  const pages = createMemo<Shout[][]>(() =>
-    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
-  )
-
   onMount(() => {
     if (isLoaded()) {
       return
@@ -126,8 +122,8 @@ export const Expo = (props: Props) => {
       () => props.layout,
       () => {
         resetSortedArticles()
-        setRandomTopArticles([])
-        setRandomTopMonthArticles([])
+        setFavoriteTopArticles([])
+        setReactedTopMonthArticles([])
         loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
         loadRandomTopArticles()
         loadRandomTopMonthArticles()
@@ -140,8 +136,9 @@ export const Expo = (props: Props) => {
   })
 
   const handleLoadMoreClick = () => {
-    loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE)
-  }
+    loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE);
+  };
+
 
   return (
     <div class={styles.Expo}>
@@ -210,8 +207,8 @@ export const Expo = (props: Props) => {
                 </div>
               )}
             </For>
-            <Show when={randomTopMonthArticles()?.length > 0} keyed={true}>
-              <ArticleCardSwiper title={t('Top month articles')} slides={randomTopMonthArticles()} />
+            <Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
+              <ArticleCardSwiper title={t('Top month articles')} slides={reactedTopMonthArticles()} />
             </Show>
             <For each={sortedArticles().slice(LOAD_MORE_PAGE_SIZE, LOAD_MORE_PAGE_SIZE * 2)}>
               {(shout) => (
@@ -225,8 +222,8 @@ export const Expo = (props: Props) => {
                 </div>
               )}
             </For>
-            <Show when={randomTopArticles()?.length > 0} keyed={true}>
-              <ArticleCardSwiper title={t('Favorite')} slides={randomTopArticles()} />
+            <Show when={favoriteTopArticles()?.length > 0} keyed={true}>
+              <ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
             </Show>
             <For each={sortedArticles().slice(LOAD_MORE_PAGE_SIZE * 2)}>
               {(shout) => (

src/components/Views/Topic.tsx

@@ -1,8 +1,8 @@
-import type { Shout, Topic } from '../../graphql/schema/core.gen'
+import { LoadShoutsOptions, Shout, Topic } from "../../graphql/schema/core.gen";
 
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal, onMount, on } from "solid-js";
 
 import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
@@ -22,6 +22,8 @@ import { FullTopic } from '../Topic/Full'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 
 import styles from '../../styles/Topic.module.scss'
+import { apiClient } from "../../graphql/client/core";
+import { getUnixtime } from "../../utils/getServerDate";
 
 type TopicsPageSearchParams = {
   by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
@@ -43,14 +45,57 @@ export const TopicView = (props: Props) => {
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
   const { topicEntities } = useTopicsStore({ topics: [props.topic] })
   const { authorsByTopic } = useAuthorsStore()
+  const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
+  const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
+
+
+  console.log('%c!!! :', 'color: #bada55', sortedArticles())
 
   const [topic, setTopic] = createSignal<Topic>()
+
   createEffect(() => {
     const topics = topicEntities()
     if (props.topicSlug && !topic() && topics) {
       setTopic(topics[props.topicSlug])
     }
   })
+
+  const loadRandomTopArticles = async (topic: string) => {
+    const options: LoadShoutsOptions = {
+      filters: { featured: true, topic: topic},
+      limit: 10,
+      random_limit: 100,
+    }
+    const result = await apiClient.getRandomTopShouts({ options })
+    setFavoriteTopArticles(result)
+  }
+
+  const loadRandomTopMonthArticles = async (topic: string) => {
+    const now = new Date()
+    const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
+
+    const options: LoadShoutsOptions = {
+      filters: { after: after, featured: true, topic: topic },
+      limit: 10,
+      random_limit: 10,
+    }
+
+    const result = await apiClient.getRandomTopShouts({ options })
+    setReactedTopMonthArticles(result)
+  }
+
+
+  createEffect(
+    on(
+      () => topic(),
+      () => {
+        loadRandomTopArticles(topic()?.slug)
+        loadRandomTopMonthArticles(topic()?.slug)
+      },
+      { defer: true },
+    ),
+  )
+
   const title = createMemo(
     () =>
       `#${capitalize(
@@ -170,8 +215,9 @@ export const TopicView = (props: Props) => {
         beside={sortedArticles()[4]}
         wrapper={'author'}
       />
-
-      <ArticleCardSwiper title={title()} slides={sortedArticles().slice(5, 11)} />
+      <Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
+        <ArticleCardSwiper title={t('Top month articles')} slides={reactedTopMonthArticles()} />
+      </Show>
       <Beside
         beside={sortedArticles()[12]}
         title={t('Top viewed')}
@@ -182,8 +228,10 @@ export const TopicView = (props: Props) => {
       <Row2 articles={sortedArticles().slice(13, 15)} isEqual={true} />
       <Row1 article={sortedArticles()[15]} />
 
+      <Show when={favoriteTopArticles()?.length > 0} keyed={true}>
+        <ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
+      </Show>
       <Show when={sortedArticles().length > 15}>
-        <ArticleCardSwiper title={t('Favorite')} slides={sortedArticles().slice(16, 22)} />
         <Row3 articles={sortedArticles().slice(23, 26)} />
         <Row2 articles={sortedArticles().slice(26, 28)} />
       </Show>