Merge branch 'show_followers' into 'dev'

Show followers list

See merge request discoursio/discoursio-webapp!42

src/components/Article/Comment.tsx

@@ -105,7 +105,6 @@ export const Comment = (props: Props) => {
                 <Userpic
                   user={comment().createdBy as Author}
                   isBig={false}
-                  isAuthorsList={false}
                   class={clsx({
                     [styles.compactUserpic]: props.compact
                   })}

src/components/Article/FullArticle.tsx

@@ -123,10 +123,12 @@ export const FullArticle = (props: ArticleProps) => {
                   )}
                 </For>
               </div>
-              <div
-                class={styles.shoutCover}
-                style={{ 'background-image': `url('${props.article.cover}')` }}
-              />
+              <Show when={props.article.cover}>
+                <div
+                  class={styles.shoutCover}
+                  style={{ 'background-image': `url('${props.article.cover}')` }}
+                />
+              </Show>
             </div>
 
             <Show when={media() && props.article.layout !== 'image'}>
@@ -244,7 +246,7 @@ export const FullArticle = (props: ArticleProps) => {
               <For each={props.article.authors}>
                 {(a) => (
                   <div class="col-xl-12">
-                    <AuthorCard author={a} compact={false} hasLink={true} liteButtons={true} />
+                    <AuthorCard author={a} hasLink={true} liteButtons={true} />
                   </div>
                 )}
               </For>

src/components/Author/Card.tsx

@@ -16,7 +16,7 @@ import { useLocalize } from '../../context/localize'
 
 interface AuthorCardProps {
   caption?: string
-  compact?: boolean
+  hideWriteButton?: boolean
   hideDescription?: boolean
   hideFollow?: boolean
   hasLink?: boolean
@@ -166,7 +166,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
                   </button>
                 </Show>
 
-                <Show when={!props.compact && !props.isAuthorsList}>
+                <Show when={!props.hideWriteButton}>
                   <button
                     class={styles.button}
                     classList={{

src/components/Author/Full.tsx

@@ -6,7 +6,7 @@ export const AuthorFull = (props: { author: Author }) => {
   return (
     <div class="row">
       <div class="col-md-18 col-lg-16 user-details">
-        <AuthorCard author={props.author} compact={false} isAuthorPage={true} />
+        <AuthorCard author={props.author} isAuthorPage={true} />
       </div>
     </div>
   )

src/components/Feed/Beside.tsx

@@ -69,7 +69,7 @@ export const Beside = (props: BesideProps) => {
                         <Show when={props.wrapper === 'author'}>
                           <AuthorCard
                             author={value as Author}
-                            compact={true}
+                            hideWriteButton={true}
                             hasLink={true}
                             truncateBio={true}
                           />

src/components/Views/Author.tsx

@@ -99,7 +99,7 @@ export const AuthorView = (props: AuthorProps) => {
         })
         setCommented(data)
       } catch (error) {
-        console.error('[getReactionsBy]:', error)
+        console.error('[getReactionsBy comment]', error)
       }
     }
   })
@@ -209,6 +209,19 @@ export const AuthorView = (props: AuthorProps) => {
             </ul>
           </div>
         </Match>
+        <Match when={searchParams().by === 'followed'}>
+          <div class="wide-container">
+            <div class="row">
+              <For each={followers()}>
+                {(follower: Author) => (
+                  <div class="col-md-6 col-lg-4">
+                    <AuthorCard author={follower} hideWriteButton={true} hasLink={true} />
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Match>
         <Match when={searchParams().by === 'rating'}>
           <Row1 article={sortedArticles()[0]} />
           <Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} />

src/components/Views/Feed.tsx

@@ -123,7 +123,7 @@ export const FeedView = () => {
                 <For each={topAuthors().slice(0, 5)}>
                   {(author) => (
                     <li>
-                      <AuthorCard author={author} compact={true} hasLink={true} />
+                      <AuthorCard author={author} hideWriteButton={true} hasLink={true} />
                     </li>
                   )}
                 </For>
@@ -154,7 +154,7 @@ export const FeedView = () => {
                       <AuthorCard
                         author={comment.createdBy as Author}
                         isFeedMode={true}
-                        compact={true}
+                        hideWriteButton={true}
                         hideFollow={true}
                       />
                       <div class={clsx('text-truncate', styles.commentArticleTitle)}>