Fix avatar wall

src/components/Drawer/Header/styles.module.css

@@ -15,7 +15,7 @@
 
   & h2 {
     font-size: var(--text20);
-    font-weight: var(--font-semibold);
+    font-weight: var(--font-medium);
     line-height: 1.5;
   }
 

src/views/CampaignDetail/Participants/Drawer.tsx

@@ -26,17 +26,15 @@ export const ParticipantsDrawer: React.FC<DrawerProps> = ({
       <Drawer.Header
         title={
           <>
-            <span className={styles.drawerTitle}>
-              {intl.formatMessage({
-                defaultMessage: 'Writers',
-                description:
-                  'src/views/CampaignDetail/SideParticipants/index.tsx',
-                id: 'xl95XN',
-              })}{' '}
-              {totalParticipants > 0 && (
-                <span className={styles.count}>{totalParticipants}</span>
-              )}
-            </span>
+            {intl.formatMessage({
+              defaultMessage: 'Writers',
+              description:
+                'src/views/CampaignDetail/SideParticipants/index.tsx',
+              id: 'xl95XN',
+            })}{' '}
+            {totalParticipants > 0 && (
+              <span className={styles.count}>{totalParticipants}</span>
+            )}
           </>
         }
         closeDrawer={onClose}

src/views/CampaignDetail/Participants/styles.module.css

@@ -1,7 +1,3 @@
-.drawerTitle {
-  font-weight: var(--font-medium);
-}
-
 .count {
   font-weight: var(--font-normal);
   color: var(--color-grey);

src/views/CampaignDetail/SideParticipants/gql.ts

@@ -7,7 +7,7 @@ export const fragments = {
     fragment SideParticipantsCampaignPublic on WritingChallenge {
       id
       shortHash
-      sideParticipants: participants(input: { first: 60 }) {
+      sideParticipants: participants(input: { first: null }) {
         totalCount
         edges {
           cursor

src/views/CampaignDetail/SideParticipants/index.tsx

@@ -1,6 +1,6 @@
 import _shuffle from 'lodash/shuffle'
 import dynamic from 'next/dynamic'
-import { useContext, useState } from 'react'
+import { useContext, useMemo, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { ReactComponent as IconRight } from '@/public/static/icons/24px/right.svg'
@@ -80,12 +80,42 @@ const SideParticipants = ({ campaign }: SideParticipantsProps) => {
     setOpenDrawer((prevState) => !prevState)
   }
 
-  if (edges && edges.length <= 0) {
+  const getFilteredEdges = () => {
+    if (!edges) {
+      return []
+    }
+
+    const withAvatars = edges.filter(
+      ({ node }) => node.avatar && node.id !== viewer.id
+    )
+    const withoutAvatars = edges.filter(
+      ({ node }) => !node.avatar && node.id !== viewer.id
+    )
+
+    const shuffledAvatars = _shuffle(withAvatars).slice(
+      0,
+      isViewerApplySucceeded ? maxAvatarCount - 2 : maxAvatarCount - 1
+    )
+    const remainingSlots = isViewerApplySucceeded
+      ? maxAvatarCount - shuffledAvatars.length - 2
+      : maxAvatarCount - shuffledAvatars.length - 1
+
+    const additionalEdges = _shuffle(withoutAvatars).slice(0, remainingSlots)
+
+    return shuffledAvatars.concat(additionalEdges)
+  }
+
+  const filteredEdges = useMemo(getFilteredEdges, [
+    edges,
+    isViewerApplySucceeded,
+  ])
+
+  if (filteredEdges.length <= 0) {
     return null
   }
 
   return (
-    <DrawerProvider>
+    <>
       <section className={styles.participants}>
         <section className={styles.header}>
           <h2>
@@ -120,14 +150,7 @@ const SideParticipants = ({ campaign }: SideParticipantsProps) => {
         <section className={styles.avatars}>
           {isViewerApplySucceeded && <Participant user={viewer} />}
 
-          {_shuffle(
-            edges
-              ?.slice(
-                0,
-                isViewerApplySucceeded ? maxAvatarCount - 2 : maxAvatarCount - 1
-              )
-              ?.filter((u) => u.node.id !== viewer.id)
-          ).map(({ node, cursor }, i) => (
+          {filteredEdges.map(({ node, cursor }, i) => (
             <Participant
               key={cursor}
               user={node}
@@ -158,12 +181,14 @@ const SideParticipants = ({ campaign }: SideParticipantsProps) => {
           )}
         </section>
       </section>
-      <DynamicParticipantsDrawer
-        isOpen={openDrawer}
-        onClose={toggleDrawer}
-        totalParticipants={totalCount}
-      />
-    </DrawerProvider>
+      <DrawerProvider>
+        <DynamicParticipantsDrawer
+          isOpen={openDrawer}
+          onClose={toggleDrawer}
+          totalParticipants={totalCount}
+        />
+      </DrawerProvider>
+    </>
   )
 }