topic-page-fix

src/components/Topic/Full.tsx

@@ -1,7 +1,7 @@
 import type { Author, Topic } from '~/graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
-import { Show, createEffect, createMemo, createSignal } from 'solid-js'
+import { Show, createEffect, createSignal, on } from 'solid-js'
 
 import { useFollowing } from '~/context/following'
 import { useLocalize } from '~/context/localize'
@@ -25,16 +25,18 @@ export const FullTopic = (props: Props) => {
   const { follows, changeFollowing } = useFollowing()
   const { requireAuthentication } = useSession()
   const [followed, setFollowed] = createSignal()
+  const [title, setTitle] = createSignal('')
 
-  const title = createMemo(() => {
+  createEffect(on(() => props.topic, (tpc) => {
+    if (!tpc) return
     /* FIXME: use title translation*/
+    setTitle((_) => tpc?.title || '')
     return `#${capitalize(
-      lang() === 'en'
+      lang() === 'en' ? tpc.slug.replace(/-/, ' ') : tpc.title || tpc.slug.replace(/-/, ' '),
-        ? props.topic.slug.replace(/-/, ' ')
-        : props.topic.title || props.topic.slug.replace(/-/, ' '),
       true
     )}`
-  })
+  }, {} ))
+
   createEffect(() => {
     if (follows?.topics?.length !== 0) {
       const items = follows.topics || []

src/components/Views/Topic.tsx

@@ -1,6 +1,6 @@
 import { useSearchParams } from '@solidjs/router'
 import { clsx } from 'clsx'
-import { For, Show, Suspense, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
+import { For, Show, Suspense, createEffect, createMemo, createSignal, on } from 'solid-js'
 import { useAuthors } from '~/context/authors'
 import { useFeed } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
@@ -17,6 +17,7 @@ import { Row1 } from '../Feed/Row1'
 import { Row2 } from '../Feed/Row2'
 import { Row3 } from '../Feed/Row3'
 import { FullTopic } from '../Topic/Full'
+import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper'
 import { Loading } from '../_shared/Loading'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 
@@ -40,17 +41,28 @@ export const TopicView = (props: Props) => {
   const { topicEntities } = useTopics()
   const { authorsByTopic } = useAuthors()
   const [searchParams, changeSearchParams] = useSearchParams<{ by: TopicFeedSortBy }>()
-  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
   const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
   const [topic, setTopic] = createSignal<Topic>()
   const [followers, setFollowers] = createSignal<Author[]>(props.followers || [])
-  const sortedFeed = createMemo(() => feedByTopic()[topic()?.slug || ''] || []) // TODO: filter + sort
+
+  // TODO: filter + sort
+  const [sortedFeed, setSortedFeed] = createSignal([] as Shout[])
+  createEffect(on(([feedByTopic, () => props.topicSlug, topicEntities]), ([feed, slug, ttt]) => {
+    if (Object.values(ttt).length === 0) return
+    const sss = (feed[slug] || []) as Shout[]
+    sss && setSortedFeed(sss)
+    console.debug('topic slug loaded', slug)
+    const tpc = ttt[slug]
+    console.debug('topics loaded', ttt)
+    tpc && setTopic(tpc)
+  }, {}))
 
   const loadTopicFollowers = async () => {
     const topicFollowersFetcher = loadFollowersByTopic(props.topicSlug)
     const topicFollowers = await topicFollowersFetcher()
     topicFollowers && setFollowers(topicFollowers)
+    console.debug('loadTopicFollowers', topicFollowers)
   }
 
   const [topicAuthors, setTopicAuthors] = createSignal<Author[]>([])
@@ -59,6 +71,7 @@ export const TopicView = (props: Props) => {
     const topicAuthorsFetcher = await loadAuthors({ by, limit: 10, offset: 0 })
     const result = await topicAuthorsFetcher()
     result && setTopicAuthors(result)
+    console.debug('loadTopicAuthors', result)
   }
 
   const loadFavoriteTopArticles = async () => {
@@ -70,6 +83,7 @@ export const TopicView = (props: Props) => {
     const topicRandomShoutsFetcher = loadShouts(options)
     const result = await topicRandomShoutsFetcher()
     result && setFavoriteTopArticles(result)
+    console.debug('loadFavoriteTopArticles', result)
   }
 
   const loadReactedTopMonthArticles = async () => {
@@ -85,27 +99,18 @@ export const TopicView = (props: Props) => {
     const reactedTopMonthShoutsFetcher = loadShouts(options)
     const result = await reactedTopMonthShoutsFetcher()
     result && setReactedTopMonthArticles(result)
+    console.debug('loadReactedTopMonthArticles', result)
   }
 
   // второй этап начальной загрузки данных
-  createEffect(
+  createEffect(on(topic, (tpc) => {
-    on(
+    console.debug('topic loaded', tpc)
-      topicEntities,
+    if (!tpc) return
-      (ttt: Record<string, Topic>) => {
+    loadFavoriteTopArticles()
-        if (props.topicSlug in ttt) {
+    loadReactedTopMonthArticles()
-          Promise.all([
+    loadTopicAuthors()
-            loadFavoriteTopArticles(),
-            loadReactedTopMonthArticles(),
-            loadTopicAuthors(),
     loadTopicFollowers()
-          ]).finally(() => {
+  }, { defer: true }))
-            setTopic(ttt[props.topicSlug])
-          })
-        }
-      },
-      { defer: true }
-    )
-  )
 
   // дозагрузка
   const loadMore = async () => {
@@ -117,19 +122,11 @@ export const TopicView = (props: Props) => {
       offset: amountBefore
     })
     const result = await topicShoutsFetcher()
-    if (result) {
+    result && addFeed(result)
-      addFeed(result)
-      const amountAfter = feedByTopic()[props.topicSlug].length
-      setIsLoadMoreButtonVisible(amountBefore !== amountAfter)
-    }
     restoreScrollPosition()
+    return result as LoadMoreItems
   }
 
-  onMount(() => {
-    if (sortedFeed() || [].length === PRERENDERED_ARTICLES_COUNT) {
-      loadMore()
-    }
-  })
   /*
   const selectionTitle = createMemo(() => {
     const m = searchParams?.by
@@ -139,15 +136,14 @@ export const TopicView = (props: Props) => {
     return t('Top recent')
   })
   */
+
   const pages = createMemo<Shout[][]>(() =>
     paginate(sortedFeed(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
   )
   return (
     <div class={styles.topicPage}>
       <Suspense fallback={<Loading />}>
-        <Show when={topic()}>
+        <Show when={topic()}><FullTopic topic={topic() as Topic} followers={followers()} authors={topicAuthors()} /></Show>
-          <FullTopic topic={topic() as Topic} followers={followers()} authors={topicAuthors()} />
-        </Show>
         <div class="wide-container">
           <div class={clsx(styles.groupControls, 'row group__controls')}>
             <div class="col-md-16">
@@ -226,6 +222,7 @@ export const TopicView = (props: Props) => {
           <Row2 articles={sortedFeed().slice(17, 19)} />
         </Show>
 
+        <LoadMoreWrapper loadFunction={loadMore} pageSize={SHOUTS_PER_PAGE}>
           <For each={pages()}>
             {(page) => (
               <>
@@ -235,14 +232,7 @@ export const TopicView = (props: Props) => {
               </>
             )}
           </For>
-
+        </LoadMoreWrapper>
-        <Show when={isLoadMoreButtonVisible()}>
-          <p class="load-more-container">
-            <button class="button" onClick={loadMore}>
-              {t('Load more')}
-            </button>
-          </p>
-        </Show>
       </Suspense>
     </div>
   )

src/components/_shared/LoadMoreWrapper.tsx

@@ -36,7 +36,6 @@ export const LoadMoreWrapper = (props: LoadMoreProps) => {
     saveScrollPosition()
     const newItems = await props.loadFunction(offset())
     if (!Array.isArray(newItems)) return
-    console.debug('[_share] load more items', newItems)
     setItems(
       (prev) =>
         Array.from(new Set([...prev, ...newItems])).sort(

src/routes/(main).tsx

@@ -79,7 +79,7 @@ export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
     topFeed: topRatedFeed
   } = useFeed()
 
-  // load more faetured shouts
+  // load more featured shouts
   const loadMoreFeatured = async (offset?: number) => {
     const shoutsLoader = featuredLoader(offset)
     const loaded = await shoutsLoader()

src/routes/topic/[slug]/[...tab].tsx

@@ -1,6 +1,6 @@
 import { RouteSectionProps, createAsync } from '@solidjs/router'
 import { HttpStatusCode } from '@solidjs/start'
-import { Show, Suspense, createEffect, createMemo, createSignal } from 'solid-js'
+import { Show, Suspense, createEffect, createSignal, on } from 'solid-js'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { TopicFeedSortBy, TopicView } from '~/components/Views/Topic'
 import { Loading } from '~/components/_shared/Loading'
@@ -21,6 +21,7 @@ const fetchTopicShouts = async (slug: string, offset?: number) => {
 
 const fetchAllTopics = async () => {
   const topicsFetcher = loadTopics()
+  console.debug('all topics fetched')
   return await topicsFetcher()
 }
 
@@ -38,55 +39,45 @@ export type TopicPageProps = { articles?: Shout[]; topics: Topic[]; authors?: Au
 
 export default function TopicPage(props: RouteSectionProps<TopicPageProps>) {
   const { t } = useLocalize()
-  const { addTopics, sortedTopics } = useTopics()
+  const { addTopics } = useTopics()
-  const [loadingError, setLoadingError] = createSignal(false)
+  const topics = createAsync(async () => props.data.topics || (await fetchAllTopics()) || [])
-
+  const articles = createAsync(async () => {
-  const topic = createAsync(async () => {
+    const result = (await props.data).articles || (await fetchTopicShouts(props.params.slug))
-    try {
+    setShoutsLoaded(true)
-      let ttt: Topic[] = sortedTopics()
+    return result || []
-      if (!ttt) {
-        ttt = props.data.topics || (await fetchAllTopics()) || []
-        addTopics(ttt)
-        console.debug('[route.topic] all topics loaded')
-      }
-      const t = ttt.find((x) => x.slug === props.params.slug)
-      return t
-    } catch (_error) {
-      setLoadingError(true)
-      return null
-    }
   })
-
+  const [topic, setTopic] = createSignal<Topic>()
-  const articles = createAsync(
+  const [title, setTitle] = createSignal<string>('')
-    async () => props.data.articles || (await fetchTopicShouts(props.params.slug)) || []
+  const [desc, setDesc] = createSignal<string>('')
-  )
+  const [cover, setCover] = createSignal<string>('')
-
+  const [shoutsLoaded, setShoutsLoaded] = createSignal(false)
-  const title = createMemo(() => `${t('Discours')}${topic()?.title ? ` :: ${topic()?.title}` : ''}`)
+  createEffect(on([topics, () => window], ([ttt, win]) => {
-
+    if (ttt) {
-  createEffect(() => {
+      // console.debug('all topics:', ttt)
-    if (topic() && window) {
+      ttt && addTopics(ttt)
-      window?.gtag?.('event', 'page_view', {
+      const tpc = ttt.find((x) => x.slug === props.params.slug)
-        page_title: topic()?.title,
+      if (!tpc) return
-        page_location: window?.location.href,
+      setTopic(tpc)
-        page_path: window?.location.pathname
+      setTitle(() => `${t('Discours')}${topic()?.title ? ` :: ${topic()?.title}` : ''}`)
-      })
+      setDesc(() =>
-    }
-  })
-
-  const desc = createMemo(() =>
         topic()?.body
           ? descFromBody(topic()?.body || '')
           : t('The most interesting publications on the topic', { topicName: title() })
       )
-
+      setCover(() =>
-  const cover = createMemo(() =>
         topic()?.pic ? getImageUrl(topic()?.pic || '', { width: 1200 }) : '/logo.png'
       )
+      if (win) window?.gtag?.('event', 'page_view', {
+          page_title: tpc.title,
+          page_location: window?.location.href,
+          page_path: window?.location.pathname
+        })
+    }
+  }, { defer: true }))
 
   return (
-    <Suspense fallback={<Loading />}>
     <Show
-        when={!loadingError()}
+      when={shoutsLoaded()}
       fallback={
         <PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
           <FourOuFourView />
@@ -94,6 +85,7 @@ export default function TopicPage(props: RouteSectionProps<TopicPageProps>) {
         </PageLayout>
       }
     >
+      <Suspense fallback={<Loading />}>
         <PageLayout
           key="topic"
           title={title()}
@@ -109,7 +101,7 @@ export default function TopicPage(props: RouteSectionProps<TopicPageProps>) {
             selectedTab={props.params.tab as TopicFeedSortBy}
           />
         </PageLayout>
-      </Show>
       </Suspense>
+    </Show>
   )
 }