add member-break-down tables

TogetherCrew · Sep 26, 2024 · a54fc46 · a54fc46
1 parent 4eaea36
commit a54fc46
Show file tree

Hide file tree

Showing 18 changed files with 272 additions and 175 deletions.
diff --git a/src/components/global/EmptyState.tsx b/src/components/global/EmptyState.tsx
@@ -27,7 +27,7 @@ export default function EmptyState({
         onClick={() => {
           router.push('/community-settings');
         }}
-        className='mx-auto py-2 md:w-1/5'
+        className='mx-auto py-2 md:w-2/5'
       />
     </div>
   );

diff --git a/src/components/pages/statistics/ActiveMembersComposition.tsx b/src/components/pages/statistics/ActiveMembersComposition.tsx
@@ -289,28 +289,7 @@ export default function ActiveMembersComposition({
         />
       </div>
 
-      <div className='relative'>
-        <div
-          className={clsx(
-            platformType === 'discourse' ? 'rounded-xl p-4 blur-sm' : ''
-          )}
-        >
-          <ActiveMemberBreakdown />
-        </div>
-
-        {platformType === 'discourse' && (
-          <div className='absolute inset-0 flex items-center justify-center bg-white bg-opacity-75'>
-            <div className='rounded-lg border border-gray-300 bg-gray-50 p-4 text-center shadow-md'>
-              <h2 className='text-xl font-semibold text-gray-700'>
-                Coming Soon
-              </h2>
-              <p className='text-gray-500'>
-                Member breakdown will be available for <b>Discourse</b> soon.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
+      <ActiveMemberBreakdown platformType={platformType} />
 
       <div className='w-full'>
         <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>

diff --git a/src/components/pages/statistics/DisengagedMembersComposition.tsx b/src/components/pages/statistics/DisengagedMembersComposition.tsx
@@ -1,4 +1,4 @@
-import { Alert, AlertTitle, IconButton,Typography } from '@mui/material';
+import { Alert, AlertTitle, IconButton, Typography } from '@mui/material';
 import clsx from 'clsx';
 import router from 'next/router';
 import { useEffect, useState } from 'react';
@@ -275,28 +275,7 @@ export default function DisengagedMembersComposition({
         />
       </div>
 
-      <div className='relative'>
-        <div
-          className={clsx(
-            platformType === 'discourse' ? 'rounded-xl p-4 blur-sm' : ''
-          )}
-        >
-          <DisengagedMembersCompositionBreakdown />
-        </div>
-
-        {platformType === 'discourse' && (
-          <div className='absolute inset-0 flex items-center justify-center bg-white bg-opacity-75'>
-            <div className='rounded-lg border border-gray-300 bg-gray-50 p-4 text-center shadow-md'>
-              <h2 className='text-xl font-semibold text-gray-700'>
-                Coming Soon
-              </h2>
-              <p className='text-gray-500'>
-                Member breakdown will be available for <b>Discourse</b> soon.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
+      <DisengagedMembersCompositionBreakdown platformType={platformType} />
 
       <div className='w-full'>
         <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>

diff --git a/src/components/pages/statistics/Onboarding.tsx b/src/components/pages/statistics/Onboarding.tsx
@@ -1,4 +1,4 @@
-import { Alert, AlertTitle, IconButton,Typography } from '@mui/material';
+import { Alert, AlertTitle, IconButton, Typography } from '@mui/material';
 import clsx from 'clsx';
 import router from 'next/router';
 import { useEffect, useState } from 'react';
@@ -250,28 +250,7 @@ export default function Onboarding({
         />
       </div>
 
-      <div className='relative'>
-        <div
-          className={clsx(
-            platformType === 'discourse' ? 'rounded-xl p-4 blur-sm' : ''
-          )}
-        >
-          <OnboardingMembersBreakdown />
-        </div>
-
-        {platformType === 'discourse' && (
-          <div className='absolute inset-0 flex items-center justify-center bg-white bg-opacity-75'>
-            <div className='rounded-lg border border-gray-300 bg-gray-50 p-4 text-center shadow-md'>
-              <h2 className='text-xl font-semibold text-gray-700'>
-                Coming Soon
-              </h2>
-              <p className='text-gray-500'>
-                Member breakdown will be available for <b>Discourse</b> soon.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
+      <OnboardingMembersBreakdown platformType={platformType} />
 
       <div className='w-full'>
         <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>

diff --git a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.spec.tsx b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.spec.tsx
@@ -46,10 +46,6 @@ test('renders the dialog with all states', () => {
   const username = screen.getByText('John Doe');
   expect(username).toBeInTheDocument();
 
-  // Check if the roles are rendered
-  const roleElements = screen.getAllByTestId('role');
-  expect(roleElements.length).toBe(2);
-
   // Check if the activity compositions are rendered
   const compositionElements = screen.getAllByTestId('activity-composition');
   expect(compositionElements.length).toBe(2);

diff --git a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
@@ -36,50 +36,56 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
         <div className='space-y-6 py-2 px-8'>
           <div className='flex flex-row items-center'>
             <Avatar
-              src={`${conf.DISCORD_CDN}avatars/${rowDetail?.discordId}/${rowDetail?.avatar}.png`}
+              src={
+                rowDetail?.discordId
+                  ? `${conf.DISCORD_CDN}avatars/${rowDetail.discordId}/${rowDetail?.avatar}.png`
+                  : rowDetail?.avatar
+              }
               alt='User Avatar'
             />
             <span className='ml-2 text-base font-semibold'>
               {rowDetail?.username}
             </span>
           </div>
-          <div>
-            <p className='pb-2 text-base font-semibold'>Roles:</p>
-            <div className='flex flex-row flex-wrap'>
-              {rowDetail?.roles.map((role: any) => (
-                <div
-                  key={role.roleId}
-                  className='ml-1 flex flex-row flex-wrap items-center first:ml-0'
-                  style={{ whiteSpace: 'nowrap' }}
-                  data-testid='role'
-                >
-                  <span
-                    className='mb-2 flex items-center rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      backgroundColor:
-                        role.color !== 0
-                          ? `#${role.color.toString(16).padStart(6, '0')}`
-                          : '#96A5A6',
-                    }}
+          {rowDetail?.role && (
+            <div>
+              <p className='pb-2 text-base font-semibold'>Roles:</p>
+              <div className='flex flex-row flex-wrap'>
+                {rowDetail?.roles.map((role: any) => (
+                  <div
+                    key={role.roleId}
+                    className='ml-1 flex flex-row flex-wrap items-center first:ml-0'
+                    style={{ whiteSpace: 'nowrap' }}
+                    data-testid='role'
                   >
                     <span
-                      className='mr-2 h-2 w-2 rounded-full'
+                      className='mb-2 flex items-center rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                       style={{
+                        display: 'flex',
+                        alignItems: 'center',
                         backgroundColor:
                           role.color !== 0
                             ? `#${role.color.toString(16).padStart(6, '0')}`
                             : '#96A5A6',
-                        flexShrink: 0,
                       }}
-                    />
-                    {role.name}
-                  </span>
-                </div>
-              ))}
+                    >
+                      <span
+                        className='mr-2 h-2 w-2 rounded-full'
+                        style={{
+                          backgroundColor:
+                            role.color !== 0
+                              ? `#${role.color.toString(16).padStart(6, '0')}`
+                              : '#96A5A6',
+                          flexShrink: 0,
+                        }}
+                      />
+                      {role.name}
+                    </span>
+                  </div>
+                ))}
+              </div>
             </div>
-          </div>
+          )}
           <div>
             <p className='pb-2 text-base font-semibold'>
               Activity composition:

diff --git a/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx b/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
@@ -339,7 +339,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                       </div>
                     </Popover>
                   </>
-                ) : column.id === 'joinedAt' ? (
+                ) : column.id === 'joinedAt' || column.id === 'joined_at' ? (
                   <>
                     <Button
                       onClick={handleOpenJoinedAtPopup}
@@ -463,9 +463,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
                           <div className='flex items-center space-x-4'>
                             <Avatar
                               src={
-                                row.discordId && row?.avatar
+                                row.discordId
                                   ? `${conf.DISCORD_CDN}avatars/${row.discordId}/${row?.avatar}.png`
-                                  : ''
+                                  : row.avatar
                               }
                               alt='User Avatar'
                             />
@@ -650,8 +650,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
                               </div>
                             )}
                           </div>
-                        ) : column.id === 'joinedAt' ? (
-                          formatDate(row.joinedAt)
+                        ) : column.id === 'joinedAt' ||
+                          column.id === 'joined_at' ? (
+                          formatDate(row.joinedAt ?? row.joined_at)
                         ) : (
                           row[column.id]
                         )}

diff --git a/...components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.spec.tsx b/...components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.spec.tsx
@@ -8,7 +8,7 @@ describe('ActiveMemberBreakdown', () => {
   it('renders the component', () => {
     render(
       <TokenProvider>
-        <ActiveMemberBreakdown />
+        <ActiveMemberBreakdown platformType="discord" />
       </TokenProvider>
     );
 

diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
@@ -19,13 +19,19 @@ import {
 } from '../../../../../utils/interfaces';
 import TcButton from '../../../../shared/TcButton';
 
-const columns: Column[] = [
+const discordMemberBreakdownTableColumns: Column[] = [
   { id: 'username', label: 'Name' },
   { id: 'roles', label: 'Roles' },
   { id: 'activityComposition', label: 'Activity composition' },
   { id: 'joinedAt', label: 'DAO member since' },
 ];
 
+const discourseMemberBreakdownTableColumns: Column[] = [
+  { id: 'username', label: 'Name' },
+  { id: 'activityComposition', label: 'Activity composition' },
+  { id: 'joined_at', label: 'DAO member since' },
+];
+
 const options: IActivityCompositionOptions[] = [
   { name: 'Active members', value: 'all_active', color: '#3AAE2B' },
   { name: 'Newly active', value: 'all_new_active', color: '#FF9022' },
@@ -35,9 +41,15 @@ const options: IActivityCompositionOptions[] = [
   { name: 'Others', value: 'others', color: '#AAAAAA' },
 ];
 
-export default function ActiveMemberBreakdown() {
+interface IAcriveMemberBreakdownProps {
+  platformType: 'discord' | 'discourse';
+}
+
+export default function ActiveMemberBreakdown({
+  platformType,
+}: IAcriveMemberBreakdownProps) {
   const { getActiveMemberCompositionTable } = useAppStore();
-  const { community } = useToken();
+  const { selectedPlatform } = useToken();
 
   const tableTopRef = useRef<HTMLDivElement>(null);
 
@@ -58,11 +70,6 @@ export default function ActiveMemberBreakdown() {
     totalResults: 0,
   });
 
-  const platformId = community?.platforms.find(
-    (platform) =>
-      platform.disconnectedAt === null && platform.name === 'discord'
-  )?.id;
-
   const handlePageChange = (selectedPage: number) => {
     setPage(selectedPage);
     if (tableTopRef.current && isExpanded) {
@@ -71,14 +78,15 @@ export default function ActiveMemberBreakdown() {
   };
 
   useEffect(() => {
-    if (!platformId) {
+    if (!selectedPlatform) {
       return;
     }
 
     setLoading(true);
     const fetchData = async () => {
       const res = await getActiveMemberCompositionTable(
-        platformId,
+        selectedPlatform,
+        platformType,
         activityComposition,
         roles,
         username,
@@ -90,7 +98,7 @@ export default function ActiveMemberBreakdown() {
     };
 
     fetchData();
-  }, [page, roles, activityComposition, username, sortBy]);
+  }, [page, roles, activityComposition, username, sortBy, platformType]);
 
   useEffect(() => {
     setPage(1);
@@ -151,15 +159,16 @@ export default function ActiveMemberBreakdown() {
   };
 
   const handleDownloadCSV = async () => {
-    if (!platformId) {
+    if (!selectedPlatform) {
       return;
     }
 
     try {
       const limit = fetchedData.totalResults;
 
       const { results } = await getActiveMemberCompositionTable(
-        platformId,
+        selectedPlatform,
+        platformType,
         activityComposition,
         roles,
         username,
@@ -213,7 +222,11 @@ export default function ActiveMemberBreakdown() {
 
           <CustomTable
             data={fetchedData?.results ? fetchedData.results : []}
-            columns={columns}
+            columns={
+              platformType === 'discord'
+                ? discordMemberBreakdownTableColumns
+                : discourseMemberBreakdownTableColumns
+            }
             handleRoleSelectionChange={handleRoleSelectionChange}
             handleActivityOptionSelectionChange={
               handleActivityOptionSelectionChange