authors added

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -127,7 +127,12 @@ export const AuthorCard = (props: Props) => {
             <div class={styles.authorAbout} innerHTML={props.author.bio} />
           </Show>
           <Show when={props.followers?.length > 0 || props.following?.length > 0}>
-            <Subscribers followers={props.followers} following={props.following} />
+            <Subscribers
+              followers={props.followers}
+              followersAmount={props.author?.stat?.followers}
+              following={props.following}
+              followingAmount={props.author?.stat?.authors}
+            />
           </Show>
         </div>
         <ShowOnlyOnClient>

src/components/Topic/Full.tsx

@@ -16,6 +16,7 @@ import styles from './Full.module.scss'
 type Props = {
   topic: Topic
   followers?: Author[]
+  authors?: Author[]
 }
 
 export const FullTopic = (props: Props) => {
@@ -55,7 +56,12 @@ export const FullTopic = (props: Props) => {
           </div>
         </Show>
 
-        <Subscribers followers={props.followers} />
+        <Subscribers
+          followers={props.followers}
+          followersAmount={props.topic?.stat?.followers}
+          following={props.authors}
+          followingAmount={props.topic?.stat?.authors}
+        />
       </div>
 
       <div class={clsx(styles.topicActions)}>

src/components/Views/Topic.tsx

@@ -1,4 +1,11 @@
-import { Author, LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
+import {
+  Author,
+  AuthorsBy,
+  LoadShoutsOptions,
+  QueryLoad_Authors_ByArgs,
+  Shout,
+  Topic,
+} from '../../graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
@@ -87,6 +94,12 @@ export const TopicView = (props: Props) => {
 
     setReactedTopMonthArticles(result)
   }
+  const [topicAuthors, setTopicAuthors] = createSignal<Author[]>([])
+  const loadTopicAuthors = async () => {
+    const by: AuthorsBy = { topic: props.topicSlug }
+    const result = await apiClient.loadAuthorsBy({ by })
+    setTopicAuthors(result)
+  }
 
   const loadRandom = () => {
     loadFavoriteTopArticles(topic()?.slug)
@@ -98,6 +111,7 @@ export const TopicView = (props: Props) => {
       () => topic()?.id,
       (_) => {
         loadTopicFollowers()
+        loadTopicAuthors()
         loadRandom()
       },
       { defer: true },
@@ -167,7 +181,7 @@ export const TopicView = (props: Props) => {
       <Meta name="twitter:card" content="summary_large_image" />
       <Meta name="twitter:title" content={title()} />
       <Meta name="twitter:description" content={description()} />
-      <FullTopic topic={topic()} followers={followers()} />
+      <FullTopic topic={topic()} followers={followers()} authors={topicAuthors()} />
       <div class="wide-container">
         <div class={clsx(styles.groupControls, 'row group__controls')}>
           <div class="col-md-16">

src/components/_shared/Subscribers/Subscribers.tsx

@@ -8,8 +8,10 @@ import { Userpic } from '../../Author/Userpic'
 import styles from './Subscribers.module.scss'
 
 type Props = {
-  followers: Author[]
+  followers?: Author[]
+  followersAmount?: number
   following?: Array<Author | Topic>
+  followingAmount?: number
 }
 
 export const Subscribers = (props: Props) => {
@@ -17,21 +19,21 @@ export const Subscribers = (props: Props) => {
 
   return (
     <div class={styles.subscribersContainer}>
-      <Show when={props.followers && props.followers.length > 0}>
-        <a href="?m=followers" class={styles.subscribers}>
+      <a href="?m=followers" class={styles.subscribers}>
+        <Show when={props.followers && props.followers.length > 0}>
           <For each={props.followers.slice(0, 3)}>
             {(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />}
           </For>
-          <div class={styles.subscribersCounter}>
-            {t('SubscriberWithCount', {
-              count: props.followers.length ?? 0,
-            })}
-          </div>
-        </a>
-      </Show>
+        </Show>
+        <div class={styles.subscribersCounter}>
+          {t('SubscriberWithCount', {
+            count: props.followersAmount || props.followers.length || 0,
+          })}
+        </div>
+      </a>
 
-      <Show when={props.following && props.following.length > 0}>
-        <a href="?m=following" class={styles.subscribers}>
+      <a href="?m=following" class={styles.subscribers}>
+        <Show when={props.following && props.following.length > 0}>
           <For each={props.following.slice(0, 3)}>
             {(f) => {
               if ('name' in f) {
@@ -45,13 +47,13 @@ export const Subscribers = (props: Props) => {
               return null
             }}
           </For>
-          <div class={styles.subscribersCounter}>
-            {t('SubscriptionWithCount', {
-              count: props?.following.length ?? 0,
-            })}
-          </div>
-        </a>
-      </Show>
+        </Show>
+        <div class={styles.subscribersCounter}>
+          {t('SubscriptionWithCount', {
+            count: props.followingAmount || props.following?.length || 0,
+          })}
+        </div>
+      </a>
     </div>
   )
 }