topic followers + shouts counter

src/components/Topic/Full.tsx

@@ -1,7 +1,7 @@
-import type { Topic } from '../../graphql/schema/core.gen'
+import type { Author, Topic } from '../../graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
-import { Show, createEffect, createSignal } from 'solid-js'
+import { For, Show, createEffect, createSignal } from 'solid-js'
 
 import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
@@ -9,10 +9,13 @@ import { useSession } from '../../context/session'
 import { FollowingEntity } from '../../graphql/schema/core.gen'
 import { Button } from '../_shared/Button'
 
+import stylesCard from '../Author/AuthorCard/AuthorCard.module.scss'
+import { Userpic } from '../Author/Userpic'
 import styles from './Full.module.scss'
 
 type Props = {
   topic: Topic
+  followers?: Author[]
 }
 
 export const FullTopic = (props: Props) => {
@@ -40,6 +43,31 @@ export const FullTopic = (props: Props) => {
   return (
     <div class={clsx(styles.topicHeader, 'col-md-16 col-lg-12 offset-md-4 offset-lg-6')}>
       <h1>#{props.topic?.title}</h1>
+
+      <div class={stylesCard.subscribersContainer}>
+        <Show when={props.followers && props.followers.length > 0}>
+          <a href="?m=followers" class={stylesCard.subscribers}>
+            <For each={props.followers.slice(0, 3)}>
+              {(f) => (
+                <Userpic size={'XS'} name={f.name} userpic={f.pic} class={stylesCard.subscribersItem} />
+              )}
+            </For>
+            <div class={stylesCard.subscribersCounter}>
+              {t('SubscriberWithCount', {
+                count: props.followers.length ?? 0,
+              })}
+            </div>
+          </a>
+        </Show>
+        <Show when={props.topic?.stat?.shouts}>
+          <div class={stylesCard.subscribersCounter}>
+            {t('PublicationsWithCount', {
+              count: props.topic?.stat?.shouts ?? 0,
+            })}
+          </div>
+        </Show>
+      </div>
+
       <p innerHTML={props.topic?.body} />
       <div class={clsx(styles.topicActions)}>
         <Button
@@ -52,7 +80,7 @@ export const FullTopic = (props: Props) => {
         </a>
       </div>
       <Show when={props.topic?.pic}>
-        <img src={props.topic.pic} alt={props.topic?.title} />
+        <img src={props.topic?.pic} alt={props.topic?.title} />
       </Show>
     </div>
   )

src/components/Views/Topic.tsx

@@ -1,4 +1,4 @@
-import { LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
+import { Author, LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
@@ -33,6 +33,7 @@ interface Props {
   topic: Topic
   shouts: Shout[]
   topicSlug: string
+  followers?: Author[]
 }
 
 export const PRERENDERED_ARTICLES_COUNT = 28
@@ -56,6 +57,11 @@ export const TopicView = (props: Props) => {
       setTopic(topics[props.topicSlug])
     }
   })
+  const [followers, setFollowers] = createSignal<Author[]>(props.followers || [])
+  const loadTopicFollowers = async () => {
+    const result = await apiClient.getTopicFollowers({ slug: props.topicSlug })
+    setFollowers(result)
+  }
 
   const loadFavoriteTopArticles = async (topic: string) => {
     const options: LoadShoutsOptions = {
@@ -89,8 +95,11 @@ export const TopicView = (props: Props) => {
 
   createEffect(
     on(
-      () => topic(),
-      () => loadRandom(),
+      () => topic()?.id,
+      (_) => {
+        loadTopicFollowers()
+        loadRandom()
+      },
       { defer: true },
     ),
   )
@@ -158,7 +167,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()} />
+      <FullTopic topic={topic()} followers={followers()} />
       <div class="wide-container">
         <div class={clsx(styles.groupControls, 'row group__controls')}>
           <div class="col-md-16">

src/graphql/client/core.ts

@@ -5,6 +5,7 @@ import type {
   LoadShoutsOptions,
   MutationDelete_ShoutArgs,
   ProfileInput,
+  QueryGet_Topic_FollowersArgs,
   QueryLoad_Authors_ByArgs,
   QueryLoad_Shouts_Random_TopArgs,
   QueryLoad_Shouts_SearchArgs,
@@ -44,6 +45,7 @@ import authorsAll from '../query/core/authors-all'
 import authorsLoadBy from '../query/core/authors-load-by'
 import reactionsLoadBy from '../query/core/reactions-load-by'
 import topicBySlug from '../query/core/topic-by-slug'
+import topicFollowers from '../query/core/topic-followers'
 import topicsAll from '../query/core/topics-all'
 import topicsRandomQuery from '../query/core/topics-random'
 
@@ -129,6 +131,11 @@ export const apiClient = {
     return response.data.get_author_followers
   },
 
+  getTopicFollowers: async ({ slug }: QueryGet_Topic_FollowersArgs): Promise<Author[]> => {
+    const response = await publicGraphQLClient.query(topicFollowers, { slug }).toPromise()
+    return response.data.get_topic_followers
+  },
+
   getAuthorFollows: async (params: {
     slug?: string
     author_id?: number

src/graphql/query/core/topic-followers.ts

@@ -0,0 +1,25 @@
+import { gql } from '@urql/core'
+
+export default gql`
+  query TopicFollowersQuery($slug: String) {
+    get_topic_followers(slug: $slug) {
+      id
+      slug
+      name
+      bio
+      about
+      pic
+      # communities
+      links
+      created_at
+      last_seen
+      stat {
+        shouts
+        authors
+        followers
+        rating
+        comments
+      }
+    }
+  }
+`