Feature/update topic badge (#250)

* update TopicBadge view
* Shouts and comments count in profile page

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -39,18 +39,12 @@
     .title {
       color: var(--blue-500);
       font-weight: 700;
+      text-transform: uppercase;
     }
 
     .description {
       color: var(--black-400);
     }
-
-    .stat {
-      display: flex;
-      gap: 1rem;
-      flex-direction: row;
-      color: var(--default-color);
-    }
   }
 
   .actions {

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -51,27 +51,17 @@ export const TopicBadge = (props: Props) => {
         style={props.topic.pic && { 'background-image': `url('${imageProxy(props.topic.pic)}')` }}
       />
       <a href={`/topic/${props.topic.slug}`} class={styles.info}>
-        <span class={styles.title}>{capitalize(props.topic.title)}</span>
-        <Show when={props.topic.body}>
+        <span class={styles.title}>{props.topic.title}</span>
+        <Show
+          when={props.topic.body}
+          fallback={
+            <div class={styles.description}>
+              {props.topic.stat.shouts ?? 0}&nbsp;{t('Publications')}
+            </div>
+          }
+        >
           <div class={clsx('text-truncate', styles.description)}>{props.topic.body}</div>
         </Show>
-        <span class={styles.stat}>
-          <Show when={props.topic.stat.authors}>
-            <div>
-              {t('Authors')}: {props.topic.stat.authors}
-            </div>
-          </Show>
-          <Show when={props.topic.stat.followers}>
-            <div>
-              {t('Followers')}: {props.topic.stat.followers}
-            </div>
-          </Show>
-          <Show when={props.topic.stat.shouts}>
-            <div>
-              {t('Publications')}: {props.topic.stat.shouts}
-            </div>
-          </Show>
-        </span>
       </a>
       <Show when={isAuthenticated()}>
         <div class={styles.actions}>

src/components/Views/Author/Author.tsx

@@ -36,6 +36,7 @@ export const AuthorView = (props: Props) => {
   const { page } = useRouter()
   const author = createMemo(() => authorEntities()[props.authorSlug])
 
+  console.log('!!! author:', author())
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [isBioExpanded, setIsBioExpanded] = createSignal(false)
   const [followers, setFollowers] = createSignal<Author[]>([])
@@ -139,11 +140,13 @@ export const AuthorView = (props: Props) => {
           <div class="col-md-16">
             <ul class="view-switcher">
               <li classList={{ 'view-switcher__item--selected': page().route === 'author' }}>
-                <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>{t('Publications')}</a>
+                <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
+                  {t('Publications')}&nbsp;({author().stat.shouts})
+                </a>
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'authorComments' }}>
                 <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
-                  {t('Comments')}
+                  {t('Comments')}&nbsp;({author().stat.commented})
                 </a>
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'authorAbout' }}>

src/graphql/query/author-by-slug.ts

@@ -9,14 +9,17 @@ export default gql`
       bio
       about
       userpic
-      communities
+      # communities
       links
       createdAt
       lastSeen
-      # ratings {
-      #  rater
-      #  value
-      # }
+      stat {
+        shouts
+        followers
+        followings
+        rating
+        commented
+      }
     }
   }
 `

src/graphql/types.gen.ts

@@ -318,7 +318,7 @@ export type ProfileInput = {
 
 export type Query = {
   authorsAll: Array<Maybe<Author>>
-  getAuthor?: Maybe<User>
+  getAuthor?: Maybe<Author>
   getTopic?: Maybe<Topic>
   isEmailUsed: Scalars['Boolean']
   loadAuthorsBy: Array<Maybe<Author>>