Skip to content

Commit

Permalink
* fixing teams cards (#548)
Browse files Browse the repository at this point in the history 
* fixing teams cards

---------

Co-authored-by: Igor IHIMBAZWE <[email protected]>
Co-authored-by: Igor IHIMBAZWE <[email protected]>
  • Loading branch information
@Ndevu12 @igorihimbazwe @GSinseswa721
3 people authored and GSinseswa721 committed Oct 10, 2024
1 parent 11c481b commit 8e8af25
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 140 deletions.
35 changes: 35 additions & 0 deletions src/Skeletons/SkeletonTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
90 changes: 50 additions & 40 deletions src/components/DataPagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-row sm:space-x-9 md:space-x-72 lg:flex-row items-center justify-between w-full mx-auto">
<div className="flex mb-4 sm:-ml-7 lg:mb-0 mr-auto">
<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 mr-2 h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Expand All @@ -40,51 +39,62 @@ 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-row relative md:ml-80 lg:flex-row justify-center items-baseline w-full lg:w-1/3 text-xs lg:text-">
<span className="inline-block mx-2 lg:mb-0">
Page{' '}
<strong>
{pageIndex + 1} of
{` ${pageOptions.length}`}
</strong>{' '}
</span>
<span className="inline-block mx-2">
| Go to page:{' '}
<input
type="number"
className="pl-1 border rounded-md outline-none appearance-none border-primary dark:bg-primary"
defaultValue={pageIndex + 1}
onChange={(e) => {
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',
}}
/>
</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' }}
>
{[3, 5, 10, 25, 50, 100].map((pgSize) => (
<option key={pgSize} value={pgSize}>
Show {pgSize}
</option>
))}
</select>

<div className="flex flex-row items-center ">
{/* Go to page */}
<div className="hidden lg:flex items-center mx-2 mb-2 lg:mb-0">
<span className="mr-1">| Go to page: </span>
<input
type="number"
className="pl-1 border rounded-md outline-none appearance-none border-primary dark:bg-primary"
defaultValue={pageIndex + 1}
onChange={(e) => {
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',
}}
/>
</div>
{/* Show page size */}
<div className="flex items-center mx-2 mb-2 lg:mb-0 ">
<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',
}}
>
{[3, 5, 10, 25, 50, 100].map((pgSize) => (
<option key={pgSize} value={pgSize}>
Show {pgSize}
</option>
))}
</select>
</div>
</div>
</div>
</div>
</td>
Expand All @@ -96,4 +106,4 @@ function DataPagination({
);
}

export default DataPagination;
export default DataPagination;
183 changes: 84 additions & 99 deletions src/components/InvitationTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -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[];
Expand All @@ -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,
Expand All @@ -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);
Expand All @@ -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
Expand All @@ -179,4 +164,4 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
);
}

export default DataTableStats;
export default DataTableStats;
1 change: 1 addition & 0 deletions src/pages/invitation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -676,6 +676,7 @@ function Invitation() {
<InvitationCardSkeleton />
<InvitationCardSkeleton />
<InvitationCardSkeleton />
<InvitationCardSkeleton />
</>
) : (
<>
Expand Down
Loading

0 comments on commit 8e8af25

Please sign in to comment.