From 0b06e4167097890cfa0f7816e409df7a571e1e67 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Sat, 18 May 2024 20:16:45 +0300
Subject: [PATCH] authors added

---
 .../Author/AuthorCard/AuthorCard.tsx          |  7 +++-
 src/components/Topic/Full.tsx                 |  8 +++-
 src/components/Views/Topic.tsx                | 18 ++++++++-
 .../_shared/Subscribers/Subscribers.tsx       | 40 ++++++++++---------
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 1f0d3ac1..6a75dab0 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/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>
diff --git a/src/components/Topic/Full.tsx b/src/components/Topic/Full.tsx
index 497c584a..543159dd 100644
--- a/src/components/Topic/Full.tsx
+++ b/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)}>
diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index 3d7ae3f3..8579a739 100644
--- a/src/components/Views/Topic.tsx
+++ b/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">
diff --git a/src/components/_shared/Subscribers/Subscribers.tsx b/src/components/_shared/Subscribers/Subscribers.tsx
index e418f37f..97a5afc7 100644
--- a/src/components/_shared/Subscribers/Subscribers.tsx
+++ b/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>
   )
 }