Show all applicants (#4426)

* Show all applicants

All applicants means all. Hiding withdrawn (ie. not hired) distorts historic opening view.

* Show all hired, fix stats

* prettier

* Show all hires

---------

Co-authored-by: Joystream Stats <dev@joystreamstats.live>

packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx

@@ -52,9 +52,9 @@ export const WorkingGroupOpening = () => {
     }
   }, [opening?.applications])
 
-  const hiringApplication = useMemo(() => {
+  const hiredApplicants = useMemo(() => {
     if (activeApplications) {
-      return activeApplications.find(({ status }) => status === 'ApplicationStatusAccepted')
+      return activeApplications.filter(({ status }) => status === 'ApplicationStatusAccepted')
     }
   }, [opening?.id])
   const myApplication = useMemo(() => {
@@ -161,7 +161,11 @@ export const WorkingGroupOpening = () => {
                 tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups#staking"
                 value={opening.stake}
               />
-              <ApplicationStats applicants={opening.applicants} hiring={opening.hiring} status={opening.status} />
+              <ApplicationStats
+                applicants={opening.applications?.length ?? 0}
+                hiring={opening.hiring}
+                status={opening.status}
+              />
             </Statistics>
           </RowGapBlock>
         </PageHeaderWrapper>
@@ -174,9 +178,9 @@ export const WorkingGroupOpening = () => {
       sidebar={
         <SidePanel scrollable>
           <ApplicantsList
-            allApplicants={activeApplications}
+            allApplicants={opening.applications}
             myApplication={myApplication}
-            hired={hiringApplication}
+            hired={hiredApplicants}
             hiringComplete={opening.status !== OpeningStatuses.OPEN}
           />
           {opening.status === OpeningStatuses.OPEN && !activeApplications?.length && <ApplicationStatus />}

packages/ui/src/working-groups/components/ApplicantsList.tsx

@@ -10,7 +10,7 @@ import { Worker } from './Worker'
 
 export interface WorkersListProps {
   myApplication?: WorkingGroupOpeningApplication
-  hired?: WorkingGroupOpeningApplication
+  hired?: WorkingGroupOpeningApplication[]
   allApplicants?: WorkingGroupOpeningApplication[]
   hiringComplete: boolean
 }
@@ -35,7 +35,9 @@ export const ApplicantsList = ({ hired, allApplicants, myApplication, hiringComp
       {hired && (
         <ContentWithTabs>
           <Label>Hired</Label>
-          <Worker member={hired.member} applicationId={hired.id} />
+          {hired.map((application, index) => (
+            <Worker key={index} member={application.member} applicationId={application.id} />
+          ))}
         </ContentWithTabs>
       )}
       <ContentWithTabs>