Use MembersList in community tab - show member info on click

JoinColony · Mar 25, 2020 · 1bb2819 · 1bb2819
1 parent 076f968
commit 1bb2819
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 34 deletions.
diff --git a/src/modules/dashboard/components/Community/Community.css b/src/modules/dashboard/components/Community/Community.css
@@ -12,8 +12,6 @@
 }
 
 .communityRole {
-  margin-left: auto;
-  padding: 0 30px;
   font-size: var(--size-tiny);
   font-weight: var(--weight-semi);
   white-space: nowrap;

diff --git a/src/modules/dashboard/components/Community/Community.tsx b/src/modules/dashboard/components/Community/Community.tsx
@@ -1,24 +1,24 @@
-import React, { FC, useCallback, useState, useRef, useEffect } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Address } from '~types/index';
+import { ROLES_COMMUNITY } from '~constants';
+import Button from '~core/Button';
+import MembersList from '~core/MembersList';
+import { SpinnerLoader } from '~core/Preloaders';
 import {
+  AnyUser,
+  cacheUpdates,
   useColonySubscribedUsersQuery,
   useLoggedInUser,
-  useUserColonyAddressesQuery,
   useSubscribeToColonyMutation,
-  cacheUpdates,
+  useUserColonyAddressesQuery,
 } from '~data/index';
-import { domainsAndRolesFetcher } from '../../fetchers';
-import { getCommunityRoles } from '../../../transformers';
-import { useDataFetcher, useTransformer } from '~utils/hooks';
-import { ROLES_COMMUNITY } from '~constants';
+import { Address } from '~types/index';
 import { sortObjectsBy } from '~utils/arrays';
+import { useDataFetcher, useTransformer } from '~utils/hooks';
 
-import { Table, TableBody, TableCell } from '~core/Table';
-import { SpinnerLoader } from '~core/Preloaders';
-import UserListItem from '~admin/UserListItem';
-import Button from '~core/Button';
+import { getCommunityRoles } from '../../../transformers';
+import { domainsAndRolesFetcher } from '../../fetchers';
 
 import styles from './Community.css';
 
@@ -54,6 +54,10 @@ enum Roles {
   Member = 'member',
 }
 
+type CommunityUser = AnyUser & {
+  communityRole: Roles;
+};
+
 const displayName = 'dashboard.Community';
 
 const Community = ({ colonyAddress }: Props) => {
@@ -126,7 +130,7 @@ const Community = ({ colonyAddress }: Props) => {
     colony: { subscribedUsers },
   } = colonySubscribedUsers;
 
-  const communityUsers = subscribedUsers
+  const communityUsers: CommunityUser[] = subscribedUsers
     .map(user => {
       const {
         profile: { walletAddress: userAddress },
@@ -199,25 +203,16 @@ const Community = ({ colonyAddress }: Props) => {
           />
         </div>
       )}
-      <Table scrollable>
-        <TableBody className={styles.tableBody}>
-          {communityUsers.map(({ id: userAddress, communityRole }) => (
-            <UserListItem
-              address={userAddress}
-              key={userAddress}
-              showDisplayName
-              showUsername
-              showInfo={false}
-            >
-              <TableCell>
-                <span className={styles.communityRole}>
-                  <FormattedMessage id={ROLES_COMMUNITY[communityRole]} />
-                </span>
-              </TableCell>
-            </UserListItem>
-          ))}
-        </TableBody>
-      </Table>
+      <MembersList<CommunityUser>
+        colonyAddress={colonyAddress}
+        extraItemContent={({ communityRole }) => (
+          <span className={styles.communityRole}>
+            <FormattedMessage id={ROLES_COMMUNITY[communityRole]} />
+          </span>
+        )}
+        skillId={undefined}
+        users={communityUsers}
+      />
     </div>
   );
 };