render-sync

src/components/Topic/Full.tsx

@@ -9,7 +9,7 @@ import { useSession } from '../../context/session'
 import { FollowingEntity } from '../../graphql/schema/core.gen'
 import { Button } from '../_shared/Button'
 
-import { FollowingCounters } from '../_shared/FollowingCounters'
+import { FollowingCounters } from '../_shared/FollowingCounters/FollowingCounters'
 import { Icon } from '../_shared/Icon'
 import styles from './Full.module.scss'
 
@@ -58,8 +58,8 @@ export const FullTopic = (props: Props) => {
         <FollowingCounters
           followers={props.followers}
           followersAmount={props.topic?.stat?.followers}
-          following={props.authors}
-          followingAmount={props.topic?.stat?.authors}
+          authors={props.authors}
+          authorsAmount={props.topic?.stat?.authors || props.authors?.length || 0}
         />
       </div>
 

src/components/Views/Topic.tsx

@@ -51,18 +51,17 @@ export const TopicView = (props: Props) => {
 
   const [topic, setTopic] = createSignal<Topic>()
   createEffect(
-    on(
-      [topic, topicEntities],
-      ([t, ttt]) => {
-        if (props.topicSlug && !t && ttt) {
-          setTopic(ttt[props.topicSlug])
-          loadTopicFollowers()
-          loadTopicAuthors()
-          loadRandom()
-        }
-      },
-      { defer: true },
-    ),
+    on([() => props.topicSlug, topic, topicEntities], ([slug, t, ttt]) => {
+      if (slug && !t && ttt) {
+        console.debug(`${ttt.length} topics preloaded`)
+        const current = ttt[slug]
+        console.debug(current)
+        setTopic(current)
+        loadTopicFollowers()
+        loadTopicAuthors()
+        loadRandom()
+      }
+    }),
   )
 
   const [followers, setFollowers] = createSignal<Author[]>(props.followers || [])

src/components/_shared/FollowingCounters/FollowingCounters.tsx

@@ -1,4 +1,4 @@
-import { For, Show } from 'solid-js'
+import { For, Show, createMemo } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 
@@ -12,55 +12,74 @@ type Props = {
   followersAmount?: number
   following?: Array<Author | Topic>
   followingAmount?: number
+  authors?: Author[]
+  authorsAmount?: number
+  topics?: Topic[]
+  topicsAmount?: number
 }
 
+const UserpicList = (props: { items: Array<Author | Topic> }) => (
+  <div class={styles.subscribersList}>
+    <For each={props.items.slice(0, 3)}>
+      {(item) => (
+        <Userpic
+          size="XS"
+          name={'name' in item ? item.name : 'title' in item ? item.title : ''}
+          userpic={item.pic}
+          class={styles.subscribersItem}
+        />
+      )}
+    </For>
+  </div>
+)
+
+const Counter = (props: { count: number; label: string }) => (
+  <div class={styles.subscribersCounter}>{props.label}</div>
+)
+
 export const FollowingCounters = (props: Props) => {
   const { t } = useLocalize()
 
+  const getFollowersCount = createMemo(() => props.followersAmount || props.followers?.length || 0)
+  const getFollowingCount = createMemo(() => props.followingAmount || props.following?.length || 0)
+  const getAuthorsCount = createMemo(() => props.authorsAmount || props.authors?.length || 0)
+  const getTopicsCount = createMemo(() => props.topicsAmount || props.topics?.length || 0)
+
   return (
     <>
       <a href="?m=followers" class={styles.subscribers}>
-        <Show when={props.followers && props.followers.length > 0}>
-          <div class={styles.subscribersList}>
-            <For each={props.followers.slice(0, 3)}>
-              {(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />}
-            </For>
-          </div>
+        <Show when={getFollowersCount() > 0}>
+          <UserpicList items={props.followers || []} />
         </Show>
-        <div class={styles.subscribersCounter}>
-          {t('some followers', {
-            count: props.followersAmount || props.followers.length || 0,
-          })}
-        </div>
+        <Counter count={getFollowersCount()} label={t('some followers', { count: getFollowersCount() })} />
       </a>
 
       <a href="?m=following" class={styles.subscribers}>
-        <Show when={props.following && props.following.length > 0}>
-          <div class={styles.subscribersList}>
-            <For each={props.following.slice(0, 3)}>
-              {(f) => {
-                if ('name' in f) {
-                  return (
-                    <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
-                  )
-                }
-
-                if ('title' in f) {
-                  return (
-                    <Userpic size={'XS'} name={f.title} userpic={f.pic} class={styles.subscribersItem} />
-                  )
-                }
-
-                return null
-              }}
-            </For>
-          </div>
+        <Show when={getFollowingCount() > 0}>
+          <UserpicList items={props.following || []} />
+        </Show>
+        <Show
+          when={getFollowingCount() > 0}
+          fallback={
+            <>
+              <Show when={getAuthorsCount() > 0}>
+                <UserpicList items={props.authors || []} />
+                <Counter
+                  count={getAuthorsCount()}
+                  label={t('some authors', { count: getAuthorsCount() })}
+                />
+              </Show>
+              <Show when={getTopicsCount() > 0}>
+                <Counter count={getTopicsCount()} label={t('some topics', { count: getTopicsCount() })} />
+              </Show>
+            </>
+          }
+        >
+          <Counter
+            count={getFollowingCount()}
+            label={t('some followings', { count: getFollowingCount() })}
+          />
         </Show>
-        <div class={styles.subscribersCounter}>
-          {t('some followings', {
-            count: props.followingAmount || props.following?.length || 0,
-          })}
-        </div>
       </a>
     </>
   )