#504 fixing teams cards (#545)

* fixing teams cards * fixing teams cards --------- Co-authored-by: Igor IHIMBAZWE <[email protected]>
atlp-rwanda · Oct 7, 2024 · e9f7ee5 · e9f7ee5
1 parent 8448da6
commit e9f7ee5
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Skeletons/SkeletonTable.tsx b/src/Skeletons/SkeletonTable.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+interface SkeletonTableProps {
+  columns: Array<any>;
+}
+
+function SkeletonTable({ columns }: SkeletonTableProps) {
+  return (
+    <table className="min-w-full leading-normal">
+      <thead>
+        <tr>
+          {columns.map((column: any, index: React.Key | null | undefined) => (
+            <th key={index} className="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              <div className="h-4 bg-gray-300 rounded w-3/4"></div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {[...Array(5)].map((_, rowIndex) => (
+          <tr key={rowIndex}>
+            {columns.map((_, colIndex) => (
+              <td key={colIndex} className="px-6 py-4 border-b border-gray-200 bg-white text-sm">
+                <div className="h-4 bg-gray-300 rounded w-full"></div>
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default SkeletonTable;
diff --git a/src/components/CoordinatorCard.tsx b/src/components/CoordinatorCard.tsx
@@ -26,8 +26,14 @@ export const GET_TEAMS_CARDS = gql`
         professional_Skills
       }
       members {
+        id
         profile {
           name
+          lastName
+          firstName
+        }
+         status{
+          status
         }
       }
       active
@@ -141,6 +147,13 @@ function ManagerCard() {
           rating = 'text-red-700';
         }
 
+         const activeMembers = team.members.filter(
+        (member: any) => member.status?.status === 'active'
+      ).length;
+      const droppedMembers = team.members.filter(
+        (member: any) => member.status?.status === 'drop'
+      ).length;
+
         return {
           stylebg,
           stylebg1,
@@ -159,16 +172,16 @@ function ManagerCard() {
           skills,
           Qty,
           Qnty,
-          active: team?.members.length,
-          drop: 0,
+          active: activeMembers,
+          drop: droppedMembers,
         };
       });
 
   return (
     <div className="px-4 md:px-0 pb-20 w-full dark:bg-dark-frame-bg dark:text-black h-full flex overflow-x-auto ">
       {loading ? (
         <div className="flex items-center justify-center w-full h-full">
-          <div className="spinner" />
+          <div className="spinner" data-testid="spinner" />
         </div>
       ) : (
         <div className="pl-10 flex">
@@ -184,4 +197,4 @@ function ManagerCard() {
   );
 }
 
-export default ManagerCard;
+export default ManagerCard;
diff --git a/src/components/InvitationTable.tsx b/src/components/InvitationTable.tsx
@@ -1,13 +1,10 @@
 // @ts-nocheck
-import React, { useState,useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useGlobalFilter,
-  usePagination,
-  useSortBy,
-  useTable,
-} from 'react-table';
+import { useGlobalFilter, usePagination, useSortBy, useTable } from 'react-table';
+import { toast } from 'react-toastify';
 import DataPagination from './DataPagination';
+import SkeletonTable from '../Skeletons/SkeletonTable'; 
 
 interface TableData {
   data: any[];
@@ -31,7 +28,7 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
     {
       data: memoizedData,
       columns: memoizedColumns,
-      initialState: {pageIndex, pageSize: 3, globalFilter: filterInput },
+      initialState: { pageIndex, pageSize: 3, globalFilter: filterInput },
     },
     useGlobalFilter,
     useSortBy,
@@ -55,10 +52,17 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
     prepareRow,
     state: { pageIndex: currentPageIndex, pageSize },
   } = tableInstance;
-  
+
   useEffect(() => {
     setPageIndex(currentPageIndex);
   }, [currentPageIndex]);
+
+  useEffect(() => {
+    if (error) {
+      toast.error('Network error. Please, try again later.');
+    }
+  }, [error]);
+
   const handleFilterChange = (e) => {
     const value = e.target.value || '';
     setGlobalFilter(value);
@@ -69,96 +73,77 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
     <div className="">
       <div className="flex items-center justify-between pb-6 " />
       <div style={{ overflowX: 'auto' }}>
-        <table className="min-w-full leading-normal" {...getTableProps()}>
-          <thead>
-            {headerGroups.map((headerGroup) => (
-              <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
-                {headerGroup.headers.map((column) => (
-                  <th
-                    key={column.id}
-                    className={column.isSorted ? 'sort-asc thead' : ' thead'}
-                    {...column.getHeaderProps(column.getSortByToggleProps())}
-                  >
-                    {column.render('Header')}
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody {...getTableBodyProps()}>
-            {!loading && memoizedData.length === 0 ? (
-              <tr>
-                <td
-                  colSpan={columns.length}
-                  className="px-6 py-4 text-sm text-center text-gray-500 dark:text-gray-300"
-                  aria-label="Empty cell" // Added for accessibility
-                >
-                  &nbsp;{' '}
-                  {/* Non-breaking space to ensure it's not an empty tag */}
-                </td>
-              </tr>
-            ) : (
-              page.map((row) => {
-                prepareRow(row);
-                return (
-                  <tr
-                    key={row.id}
-                    className={`border-b dark:border-gray-700 ${
-                      row.index % 2 === 0
-                        ? 'bg-light-bg dark:bg-neutral-600'
-                        : 'bg-white dark:bg-dark-bg'
-                    }`}
-                    {...row.getRowProps()}
+        {loading ? (
+          <SkeletonTable columns={columns} />
+        ) : (
+          <table className="min-w-full leading-normal" {...getTableProps()}>
+            <thead>
+              {headerGroups.map((headerGroup) => (
+                <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
+                  {headerGroup.headers.map((column) => (
+                    <th
+                      key={column.id}
+                      className={column.isSorted ? 'sort-asc thead' : ' thead'}
+                      {...column.getHeaderProps(column.getSortByToggleProps())}
+                    >
+                      {column.render('Header')}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody {...getTableBodyProps()}>
+              {memoizedData.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={columns.length}
+                    className="px-6 py-4 text-sm text-center text-gray-500 dark:text-gray-300"
+                    aria-label="Empty cell" // Added for accessibility
                   >
-                    {row.cells.map((cell) => (
-                      <td
-                        key={cell.id}
-                        className="data-cell "
-                        {...cell.getCellProps()}
-                      >
-                        {cell.render('Cell')}
-                      </td>
-                    ))}
-                  </tr>
-                );
-              })
-            )}
-            {loading && (
-              <tr>
-                <td
-                  colSpan={columns.length}
-                  className="px-6 py-4 text-sm text-center text-gray-500 dark:text-gray-300 "
-                >
-                  Loading...
-                </td>
-              </tr>
-            )}
-            {error && (
-              <tr>
-                <td
-                  colSpan={columns.length}
-                  className="px-6 py-4 text-sm text-center text-gray-500 dark:text-gray-300 "
-                >
-                  Error occurred
-                </td>
-              </tr>
-            )}
-            {!loading && !error && data.length === 0 && (
-              <tr>
-                {' '}
-                <td colSpan={columns.length || 100} className="text-center p-4">
-                  <div className="flex flex-col items-center justify-center space-y-4">
-                    {' '}
-                    <p className="text-gray-600 dark:text-gray-400 text-lg font-medium">
-                      {' '}
-                      No records available{' '}
-                    </p>
-                  </div>{' '}
-                </td>{' '}
-              </tr>
-            )}
-          </tbody>
-        </table>
+                    &nbsp;{' '}
+                    {/* Non-breaking space to ensure it's not an empty tag */}
+                  </td>
+                </tr>
+              )}
+              {memoizedData.length > 0 &&
+                page.map((row) => {
+                  prepareRow(row);
+                  return (
+                    <tr
+                      key={row.id}
+                      className={`border-b dark:border-gray-700 ${
+                        row.index % 2 === 0
+                          ? 'bg-light-bg dark:bg-neutral-600'
+                          : 'bg-white dark:bg-dark-bg'
+                      }`}
+                      {...row.getRowProps()}
+                    >
+                      {row.cells.map((cell) => (
+                        <td
+                          key={cell.id}
+                          className="data-cell "
+                          {...cell.getCellProps()}
+                        >
+                          {cell.render('Cell')}
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                })}
+              {!loading && !error && data.length === 0 && (
+                <tr>
+                  <td colSpan={columns.length || 100} className="text-center p-4">
+                    <div className="flex flex-col items-center justify-center space-y-4">
+                      <p className="text-gray-600 dark:text-gray-400 text-lg font-medium">
+                        No records available
+                      </p>
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        )}
       </div>
       <div className="px-6 py-4">
         <DataPagination
@@ -179,4 +164,4 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
   );
 }
 
-export default DataTableStats;
+export default DataTableStats;
diff --git a/src/components/ManagerCard.tsx b/src/components/ManagerCard.tsx
@@ -29,6 +29,9 @@ export const GET_TEAMS_CARDS = gql`
         profile {
           name
         }
+        status{
+          status
+        }
       }
       active
       startingPhase
@@ -136,6 +139,12 @@ function ManagerCard() {
         stylebg1 = 'bg-red-400 text-red-700';
         rating = 'text-red-700';
       }
+      const activeMembers = team.members.filter(
+        (member: any) => member.status?.status === 'active'
+      ).length;
+      const droppedMembers = team.members.filter(
+        (member: any) => member.status?.status === 'drop'
+      ).length;
 
       return {
         stylebg,
@@ -155,8 +164,8 @@ function ManagerCard() {
         skills,
         Qty,
         Qnty,
-        active: team?.members.length,
-        drop: 0,
+        active: activeMembers,
+        drop: droppedMembers,
       };
     });
 
@@ -180,4 +189,4 @@ function ManagerCard() {
   );
 }
 
-export default ManagerCard;
+export default ManagerCard;
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
@@ -191,7 +191,7 @@ function Notification({
                         if (user.role === 'admin') {
                           navigate('/teams');
                         } else {
-                          navigate('/cards');
+                          navigate('/teams/cards');
                         }
                       } else if (notification.type === 'cohort') {
                         navigate('/cohorts');

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -133,7 +133,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
           {/* FOR COORDINATORS */}
           <CheckRole roles={['coordinator']}>
             {/* team cards */}
-            <SideNavLink onClick={toggle} name="Teams" to="/cards">
+            <SideNavLink onClick={toggle} name="Teams" to="/teams/cards">
               <UserGroupIcon className="w-5 " />
             </SideNavLink>
 
@@ -196,4 +196,4 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
   );
 }
 
-export default Sidebar;
+export default Sidebar;