* fixing teams cards (#548)

* fixing teams cards --------- Co-authored-by: Igor IHIMBAZWE <[email protected]> Co-authored-by: Igor IHIMBAZWE <[email protected]>
atlp-rwanda · Oct 9, 2024 · 3d50556 · 3d50556
1 parent 11c481b
commit 3d50556
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 114 deletions.
diff --git a/src/Skeletons/SkeletonTable.tsx b/src/Skeletons/SkeletonTable.tsx
@@ -0,0 +1,35 @@
+
+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={column.id || column.name} 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" aria-label="Loading skeleton" />
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {[...Array(5)].map((_, rowIndex:any) => (
+          <tr key={rowIndex.id || rowIndex.name}>
+            {columns.map((_, colIndex:any) => (
+              <td key={colIndex.id || colIndex.name} className="px-6 py-4 border-b border-gray-200 bg-white text-sm">
+                <div className="h-4 bg-gray-300 rounded w-full" aria-label="Loading skeleton" />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default SkeletonTable;
diff --git a/src/components/DataPagination.tsx b/src/components/DataPagination.tsx
@@ -16,20 +16,19 @@ function DataPagination({
   nextPage,
   pageIndex,
 }: any) {
-  /* istanbul ignore next */
   return (
     <div className="font-serif">
       {pageOptions.length >= 0 && (
         <table className="w-full mt-2">
           <tfoot className="w-full py-2">
             <tr className="w-full py-2">
               <td colSpan={columnLength}>
-                <div className="flex flex-row items-center justify-between w-full mx-auto">
-                  <div className="flex">
+                <div className="flex flex-col lg:flex-row items-center justify-between w-full mx-auto">
+                  <div className="flex mb-4 lg:mb-0">
                     <button
                       type="button"
                       aria-label="left-arrow"
-                      className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                      className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                       onClick={() => previousPage()}
                       disabled={!canPreviousPage}
                     >
@@ -40,20 +39,22 @@ function DataPagination({
                       aria-label="right-arrow"
                       onClick={() => nextPage()}
                       disabled={!canNextPage}
-                      className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                      className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                     >
                       <ArrowCircleRightIcon className="w-5" fontSize="sm" />
                     </button>{' '}
                   </div>
-                  <div className="lg:flex flex-row justify-center w-1/3 sm:text-[12px] items-center">
-                    <span className="inline-block mx-2">
+
+                  <div className="flex flex-col lg:flex-row justify-center items-center w-full lg:w-1/3 text-xs lg:text-base">
+                    <span className="inline-block mx-2 mb-2 lg:mb-0">
                       Page{' '}
                       <strong>
                         {pageIndex + 1} of
                         {` ${pageOptions.length}`}
                       </strong>{' '}
                     </span>
-                    <span className="inline-block mx-2">
+
+                    <span className="inline-block mx-2 mb-2 lg:mb-0">
                       | Go to page:{' '}
                       <input
                         type="number"
@@ -66,18 +67,22 @@ function DataPagination({
                           gotoPage(pageNumber);
                         }}
                         style={{
-                          width: '50px',
-                          height: '30px',
+                          width: '40px',
+                          height: '25px',
                           border: 'solid 0.1rem #9e85f5',
-                          paddingLeft: '1.2rem',
+                          paddingLeft: '1rem',
                         }}
                       />
-                    </span>{' '}
+                    </span>
+
                     <select
                       className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
                       value={pageSize}
                       onChange={(e) => setPageSize(Number(e.target.value))}
-                      style={{ height: '30px', border: 'solid 0.1rem #9e85f5' }}
+                      style={{
+                        height: '30px',
+                        border: 'solid 0.1rem #9e85f5',
+                      }}
                     >
                       {[3, 5, 10, 25, 50, 100].map((pgSize) => (
                         <option key={pgSize} value={pgSize}>
@@ -96,4 +101,4 @@ function DataPagination({
   );
 }
 
-export default DataPagination;
+export default DataPagination;
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/pages/invitation.tsx b/src/pages/invitation.tsx
@@ -676,6 +676,7 @@ function Invitation() {
               <InvitationCardSkeleton />
               <InvitationCardSkeleton />
               <InvitationCardSkeleton />
+              <InvitationCardSkeleton />
             </>
           ) : (
             <>

diff --git a/tsconfig.json b/tsconfig.json
@@ -22,6 +22,6 @@
     "src/tests/About.test.tsx",
     "src/components/TraineeDashboardChart.tsx",
     "src/pages/TraineeRatingDashboard.tsx"
-  ],
+, "src/constants/SkeletonTable.tsx"  ],
   "exclude": ["node_modules"]
 }