From d2a81b9b72214996394140dd3b2505ffc453d2b6 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Tue, 29 Apr 2025 12:48:37 +0800
Subject: [PATCH] [feature] update null check

---
 src/components/ItemsSearch/ItemsSearch.tsx    |   6 +-
 .../SearchResults/SearchResults.tsx           | 263 +++++++++---------
 2 files changed, 140 insertions(+), 129 deletions(-)

diff --git a/src/components/ItemsSearch/ItemsSearch.tsx b/src/components/ItemsSearch/ItemsSearch.tsx
index 127a75e..404ffb1 100644
--- a/src/components/ItemsSearch/ItemsSearch.tsx
+++ b/src/components/ItemsSearch/ItemsSearch.tsx
@@ -2,7 +2,7 @@
 
 import {useCallback, useEffect, useMemo, useState} from "react";
 import SearchBox, { Criterion } from "../SearchBox";
-import {fetchAllItemsByPage, ItemsResult} from "@/app/api/settings/item";
+import { ItemsResult} from "@/app/api/settings/item";
 import { useTranslation } from "react-i18next";
 import SearchResults, { Column } from "../SearchResults";
 import { EditNote } from "@mui/icons-material";
@@ -11,7 +11,7 @@ import { GridDeleteIcon } from "@mui/x-data-grid";
 import { TypeEnum } from "@/app/utils/typeEnum";
 import axios from "axios";
 import {BASE_API_URL, NEXT_PUBLIC_API_URL} from "@/config/api";
