fix table dashboard

frontend/client-portal/src/sections/dashboard/TableList.tsx

@@ -30,7 +30,6 @@ import palette from '../../theme/palette';
 import { useSearchParams } from 'react-router-dom';
 
 /* ---------------------------------- types --------------------------------- */
-
 type PaginationTableProps = {
   current_page: number;
   from: number;
@@ -64,11 +63,9 @@ interface EnhancedTableProps {
   order: Order;
   orderBy: string;
 }
-
 /* -------------------------------------------------------------------------- */
 
 /* -------------------------- enchanced table head -------------------------- */
-
 const headCells: readonly HeadCell[] = [
   {
     id: 'member_id',
@@ -141,7 +138,6 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
     </TableHead>
   );
 }
-
 /* -------------------------------------------------------------------------- */
 
 export default function TableList() {
@@ -180,7 +176,6 @@ export default function TableList() {
   /* -------------------------------------------------------------------------- */
 
   /* ----------------------------- Field Container ---------------------------- */
-
   /* ----------------------------- division field ----------------------------- */
   const optionDivisions = ['All'];
 
@@ -190,10 +185,6 @@ export default function TableList() {
   /* ------------------------------ Search field ------------------------------ */
   const [searchText, setSearchText] = useState('');
 
-  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(event.target.value);
-  };
-
   const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsLoading(true);
@@ -223,8 +214,73 @@ export default function TableList() {
     setAnchorEl(event.currentTarget);
   };
   /* -------------------------------------------------------------------------- */
+  /* -------------------------------------------------------------------------- */
 
-  const FieldContainer = () => (
+  /* ---------------------------- table pagination ---------------------------- */
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setIsLoading(true);
+    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
+    setPage(newPage);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+    // setCustomSearchParams.set('page', newPage + 1);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------- row page per limit --------------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    setPage(0);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+    setRowsPerPage(parseInt(event.target.value, 10));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+  /* -------------------------------------------------------------------------- */
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      const params =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([
+              ...customSearchParams.entries(),
+              ['order', order],
+              ['orderBy', orderBy],
+            ]);
+
+      const response = await axios.get('http://localhost:8001/api/dashboard', {
+        params: params,
+      });
+
+      const division = await axios.get('http://localhost:8001/api/division');
+      setDataDivision(division.data);
+
+      setCustomSearchParams(params);
+      setDataTable(response.data.data);
+      setPaginationTable(response.data.meta);
+      setRowsPerPage(response.data.meta.per_page);
+      setIsLoading(false);
+    })();
+  }, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
+
+  return (
+    <Card>
+      <Grid container>
+        {/* Field 1 */}
+        <Grid item xs={12} paddingX="24px" paddingY="20px">
           <Grid container spacing={2}>
             <Grid item xs={12} lg={3} xl={2}>
               <Autocomplete
@@ -232,7 +288,6 @@ export default function TableList() {
                 options={optionDivisions}
                 value={value}
                 onChange={(event: any, newValue: string | null) => {
-            console.log(newValue);
                   setValue(newValue);
                 }}
                 renderInput={(params) => <TextField {...params} label="Division" />}
@@ -244,7 +299,7 @@ export default function TableList() {
                   id="search-input"
                   label="Search"
                   variant="outlined"
-            onChange={handleSearch}
+                  onChange={(event) => setSearchText(event.target.value)}
                   value={searchText}
                   fullWidth
                 />
@@ -283,78 +338,6 @@ export default function TableList() {
               </Button>
             </Grid>
           </Grid>
-  );
-
-  /* -------------------------------------------------------------------------- */
-
-  /* ---------------------------- table pagination ---------------------------- */
-
-  /* ------------------------ button change pagination ------------------------ */
-  const onPageChangeHandle = async (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setIsLoading(true);
-    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
-    setPage(newPage);
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    setAppliedParams(params);
-    setIsLoading(false);
-    // setCustomSearchParams.set('page', newPage + 1);
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* --------------------------- row page per limit --------------------------- */
-  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    setIsLoading(true);
-    setPage(0);
-    const params = Object.fromEntries([
-      ...customSearchParams.entries(),
-      ['per_page', parseInt(event.target.value, 10)],
-    ]);
-    setRowsPerPage(parseInt(event.target.value, 10));
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    setAppliedParams(params);
-    setIsLoading(false);
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* -------------------------------------------------------------------------- */
-
-  useEffect(() => {
-    (async () => {
-      setIsLoading(true);
-
-      const params =
-        Object.keys(appliedParams).length !== 0
-          ? appliedParams
-          : Object.fromEntries([
-              ...customSearchParams.entries(),
-              ['order', order],
-              ['orderBy', orderBy],
-            ]);
-
-      const response = await axios.get('http://localhost:8001/api/dashboard', {
-        params: params,
-      });
-
-      const division = await axios.get('http://localhost:8001/api/division');
-      setDataDivision(division.data);
-
-      setCustomSearchParams(params);
-      setDataTable(response.data.data);
-      setPaginationTable(response.data.meta);
-      setRowsPerPage(response.data.meta.per_page);
-      setIsLoading(false);
-    })();
-  }, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
-
-  return (
-    <Card>
-      <Grid container>
-        {/* Field 1 */}
-        <Grid item xs={12} paddingX="24px" paddingY="20px">
-          <FieldContainer />
         </Grid>
         {/* End Field 1 */}
         {/* Field 2 */}