Skip to content

Commit e35ca93

Browse files
Yvan-DavidYvan-David
committed
fix(fix bug on table)
- displaying 3 dotted button - modal responsiveness [Delivers #500]
1 parent cdb4053 commit e35ca93

File tree

5 files changed

+59
-23
lines changed

5 files changed

+59
-23
lines changed

‎src/components/DataTable.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useState, useMemo } from 'react';
2+
import React, { useState, useMemo, useEffect } from 'react';
33
import { useTranslation } from 'react-i18next';
44
import {
55
useGlobalFilter,
@@ -18,6 +18,7 @@ interface TableData {
1818
}
1919

2020
function DataTable({ data, columns, title, loading, className }: TableData) {
21+
const [pageIndex, setPageIndex] = useState(0);
2122
const [filterInput, setFilterInput] = useState('');
2223
const { t } = useTranslation();
2324

@@ -30,7 +31,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
3031
{
3132
data: memoizedData,
3233
columns: memoizedColumns,
33-
initialState: { pageSize: 3, globalFilter: filterInput },
34+
initialState: { pageIndex, pageSize: 3, globalFilter: filterInput },
3435
},
3536
useGlobalFilter,
3637
useSortBy,
@@ -52,9 +53,11 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
5253
pageOptions,
5354
headerGroups,
5455
prepareRow,
55-
state: { pageIndex, pageSize },
56+
state: { pageIndex: currentPageIndex, pageSize },
5657
} = tableInstance;
57-
58+
useEffect(() => {
59+
setPageIndex(currentPageIndex);
60+
}, [currentPageIndex]);
5861
const handleFilterChange = (e) => {
5962
const value = e.target.value || '';
6063
setGlobalFilter(value);

‎src/components/InvitationTable.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useState, useMemo } from 'react';
2+
import React, { useState,useEffect, useMemo } from 'react';
33
import { useTranslation } from 'react-i18next';
44
import {
55
useGlobalFilter,
@@ -20,6 +20,7 @@ interface TableData {
2020
function DataTableStats({ data, columns, error, loading }: TableData) {
2121
const [filterInput, setFilterInput] = useState('');
2222
const { t } = useTranslation();
23+
const [pageIndex, setPageIndex] = useState(0);
2324

2425
// Memoize columns and data to prevent unnecessary re-renders
2526
const memoizedColumns = useMemo(() => [...columns], [columns]);
@@ -30,7 +31,7 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
3031
{
3132
data: memoizedData,
3233
columns: memoizedColumns,
33-
initialState: { pageSize: 3, globalFilter: filterInput },
34+
initialState: {pageIndex, pageSize: 3, globalFilter: filterInput },
3435
},
3536
useGlobalFilter,
3637
useSortBy,
@@ -52,9 +53,12 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
5253
pageOptions,
5354
headerGroups,
5455
prepareRow,
55-
state: { pageIndex, pageSize },
56+
state: { pageIndex: currentPageIndex, pageSize },
5657
} = tableInstance;
57-
58+
59+
useEffect(() => {
60+
setPageIndex(currentPageIndex);
61+
}, [currentPageIndex]);
5862
const handleFilterChange = (e) => {
5963
const value = e.target.value || '';
6064
setGlobalFilter(value);

‎src/components/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
8282
</SideNavLink>
8383
</CheckRole>
8484
{/* INVITATION */}
85-
<CheckRole roles={['admin', 'coordinator']}>
85+
<CheckRole roles={['admin']}>
8686
<SideNavLink onClick={toggle} to="/invitation" name="Invitation">
8787
<FaEnvelopeOpenText className="w-5" />
8888
</SideNavLink>

‎src/pages/AdminTraineeDashboard.tsx‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,19 @@ function AdminTraineeDashboard() {
7979
const [gitHubStatistics, setGitHubStatistics] = useState<any>({});
8080
const { traineeData, setAllTrainees } = useTraineesContext();
8181
const [actionTraineeOptions, setActionTraineeOptions] = useState<any>(null);
82+
const modalRef = useRef<any>(null);
8283

84+
useEffect(() => {
85+
const handleClickOutside = (event: any) => {
86+
if (modalRef.current && !modalRef.current.contains(event.target)) {
87+
setSelectedRow(null);
88+
}
89+
};
90+
document.addEventListener('mousedown', handleClickOutside);
91+
return () => {
92+
document.removeEventListener('mousedown', handleClickOutside);
93+
};
94+
}, [modalRef]);
8395
function PaperComponent(props: PaperProps) {
8496
return (
8597
<Draggable
@@ -278,7 +290,9 @@ function AdminTraineeDashboard() {
278290
onClick={() => toggleOptions(row.original.email)}
279291
/>
280292
{selectedRow === row.original.email && (
281-
<div className="absolute z-50 w-64 p-4 mt-2 overflow-hidden border border-gray-300 rounded-lg shadow-md dropdown right-4 bg-light-bg max-h-30 dark:bg-dark-bg">
293+
<div
294+
ref={modalRef}
295+
className="absolute z-50 w-64 p-4 mt-2 overflow-hidden border border-gray-300 rounded-lg shadow-md dropdown right-4 bg-light-bg max-h-30 dark:bg-dark-bg">
282296
<>
283297
<div className="mb-4"></div>
284298
<div className="mb-4">
@@ -1011,7 +1025,7 @@ function AdminTraineeDashboard() {
10111025
data-testid="removeInviteModel"
10121026
variant="info"
10131027
size="sm"
1014-
style="w-[20%] md:w-1/4 text-sm font-sans"
1028+
style="w-[40%] md:w-1/4 text-sm font-sans"
10151029
onClick={() => handleClose()}
10161030
>
10171031
{t('Close')}
@@ -1069,7 +1083,7 @@ function AdminTraineeDashboard() {
10691083
data-testid="removeInviteModel"
10701084
variant="info"
10711085
size="sm"
1072-
style="w-[30%] md:w-1/4 text-sm font-sans"
1086+
style="w-[40%] md:w-1/4 text-sm font-sans"
10731087
onClick={() => inviteModel()}
10741088
>
10751089
{t('Cancel')}
@@ -1078,7 +1092,7 @@ function AdminTraineeDashboard() {
10781092
<Button
10791093
variant="primary"
10801094
size="sm"
1081-
style="w-[30%] md:w-1/4 text-sm font-sans"
1095+
style="w-[40%] md:w-1/4 text-sm font-sans"
10821096
onClick={HandleInvite}
10831097
loading={buttonLoading}
10841098
>
@@ -1157,15 +1171,15 @@ function AdminTraineeDashboard() {
11571171
data-testid="removeModel1"
11581172
variant="info"
11591173
size="sm"
1160-
style="w-[30%] md:w-1/4 text-sm font-sans"
1174+
style="w-[40%] md:w-1/4 text-sm font-sans"
11611175
onClick={() => removeEditModel()}
11621176
>
11631177
{t('Cancel')}
11641178
</Button>
11651179
<Button
11661180
variant="primary"
11671181
size="sm"
1168-
style="w-[30%] md:w-1/4 text-sm font-sans"
1182+
style="w-[40%] md:w-1/4 text-sm font-sans"
11691183
onClick={() => {
11701184
setButtonLoading(true);
11711185
setButtonLoading(true);
@@ -1215,7 +1229,7 @@ function AdminTraineeDashboard() {
12151229
data-testid="removeModel2"
12161230
variant="info"
12171231
size="sm"
1218-
style="w-[30%] md:w-1/4 text-sm font-sans"
1232+
style="w-[40%] md:w-1/4 text-sm font-sans"
12191233
onClick={() => removeTraineeMod()}
12201234
>
12211235
{t('Cancel')}
@@ -1224,7 +1238,7 @@ function AdminTraineeDashboard() {
12241238
variant="primary"
12251239
size="sm"
12261240
data-testid="removeMemberFromCohort"
1227-
style="w-[30%] md:w-1/4 text-sm font-sans"
1241+
style="w-[40%] md:w-1/4 text-sm font-sans"
12281242
onClick={() => {
12291243
setButtonLoading(true);
12301244
if (deleteEmail && deleteFromCohort) {
@@ -1302,7 +1316,7 @@ function AdminTraineeDashboard() {
13021316
data-testid="dropModel"
13031317
variant="info"
13041318
size="sm"
1305-
style="w-[30%] md:w-1/4 text-sm font-sans"
1319+
style="w-[40%] md:w-1/4 text-sm font-sans"
13061320
onClick={() => setDropTraineeModel(false)}
13071321
>
13081322
{t('Cancel')}
@@ -1312,7 +1326,7 @@ function AdminTraineeDashboard() {
13121326
variant="primary"
13131327
size="sm"
13141328
data-testid="dropMemberFromCohort"
1315-
style="w-[30%] md:w-1/4 text-sm font-sans"
1329+
style="w-[40%] md:w-1/4 text-sm font-sans"
13161330
onClick={() => {
13171331
setButtonLoading(true);
13181332

@@ -1403,7 +1417,7 @@ function AdminTraineeDashboard() {
14031417
data-testid="removeModel"
14041418
variant="info"
14051419
size="sm"
1406-
style="w-[30%] md:w-1/4 text-sm font-sans"
1420+
style="w-[40%] md:w-1/4 text-sm font-sans"
14071421
onClick={() => removeModel()}
14081422
>
14091423
{t('Cancel')}
@@ -1412,7 +1426,7 @@ function AdminTraineeDashboard() {
14121426
variant="primary"
14131427
size="sm"
14141428
data-testid="saveButton"
1415-
style="w-[30%] md:w-1/4 text-sm font-sans"
1429+
style="w-[40%] md:w-1/4 text-sm font-sans"
14161430
onClick={() => {
14171431
if (
14181432
Object.values(email)[1] &&

‎src/pages/invitation.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable */
22
/* istanbul ignore file */
33

4-
import React, { useState, useEffect } from 'react';
4+
import React, { useState, useEffect, useRef } from 'react';
55
import { useQuery, gql, useLazyQuery, useMutation } from '@apollo/client';
66
import { IoIosAddCircleOutline, IoIosSearch } from 'react-icons/io';
77
import { FaCheck, FaFilter } from 'react-icons/fa';
@@ -80,6 +80,7 @@ function Invitation() {
8080
role: '',
8181
status: '',
8282
});
83+
const modalRef = useRef<any>(null);
8384

8485
const organizationToken = localStorage.getItem('orgToken');
8586

@@ -147,6 +148,18 @@ function Invitation() {
147148
}
148149
}, [data, selectedInvitationId]);
149150

151+
useEffect(() => {
152+
const handleClickOutside = (event: any) => {
153+
if (modalRef.current && !modalRef.current.contains(event.target)) {
154+
setSelectedRow(null);
155+
}
156+
};
157+
document.addEventListener('mousedown', handleClickOutside);
158+
return () => {
159+
document.removeEventListener('mousedown', handleClickOutside);
160+
};
161+
}, [modalRef]);
162+
150163
useEffect(() => {
151164
if (isLoading) {
152165
setFilterLoading(true);
@@ -334,7 +347,9 @@ function Invitation() {
334347
onClick={() => toggleOptions(row.id)}
335348
/>
336349
{selectedRow === row.id && (
337-
<div className="absolute z-50 w-64 p-4 mt-2 overflow-hidden border border-gray-300 rounded-lg shadow-md dropdown right-4 bg-light-bg max-h-30 dark:bg-dark-bg">
350+
<div
351+
ref={modalRef}
352+
className="absolute z-50 w-64 p-4 mt-2 overflow-hidden border border-gray-300 rounded-lg shadow-md dropdown right-4 bg-light-bg max-h-30 dark:bg-dark-bg">
338353
<>
339354
<div className="mb-4"></div>
340355
<div className="mb-4">

0 commit comments

Comments
 (0)