-import axiosInstance, {SetupAxiosInterceptors} from "@/app/(main)/axios/axiosInstance";
+import axiosInstance from "@/app/(main)/axios/axiosInstance";
 
 type Props = {
   items: ItemsResult[];
@@ -23,7 +23,7 @@ const ItemsSearch: React.FC<Props> = ({ items }) => {
   const [filteredItems, setFilteredItems] = useState<ItemsResult[]>(items);
   const { t } = useTranslation("items");
   const router = useRouter();
-  const [filterObj, setFilterObj] = useState();
+  const [filterObj, setFilterObj] = useState({});
   const [pagingController, setPagingController] = useState({
       pageNum: 1,
       pageSize: 10,
diff --git a/src/components/SearchResults/SearchResults.tsx b/src/components/SearchResults/SearchResults.tsx
index 3c6ae61..40cb22d 100644
--- a/src/components/SearchResults/SearchResults.tsx
+++ b/src/components/SearchResults/SearchResults.tsx
@@ -8,160 +8,171 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TablePagination, {
-  TablePaginationProps,
+    TablePaginationProps,
 } from "@mui/material/TablePagination";
 import TableRow from "@mui/material/TableRow";
-import IconButton, { IconButtonOwnProps } from "@mui/material/IconButton";
+import IconButton, {IconButtonOwnProps} from "@mui/material/IconButton";
 
 export interface ResultWithId {
-  id: string | number;
+    id: string | number;
 }
 
 interface BaseColumn<T extends ResultWithId> {
-  name: keyof T;
-  label: string;
+    name: keyof T;
+    label: string;
 }
 
 interface ColumnWithAction<T extends ResultWithId> extends BaseColumn<T> {
-  onClick: (item: T) => void;
-  buttonIcon: React.ReactNode;
-  buttonColor?: IconButtonOwnProps["color"];
+    onClick: (item: T) => void;
+    buttonIcon: React.ReactNode;
+    buttonColor?: IconButtonOwnProps["color"];
 }
 
 export type Column<T extends ResultWithId> =
-  | BaseColumn<T>
-  | ColumnWithAction<T>;
+    | BaseColumn<T>
+    | ColumnWithAction<T>;
 
 interface Props<T extends ResultWithId> {
-  items: T[];
-  columns: Column<T>[];
-  noWrapper?: boolean;
+    items: T[],
+    columns: Column<T>[],
+    noWrapper?: boolean,
+    setPagingController: (value: (((prevState: { pageNum: number; pageSize: number; totalCount: number }) => {
+        pageNum: number;
+        pageSize: number;
+        totalCount: number
+    }) | { pageNum: number; pageSize: number; totalCount: number })) => void,
+    pagingController: { pageNum: number; pageSize: number; totalCount: number },
+    isAutoPaging: boolean
 }
 
 function isActionColumn<T extends ResultWithId>(
-  column: Column<T>,
+    column: Column<T>,
 ): column is ColumnWithAction<T> {
-  return Boolean((column as ColumnWithAction<T>).onClick);
+    return Boolean((column as ColumnWithAction<T>).onClick);
 }
 
 function SearchResults<T extends ResultWithId>({
-  items,
-  columns,
-  noWrapper,
-  pagingController,
-  setPagingController,
-  isAutoPaging = true,
-}: Props<T>) {
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+                                                   items,
+                                                   columns,
+                                                   noWrapper,
+                                                   pagingController,
+                                                   setPagingController,
+                                                   isAutoPaging = true,
+                                               }: Props<T>) {
+    const [page, setPage] = React.useState(0);
+    const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
-  const handleChangePage: TablePaginationProps["onPageChange"] = (
-    _event,
-    newPage,
-  ) => {
-    setPage(newPage);
-    setPagingController({
-      ...pagingController,
-      pageNum: newPage+1,
-    })
-  };
+    const handleChangePage: TablePaginationProps["onPageChange"] = (
+        _event,
+        newPage,
+    ) => {
+        setPage(newPage);
+        if (setPagingController) {
+            setPagingController({
+                ...pagingController,
+                pageNum: newPage + 1,
+            })
+        }
+    };
 
-  const handleChangeRowsPerPage: TablePaginationProps["onRowsPerPageChange"] = (
-    event,
-  ) => {
-    setRowsPerPage(+event.target.value);
-    setPage(0);
-    setPagingController({
-      ...pagingController,
-      pageNum: +event.target.value,
-    })
-  };
+    const handleChangeRowsPerPage: TablePaginationProps["onRowsPerPageChange"] = (
+        event,
+    ) => {
+        setRowsPerPage(+event.target.value);
+        setPage(0);
+        if (setPagingController) {
+            setPagingController({
+                ...pagingController,
+                pageNum: +event.target.value,
+            })
+        }
+    };
 
-  const table = (
-    <>
-      <TableContainer sx={{ maxHeight: 440 }}>
-        <Table stickyHeader>
-          <TableHead>
-            <TableRow>
-              {columns.map((column, idx) => (
-                <TableCell key={`${column.name.toString()}${idx}`}>
-                  {column.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {
-              isAutoPaging?
-                  items
-                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                  .map((item) => {
-                    return (
-                      <TableRow hover tabIndex={-1} key={item.id}>
-                        {columns.map((column, idx) => {
-                          const columnName = column.name;
+    const table = (
+        <>
+            <TableContainer sx={{maxHeight: 440}}>
+                <Table stickyHeader>
+                    <TableHead>
+                        <TableRow>
+                            {columns.map((column, idx) => (
+                                <TableCell key={`${column.name.toString()}${idx}`}>
+                                    {column.label}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {
+                            isAutoPaging ?
+                                items
+                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                    .map((item) => {
+                                        return (
+                                            <TableRow hover tabIndex={-1} key={item.id}>
+                                                {columns.map((column, idx) => {
+                                                    const columnName = column.name;
 
-                          return (
-                            <TableCell key={`${columnName.toString()}-${idx}`}>
-                              {isActionColumn(column) ? (
-                                <IconButton
-                                  color={column.buttonColor ?? "primary"}
-                                  onClick={() => column.onClick(item)}
-                                >
-                                  {column.buttonIcon}
-                                </IconButton>
-                              ) : (
-                                <>{item[columnName] as string}</>
-                              )}
-                            </TableCell>
-                          );
-                        })}
-                      </TableRow>
-                    );
-                  })
-              :
-                  items
-                      .map((item) => {
-                        return (
-                            <TableRow hover tabIndex={-1} key={item.id}>
-                              {columns.map((column, idx) => {
-                                const columnName = column.name;
+                                                    return (
+                                                        <TableCell key={`${columnName.toString()}-${idx}`}>
+                                                            {isActionColumn(column) ? (
+                                                                <IconButton
+                                                                    color={column.buttonColor ?? "primary"}
+                                                                    onClick={() => column.onClick(item)}
+                                                                >
+                                                                    {column.buttonIcon}
+                                                                </IconButton>
+                                                            ) : (
+                                                                <>{item[columnName] as string}</>
+                                                            )}
+                                                        </TableCell>
+                                                    );
+                                                })}
+                                            </TableRow>
+                                        );
+                                    })
+                                :
+                                items
+                                    .map((item) => {
+                                        return (
+                                            <TableRow hover tabIndex={-1} key={item.id}>
+                                                {columns.map((column, idx) => {
+                                                    const columnName = column.name;
 
-                                return (
-                                    <TableCell key={`${columnName.toString()}-${idx}`}>
-                                      {isActionColumn(column) ? (
-                                          <IconButton
-                                              color={column.buttonColor ?? "primary"}
-                                              onClick={() => column.onClick(item)}
-                                          >
-                                            {column.buttonIcon}
-                                          </IconButton>
-                                      ) : (
-                                          <>{item[columnName] as string}</>
-                                      )}
-                                    </TableCell>
-                                );
-                              })}
-                            </TableRow>
-                        );
-                      })
-            }
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <TablePagination
-        rowsPerPageOptions={[10, 25, 100]}
-        component="div"
-        count={pagingController.totalCount == 0 ? items.length : pagingController.totalCount}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-      />
-    </>
-  );
+                                                    return (
+                                                        <TableCell key={`${columnName.toString()}-${idx}`}>
+                                                            {isActionColumn(column) ? (
+                                                                <IconButton
+                                                                    color={column.buttonColor ?? "primary"}
+                                                                    onClick={() => column.onClick(item)}
+                                                                >
+                                                                    {column.buttonIcon}
+                                                                </IconButton>
+                                                            ) : (
+                                                                <>{item[columnName] as string}</>
+                                                            )}
+                                                        </TableCell>
+                                                    );
+                                                })}
+                                            </TableRow>
+                                        );
+                                    })
+                        }
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <TablePagination
+                rowsPerPageOptions={[10, 25, 100]}
+                component="div"
+                count={pagingController.totalCount == 0 ? items.length : pagingController.totalCount}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                onPageChange={handleChangePage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+        </>
+    );
 
-  return noWrapper ? table : <Paper sx={{ overflow: "hidden" }}>{table}</Paper>;
+    return noWrapper ? table : <Paper sx={{overflow: "hidden"}}>{table}</Paper>;
 }
 
 export default SearchResults;