From b94a95290d0e814bb0e8813207cc768096e474d8 Mon Sep 17 00:00:00 2001 From: Jean Paul Elisa NIYOKWIZERWA <140616733+Ndevu12@users.noreply.github.com> Date: Tue, 8 Oct 2024 14:10:18 +0200 Subject: [PATCH] * fixing teams cards (#548) * fixing teams cards --------- Co-authored-by: Igor IHIMBAZWE <133147435+igorihimbazwe@users.noreply.github.com> Co-authored-by: Igor IHIMBAZWE --- src/Skeletons/SkeletonTable.tsx | 35 ++++++ src/components/DataPagination.tsx | 91 +++++++------- src/components/InvitationTable.tsx | 183 +++++++++++++---------------- src/pages/invitation.tsx | 1 + tsconfig.json | 2 +- 5 files changed, 172 insertions(+), 140 deletions(-) create mode 100644 src/Skeletons/SkeletonTable.tsx diff --git a/src/Skeletons/SkeletonTable.tsx b/src/Skeletons/SkeletonTable.tsx new file mode 100644 index 000000000..d1b99b984 --- /dev/null +++ b/src/Skeletons/SkeletonTable.tsx @@ -0,0 +1,35 @@ + +import React from 'react'; + +interface SkeletonTableProps { + columns: Array; +} + +function SkeletonTable({ columns }: SkeletonTableProps) { + return ( + + + + {columns.map((column: any, index: React.Key | null | undefined) => ( + + ))} + + + + {[...Array(5)].map((_, rowIndex:any) => ( + + {columns.map((_, colIndex:any) => ( + + ))} + + ))} + +
+
+
+
+
+ ); +} + +export default SkeletonTable; \ No newline at end of file diff --git a/src/components/DataPagination.tsx b/src/components/DataPagination.tsx index abcba6f7b..a1ce766bd 100644 --- a/src/components/DataPagination.tsx +++ b/src/components/DataPagination.tsx @@ -16,7 +16,6 @@ function DataPagination({ nextPage, pageIndex, }: any) { - /* istanbul ignore next */ return (
{pageOptions.length >= 0 && ( @@ -24,12 +23,12 @@ function DataPagination({ -
-
+
+
{' '}
-
- + +
+ Page{' '} {pageIndex + 1} of {` ${pageOptions.length}`} {' '} - - | Go to page:{' '} - { - const pageNumber = e.target.value - ? Number(e.target.value) - 1 - : 0; - gotoPage(pageNumber); - }} - style={{ - width: '50px', - height: '30px', - border: 'solid 0.1rem #9e85f5', - paddingLeft: '1.2rem', - }} - /> - {' '} - + +
+ {/* Go to page */} +
+ | Go to page: + { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ + width: '50px', + height: '30px', + border: 'solid 0.1rem #9e85f5', + paddingLeft: '1.2rem', + }} + /> +
+ + {/* Show page size */} +
+ +
+
@@ -96,4 +107,4 @@ function DataPagination({ ); } -export default DataPagination; \ No newline at end of file +export default DataPagination; diff --git a/src/components/InvitationTable.tsx b/src/components/InvitationTable.tsx index ad0b5a660..05c693fdf 100644 --- 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) {
- - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( - - ))} - - ))} - - - {!loading && memoizedData.length === 0 ? ( - - - - ) : ( - page.map((row) => { - prepareRow(row); - return ( - + ) : ( +
- {column.render('Header')} -
-  {' '} - {/* Non-breaking space to ensure it's not an empty tag */} -
+ + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + {memoizedData.length === 0 && ( + + - ))} - - ); - }) - )} - {loading && ( - - - - )} - {error && ( - - - - )} - {!loading && !error && data.length === 0 && ( - - {' '} - {' '} - - )} - -
+ {column.render('Header')} +
- {row.cells.map((cell) => ( - - {cell.render('Cell')} -
- Loading... -
- Error occurred -
-
- {' '} -

- {' '} - No records available{' '} -

-
{' '} -
+  {' '} + {/* Non-breaking space to ensure it's not an empty tag */} + + + )} + {memoizedData.length > 0 && + page.map((row) => { + prepareRow(row); + return ( + + {row.cells.map((cell) => ( + + {cell.render('Cell')} + + ))} + + ); + })} + {!loading && !error && data.length === 0 && ( + + +
+

+ No records available +

+
+ + + )} + + + )}
+ ) : ( <> diff --git a/tsconfig.json b/tsconfig.json index 15403be85..a591f5171 100644 --- 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"] }