Skip to content

#500 fix bug on table #518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 27, 2024
Merged

#500 fix bug on table #518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions src/components/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useState, useMemo } from 'react';
import React, { useState, useMemo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import {
useGlobalFilter,
Expand All @@ -18,6 +18,7 @@ interface TableData {
}

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

Expand All @@ -30,7 +31,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
{
data: memoizedData,
columns: memoizedColumns,
initialState: { pageSize: 3, globalFilter: filterInput },
initialState: { pageIndex, pageSize: 3, globalFilter: filterInput },
},
useGlobalFilter,
useSortBy,
Expand All @@ -52,9 +53,11 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
pageOptions,
headerGroups,
prepareRow,
state: { pageIndex, pageSize },
state: { pageIndex: currentPageIndex, pageSize },
} = tableInstance;

useEffect(() => {
setPageIndex(currentPageIndex);
}, [currentPageIndex]);
const handleFilterChange = (e) => {
const value = e.target.value || '';
setGlobalFilter(value);
Expand Down
12 changes: 8 additions & 4 deletions src/components/InvitationTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useState, useMemo } from 'react';
import React, { useState,useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useGlobalFilter,
Expand All @@ -20,6 +20,7 @@ interface TableData {
function DataTableStats({ data, columns, error, loading }: TableData) {
const [filterInput, setFilterInput] = useState('');
const { t } = useTranslation();
const [pageIndex, setPageIndex] = useState(0);

// Memoize columns and data to prevent unnecessary re-renders
const memoizedColumns = useMemo(() => [...columns], [columns]);
Expand All @@ -30,7 +31,7 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
{
data: memoizedData,
columns: memoizedColumns,
initialState: { pageSize: 3, globalFilter: filterInput },
initialState: {pageIndex, pageSize: 3, globalFilter: filterInput },
},
useGlobalFilter,
useSortBy,
Expand All @@ -52,9 +53,12 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
pageOptions,
headerGroups,
prepareRow,
state: { pageIndex, pageSize },
state: { pageIndex: currentPageIndex, pageSize },
} = tableInstance;


useEffect(() => {
setPageIndex(currentPageIndex);
}, [currentPageIndex]);
const handleFilterChange = (e) => {
const value = e.target.value || '';
setGlobalFilter(value);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
</SideNavLink>
</CheckRole>
{/* INVITATION */}
<CheckRole roles={['admin', 'coordinator']}>
<CheckRole roles={['admin']}>
<SideNavLink onClick={toggle} to="/invitation" name="Invitation">
<FaEnvelopeOpenText className="w-5" />
</SideNavLink>
Expand Down
38 changes: 26 additions & 12 deletions src/pages/AdminTraineeDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,19 @@ function AdminTraineeDashboard() {
const [gitHubStatistics, setGitHubStatistics] = useState<any>({});
const { traineeData, setAllTrainees } = useTraineesContext();
const [actionTraineeOptions, setActionTraineeOptions] = useState<any>(null);
const modalRef = useRef<any>(null);

useEffect(() => {
const handleClickOutside = (event: any) => {
if (modalRef.current && !modalRef.current.contains(event.target)) {
setSelectedRow(null);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [modalRef]);
function PaperComponent(props: PaperProps) {
return (
<Draggable
Expand Down Expand Up @@ -278,7 +290,9 @@ function AdminTraineeDashboard() {
onClick={() => toggleOptions(row.original.email)}
/>
{selectedRow === row.original.email && (
<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">
<div
ref={modalRef}
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">
<>
<div className="mb-4"></div>
<div className="mb-4">
Expand Down Expand Up @@ -1011,7 +1025,7 @@ function AdminTraineeDashboard() {
data-testid="removeInviteModel"
variant="info"
size="sm"
style="w-[20%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => handleClose()}
>
{t('Close')}
Expand Down Expand Up @@ -1069,7 +1083,7 @@ function AdminTraineeDashboard() {
data-testid="removeInviteModel"
variant="info"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => inviteModel()}
>
{t('Cancel')}
Expand All @@ -1078,7 +1092,7 @@ function AdminTraineeDashboard() {
<Button
variant="primary"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={HandleInvite}
loading={buttonLoading}
>
Expand Down Expand Up @@ -1157,15 +1171,15 @@ function AdminTraineeDashboard() {
data-testid="removeModel1"
variant="info"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => removeEditModel()}
>
{t('Cancel')}
</Button>
<Button
variant="primary"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => {
setButtonLoading(true);
setButtonLoading(true);
Expand Down Expand Up @@ -1215,7 +1229,7 @@ function AdminTraineeDashboard() {
data-testid="removeModel2"
variant="info"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => removeTraineeMod()}
>
{t('Cancel')}
Expand All @@ -1224,7 +1238,7 @@ function AdminTraineeDashboard() {
variant="primary"
size="sm"
data-testid="removeMemberFromCohort"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => {
setButtonLoading(true);
if (deleteEmail && deleteFromCohort) {
Expand Down Expand Up @@ -1302,7 +1316,7 @@ function AdminTraineeDashboard() {
data-testid="dropModel"
variant="info"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => setDropTraineeModel(false)}
>
{t('Cancel')}
Expand All @@ -1312,7 +1326,7 @@ function AdminTraineeDashboard() {
variant="primary"
size="sm"
data-testid="dropMemberFromCohort"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => {
setButtonLoading(true);

Expand Down Expand Up @@ -1403,7 +1417,7 @@ function AdminTraineeDashboard() {
data-testid="removeModel"
variant="info"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => removeModel()}
>
{t('Cancel')}
Expand All @@ -1412,7 +1426,7 @@ function AdminTraineeDashboard() {
variant="primary"
size="sm"
data-testid="saveButton"
style="w-[30%] md:w-1/4 text-sm font-sans"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => {
if (
Object.values(email)[1] &&
Expand Down
19 changes: 17 additions & 2 deletions src/pages/invitation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable */
/* istanbul ignore file */

import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { useQuery, gql, useLazyQuery, useMutation } from '@apollo/client';
import { IoIosAddCircleOutline, IoIosSearch } from 'react-icons/io';
import { FaCheck, FaFilter } from 'react-icons/fa';
Expand Down Expand Up @@ -80,6 +80,7 @@ function Invitation() {
role: '',
status: '',
});
const modalRef = useRef<any>(null);

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

Expand Down Expand Up @@ -147,6 +148,18 @@ function Invitation() {
}
}, [data, selectedInvitationId]);

useEffect(() => {
const handleClickOutside = (event: any) => {
if (modalRef.current && !modalRef.current.contains(event.target)) {
setSelectedRow(null);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [modalRef]);

useEffect(() => {
if (isLoading) {
setFilterLoading(true);
Expand Down Expand Up @@ -334,7 +347,9 @@ function Invitation() {
onClick={() => toggleOptions(row.id)}
/>
{selectedRow === row.id && (
<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">
<div
ref={modalRef}
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">
<>
<div className="mb-4"></div>
<div className="mb-4">
Expand Down
Loading