fix(fix bug on table)

- displaying 3 dotted button - modal responsiveness [Delivers #500]
atlp-rwanda · Sep 27, 2024 · c1b6b9e · c1b6b9e
1 parent 4728a7e
commit c1b6b9e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 22 deletions.
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -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,
@@ -18,6 +18,7 @@ interface TableData {
 }
 
 function DataTable({ data, columns, title, loading }: TableData) {
+  const [pageIndex, setPageIndex] = useState(0);
   const [filterInput, setFilterInput] = useState('');
   const { t } = useTranslation();
 
@@ -30,7 +31,7 @@ function DataTable({ data, columns, title, loading }: TableData) {
     {
       data: memoizedData,
       columns: memoizedColumns,
-      initialState: { pageSize: 3, globalFilter: filterInput },
+      initialState: { pageIndex, pageSize: 3, globalFilter: filterInput },
     },
     useGlobalFilter,
     useSortBy,
@@ -52,9 +53,11 @@ function DataTable({ data, columns, title, 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);

diff --git a/src/components/InvitationTable.tsx b/src/components/InvitationTable.tsx
@@ -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,
@@ -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]);
@@ -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,
@@ -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);

diff --git a/src/pages/AdminTraineeDashboard.tsx b/src/pages/AdminTraineeDashboard.tsx
@@ -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
@@ -278,7 +290,9 @@ function AdminTraineeDashboard() {
               onClick={() => toggleOptions(row.original.email)}
             />
             {selectedRow === row.original.email && (
-              <div className="dropdown absolute right-4 mt-2 w-64 bg-light-bg max-h-30 dark:bg-dark-bg border border-gray-300 shadow-md z-50 p-4 rounded-lg overflow-hidden">
+              <div
+               ref={modalRef}
+               className="dropdown absolute right-4 mt-2 w-64 bg-light-bg max-h-30 dark:bg-dark-bg border border-gray-300 shadow-md z-50 p-4 rounded-lg overflow-hidden">
                 <>
                   <div className="mb-4"></div>
                   <div className="mb-4">
@@ -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')}
@@ -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')}
@@ -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}
                 >
@@ -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);
@@ -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')}
@@ -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) {
@@ -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')}
@@ -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);
 
@@ -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')}
@@ -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] &&

diff --git a/src/pages/invitation.tsx b/src/pages/invitation.tsx
@@ -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';
@@ -80,6 +80,7 @@ function Invitation() {
     role: '',
     status: '',
   });
+  const modalRef = useRef<any>(null);
 
   const organizationToken = localStorage.getItem('orgToken');
 
@@ -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);
@@ -334,7 +347,9 @@ function Invitation() {
               onClick={() => toggleOptions(row.id)}
             />
             {selectedRow === row.id && (
-              <div className="dropdown absolute right-4 mt-2 w-64 bg-light-bg max-h-30 dark:bg-dark-bg border border-gray-300 shadow-md z-50 p-4 rounded-lg overflow-hidden">
+              <div 
+                ref={modalRef}
+                className="dropdown absolute right-4 mt-2 w-64 bg-light-bg max-h-30 dark:bg-dark-bg border border-gray-300 shadow-md z-50 p-4 rounded-lg overflow-hidden">
                 <>
                   <div className="mb-4"></div>
                   <div className="mb-4">