Show user followers

src/components/Author/Card.module.scss

@@ -1,6 +1,8 @@
 .author {
   align-items: flex-start;
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   margin-bottom: 2.4rem;
 
   &:last-child {
@@ -293,6 +295,12 @@
   }
 }
 
+.nowrapView {
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0;
+}
+
 .authorComments {
   .authorName {
     @include font-size(1.2rem);

src/components/Author/Card.tsx

@@ -30,6 +30,7 @@ interface AuthorCardProps {
   liteButtons?: boolean
   isComments?: boolean
   isFeedMode?: boolean
+  isNowrap?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -83,7 +84,8 @@ export const AuthorCard = (props: AuthorCardProps) => {
         [styles.authorPage]: props.isAuthorPage,
         [styles.authorComments]: props.isComments,
         [styles.authorsListItem]: props.isAuthorsList,
-        [styles.feedMode]: props.isFeedMode
+        [styles.feedMode]: props.isFeedMode,
+        [styles.nowrapView]: props.isNowrap
       }}
     >
       <Userpic

src/components/Views/Author.module.scss

@@ -55,4 +55,19 @@
   max-height: 15em;
   overflow: auto;
   position: relative;
+
+  .subscriber {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+    border-radius: 4px;
+    padding: 8px 4px;
+    transition: background 0.2s ease-in-out;
+
+    &:hover {
+      background: #f7f7f7;
+    }
+  }
 }

src/components/Views/Author.tsx

@@ -18,6 +18,7 @@ import { Popup } from '../_shared/Popup'
 import { AuthorCard } from '../Author/Card'
 import { apiClient } from '../../utils/apiClient'
 import { Comment } from '../Article/Comment'
+import DialogAvatar from '../Inbox/DialogAvatar'
 
 // TODO: load reactions on client
 type AuthorProps = {
@@ -43,7 +44,16 @@ export const AuthorView = (props: AuthorProps) => {
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
   const author = createMemo(() => authorEntities()[props.authorSlug])
-  const subscribers = Array.from({ length: 12 }).fill(author())
+  const [followers, setFollowers] = createSignal<Author[]>([])
+  onMount(async () => {
+    try {
+      const authorSubscribers = await apiClient.getAuthorFollowers({ slug: props.author.slug })
+      setFollowers(authorSubscribers)
+    } catch (error) {
+      console.log('[getAuthorSubscribers]', error)
+    }
+  })
+
   const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
 
   changeSearchParam('by', 'rating')
@@ -136,19 +146,36 @@ export const AuthorView = (props: AuthorProps) => {
                 {...props}
                 trigger={
                   <div class={styles.subscribers}>
-                    <Userpic user={author()} class={styles.userpic} />
+                    <Switch>
-                    <Userpic user={author()} class={styles.userpic} />
+                      <Match when={followers().length <= 3}>
-                    <Userpic user={author()} class={styles.userpic} />
+                        <For each={followers().slice(0, 3)}>
-                    <div class={clsx(styles.userpic, styles.subscribersCounter)}>12</div>
+                          {(f) => <Userpic user={f} class={styles.userpic} />}
+                        </For>
+                      </Match>
+                      <Match when={followers().length > 3}>
+                        <For each={followers().slice(0, 2)}>
+                          {(f) => <Userpic user={f} class={styles.userpic} />}
+                        </For>
+                        <div class={clsx(styles.userpic, styles.subscribersCounter)}>
+                          {followers().length}
+                        </div>
+                      </Match>
+                    </Switch>
                   </div>
                 }
                 variant="tiny"
               >
                 <ul class={clsx('nodash', styles.subscribersList)}>
-                  <For each={subscribers}>
+                  <For each={followers()}>
                     {(item: Author) => (
-                      <li>
+                      <li class={styles.subscriber}>
-                        <AuthorCard author={item} hideDescription={true} hideFollow={true} hasLink={true} />
+                        <AuthorCard
+                          author={item}
+                          isNowrap={true}
+                          hideDescription={true}
+                          hideFollow={true}
+                          hasLink={true}
+                        />
                       </li>
                     )}
                   </For>
@@ -156,7 +183,7 @@ export const AuthorView = (props: AuthorProps) => {
               </Popup>
 
               <div class={styles.ratingContainer}>
-                Карма
+                {t('Karma')}
                 <RatingControl rating={19} class={styles.ratingControl} />
               </div>
             </div>

src/graphql/query/author-followers.ts

@@ -2,22 +2,12 @@ import { gql } from '@urql/core'
 
 export default gql`
   query UserSubscribersQuery($slug: String!) {
-    userSubcribers(slug: $slug) {
+    userFollowers(slug: $slug) {
       _id: slug
       id
       slug
       name
-      bio
       userpic
-      communities
-      links
-      createdAt
-      lastSeen
-      ratings {
-        _id: rater
-        rater
-        value
-      }
     }
   }
 `

src/locales/ru.json

@@ -237,5 +237,6 @@
   "Header": "Заголовок",
   "Subheader": "Подзаголовок",
   "A short introduction to keep the reader interested": "Небольшое вступление, чтобы заинтересовать читателя",
-  "Publish": "Опубликовать"
+  "Publish": "Опубликовать",
+  "Karma": "Карма"
 }

src/utils/apiClient.ts

@@ -37,6 +37,7 @@ import createArticle from '../graphql/mutation/article-create'
 import myChats from '../graphql/query/chats-load'
 import chatMessagesLoadBy from '../graphql/query/chat-messages-load-by'
 import authorBySlug from '../graphql/query/author-by-slug'
+import userSubscribers from '../graphql/query/author-followers'
 import topicBySlug from '../graphql/query/topic-by-slug'
 import createChat from '../graphql/mutation/create-chat'
 import reactionsLoadBy from '../graphql/query/reactions-load-by'
@@ -217,9 +218,12 @@ export const apiClient = {
     const response = await publicGraphQLClient.query(authorBySlug, { slug }).toPromise()
     return response.data.getAuthor
   },
+  getAuthorFollowers: async ({ slug }: { slug: string }): Promise<Author[]> => {
+    const response = await publicGraphQLClient.query(userSubscribers, { slug }).toPromise()
+    return response.data.userFollowers
+  },
   updateProfile: async (input: ProfileInput) => {
     const response = await privateGraphQLClient.mutation(updateProfile, { profile: input }).toPromise()
-    console.log('!!! response.data.getAuthor:', response.data.updateProfile)
     return response.data.updateProfile
   },
   getTopic: async ({ slug }: { slug: string }): Promise<Topic> => {