Skip to content

Commit 333c476

Browse files
igorihimbazweigorihimbazwe
authored
Merge branch 'develop' into fx-rating-trainee
2 parents 87bf078 + 4b677fb commit 333c476

File tree

5 files changed

+61
-23
lines changed

5 files changed

+61
-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: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,23 @@ 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

8384
const [selectedTraineeId, setSelectedTraineeId]= useState<string[]>()
8485

86+
87+
useEffect(() => {
88+
const handleClickOutside = (event: any) => {
89+
if (modalRef.current && !modalRef.current.contains(event.target)) {
90+
setSelectedRow(null);
91+
}
92+
};
93+
document.addEventListener('mousedown', handleClickOutside);
94+
return () => {
95+
document.removeEventListener('mousedown', handleClickOutside);
96+
};
97+
}, [modalRef]);
98+
8599
function PaperComponent(props: PaperProps) {
86100
return (
87101
<Draggable
@@ -280,7 +294,9 @@ function AdminTraineeDashboard() {
280294
onClick={() => toggleOptions(row.original.email)}
281295
/>
282296
{selectedRow === row.original.email && (
283-
<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">
297+
<div
298+
ref={modalRef}
299+
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">
284300
<>
285301
<div className="mb-4"></div>
286302
<div className="mb-4">
@@ -1019,7 +1035,7 @@ function AdminTraineeDashboard() {
10191035
data-testid="removeInviteModel"
10201036
variant="info"
10211037
size="sm"
1022-
style="w-[20%] md:w-1/4 text-sm font-sans"
1038+
style="w-[40%] md:w-1/4 text-sm font-sans"
10231039
onClick={() => handleClose()}
10241040
>
10251041
{t('Close')}
@@ -1077,7 +1093,7 @@ function AdminTraineeDashboard() {
10771093
data-testid="removeInviteModel"
10781094
variant="info"
10791095
size="sm"
1080-
style="w-[30%] md:w-1/4 text-sm font-sans"
1096+
style="w-[40%] md:w-1/4 text-sm font-sans"
10811097
onClick={() => inviteModel()}
10821098
>
10831099
{t('Cancel')}
@@ -1086,7 +1102,7 @@ function AdminTraineeDashboard() {
10861102
<Button
10871103
variant="primary"
10881104
size="sm"
1089-
style="w-[30%] md:w-1/4 text-sm font-sans"
1105+
style="w-[40%] md:w-1/4 text-sm font-sans"
10901106
onClick={HandleInvite}
10911107
loading={buttonLoading}
10921108
>
@@ -1165,15 +1181,15 @@ function AdminTraineeDashboard() {
11651181
data-testid="removeModel1"
11661182
variant="info"
11671183
size="sm"
1168-
style="w-[30%] md:w-1/4 text-sm font-sans"
1184+
style="w-[40%] md:w-1/4 text-sm font-sans"
11691185
onClick={() => removeEditModel()}
11701186
>
11711187
{t('Cancel')}
11721188
</Button>
11731189
<Button
11741190
variant="primary"
11751191
size="sm"
1176-
style="w-[30%] md:w-1/4 text-sm font-sans"
1192+
style="w-[40%] md:w-1/4 text-sm font-sans"
11771193
onClick={() => {
11781194
setButtonLoading(true);
11791195
setButtonLoading(true);
@@ -1223,7 +1239,7 @@ function AdminTraineeDashboard() {
12231239
data-testid="removeModel2"
12241240
variant="info"
12251241
size="sm"
1226-
style="w-[30%] md:w-1/4 text-sm font-sans"
1242+
style="w-[40%] md:w-1/4 text-sm font-sans"
12271243
onClick={() => removeTraineeMod()}
12281244
>
12291245
{t('Cancel')}
@@ -1232,7 +1248,7 @@ function AdminTraineeDashboard() {
12321248
variant="primary"
12331249
size="sm"
12341250
data-testid="removeMemberFromCohort"
1235-
style="w-[30%] md:w-1/4 text-sm font-sans"
1251+
style="w-[40%] md:w-1/4 text-sm font-sans"
12361252
onClick={() => {
12371253
setButtonLoading(true);
12381254
if (deleteEmail && deleteFromCohort) {
@@ -1310,7 +1326,7 @@ function AdminTraineeDashboard() {
13101326
data-testid="dropModel"
13111327
variant="info"
13121328
size="sm"
1313-
style="w-[30%] md:w-1/4 text-sm font-sans"
1329+
style="w-[40%] md:w-1/4 text-sm font-sans"
13141330
onClick={() => setDropTraineeModel(false)}
13151331
>
13161332
{t('Cancel')}
@@ -1320,7 +1336,7 @@ function AdminTraineeDashboard() {
13201336
variant="primary"
13211337
size="sm"
13221338
data-testid="dropMemberFromCohort"
1323-
style="w-[30%] md:w-1/4 text-sm font-sans"
1339+
style="w-[40%] md:w-1/4 text-sm font-sans"
13241340
onClick={() => {
13251341
setButtonLoading(true);
13261342

@@ -1411,7 +1427,7 @@ function AdminTraineeDashboard() {
14111427
data-testid="removeModel"
14121428
variant="info"
14131429
size="sm"
1414-
style="w-[30%] md:w-1/4 text-sm font-sans"
1430+
style="w-[40%] md:w-1/4 text-sm font-sans"
14151431
onClick={() => removeModel()}
14161432
>
14171433
{t('Cancel')}
@@ -1420,7 +1436,7 @@ function AdminTraineeDashboard() {
14201436
variant="primary"
14211437
size="sm"
14221438
data-testid="saveButton"
1423-
style="w-[30%] md:w-1/4 text-sm font-sans"
1439+
style="w-[40%] md:w-1/4 text-sm font-sans"
14241440
onClick={() => {
14251441
if (
14261442
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)