update invertory searh

src/components/General/GeneralLoading.tsx

@@ -23,7 +23,7 @@ export const GeneralLoading: React.FC = () => {
         </CardContent>
       </Card>
       <Card>
-        CreateMaterial
+        {/* CreateMaterial */}
         <CardContent>
           <Stack spacing={2}>
             <Skeleton variant="rounded" height={40} />

src/components/InventorySearch/InventoryLotLineTable.tsx

@@ -17,10 +17,10 @@ interface Props {
     setPagingController: defaultSetPagingController;
     pagingController: typeof defaultPagingController;
     totalCount: number;
-    item: InventoryResult | null;
+    inventory: InventoryResult | null;
 }
 
-const InventoryLotLineTable: React.FC<Props> = ({ inventoryLotLines, pagingController, setPagingController, totalCount, item }) => {
+const InventoryLotLineTable: React.FC<Props> = ({ inventoryLotLines, pagingController, setPagingController, totalCount, inventory }) => {
     const { t } = useTranslation(["inventory"]);
     const { setIsUploading } = useUploadContext();
 
@@ -32,7 +32,6 @@ const InventoryLotLineTable: React.FC<Props> = ({ inventoryLotLines, pagingContr
       }
       const response = await fetchQrCodeByLotLineId(postData);
       if (response) {
-        console.log(response);
         downloadFile(new Uint8Array(response.blobValue), response.filename!);
       }
       setIsUploading(false);
@@ -40,7 +39,6 @@ const InventoryLotLineTable: React.FC<Props> = ({ inventoryLotLines, pagingContr
     
     const onDetailClick = useCallback(
       (lotLine: InventoryLotLineResult) => {
-        console.log(lotLine)
         printQrcode(lotLine.id)
         // lot line id to find stock in line
       },
@@ -136,7 +134,7 @@ const InventoryLotLineTable: React.FC<Props> = ({ inventoryLotLines, pagingContr
         [t],
     );
     return <>
-    <Typography variant="h6">{item ? `${t("Item selected")}: ${item.itemCode} | ${item.itemName} (${t(item.itemType)})` : t("No items are selected yet.")}</Typography>
+    <Typography variant="h6">{inventory ? `${t("Item selected")}: ${inventory.itemCode} | ${inventory.itemName} (${t(inventory.itemType)})` : t("No items are selected yet.")}</Typography>
     <SearchResults<InventoryLotLineResult>
         items={inventoryLotLines ?? []}
         columns={columns}

src/components/InventorySearch/InventorySearch.tsx

@@ -3,7 +3,7 @@ import { InventoryLotLineResult, InventoryResult } from "@/app/api/inventory";
 import { useTranslation } from "react-i18next";
 import SearchBox, { Criterion } from "../SearchBox";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { orderBy, uniq, uniqBy } from "lodash";
+import { isEqual, orderBy, uniq, uniqBy } from "lodash";
 import SearchResults, { Column } from "../SearchResults";
 import { CheckCircleOutline, DoDisturb } from "@mui/icons-material";
 import InventoryTable from "./InventoryTable";
@@ -39,14 +39,14 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
   const [filteredInventories, setFilteredInventories] = useState<InventoryResult[]>([]);
   const [inventoriesPagingController, setInventoriesPagingController] = useState(defaultPagingController)
   const [inventoriesTotalCount, setInventoriesTotalCount] = useState(0)
-  const [item, setItem] = useState<InventoryResult | null>(null)
+  const [selectedInventory, setSelectedInventory] = useState<InventoryResult | null>(null)
 
   // Inventory Lot Line
   const [filteredInventoryLotLines, setFilteredInventoryLotLines] = useState<InventoryLotLineResult[]>([]);
   const [inventoryLotLinesPagingController, setInventoryLotLinesPagingController] = useState(defaultPagingController)
   const [inventoryLotLinesTotalCount, setInventoryLotLinesTotalCount] = useState(0)
 
-  const [inputs, setInputs] = useState<Record<SearchParamNames, string>>({
+  const defaultInputs = useMemo(() => ({
     itemId: "",
     itemCode: "",
     itemName: "",
@@ -58,7 +58,8 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
     currencyName: "",
     status: "",
     baseUom: "",
-  });
+  }), [])
+  const [inputs, setInputs] = useState<Record<SearchParamNames, string>>(defaultInputs);
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
@@ -80,24 +81,33 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
     [t],
   );
 
+  // Inventory
   const refetchInventoryData = useCallback(async (
     query: Record<SearchParamNames, string>,
-    actionType: "reset" | "search" | "paging"
+    actionType: "reset" | "search" | "paging" | "init",
+    pagingController: typeof defaultPagingController,
   ) => {
+    console.log("%c Action Type 1.", "color:red", actionType)
+    // Avoid loading data again
+    if (actionType === "paging" && pagingController === defaultPagingController) {
+      return
+    }
+    console.log("%c Action Type 2.", "color:blue", actionType)
+
     const params: SearchInventory = {
       code: query?.itemCode ?? '',
       name: query?.itemName ?? '',
       type: query?.itemType.toLowerCase() === "all" ? '' : query?.itemType ?? '',
-      pageNum: inventoriesPagingController.pageNum - 1,
-      pageSize: inventoriesPagingController.pageSize
+      pageNum: pagingController.pageNum - 1,
+      pageSize: pagingController.pageSize
     }
 
     const response = await fetchInventories(params)
 
     if (response) {
-      console.log(response)
       setInventoriesTotalCount(response.total);
       switch (actionType) {
+        case "init":
         case "reset":
         case "search":
           setFilteredInventories(() => response.records);
@@ -110,31 +120,43 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
               );
       }
     }
-  }, [inventoriesPagingController, setInventoriesPagingController])
+  }, [])
 
   useEffect(() => {
-    refetchInventoryData(inputs, "paging")
+    refetchInventoryData(defaultInputs, "init", defaultPagingController)
+  }, [])
+
+  useEffect(() => {
+    // if (!isEqual(inventoriesPagingController, defaultPagingController)) {
+      refetchInventoryData(inputs, "paging", inventoriesPagingController)
+    // }
   }, [inventoriesPagingController])
 
+  // Inventory Lot Line
   const refetchInventoryLotLineData = useCallback(async (
     itemId: number | null,
-    actionType: "reset" | "search" | "paging"
+    actionType: "reset" | "search" | "paging",
+    pagingController: typeof defaultPagingController,
   ) => {
     if (!itemId) {
-      setItem(null)
+      setSelectedInventory(null)
       setInventoryLotLinesTotalCount(0);
       setFilteredInventoryLotLines([])
       return
     }
 
+    // Avoid loading data again
+    if (actionType === "paging" && pagingController === defaultPagingController) {
+      return
+    }
+
     const params: SearchInventoryLotLine = {
       itemId: itemId,
-      pageNum: inventoriesPagingController.pageNum - 1,
-      pageSize: inventoriesPagingController.pageSize
+      pageNum: pagingController.pageNum - 1,
+      pageSize: pagingController.pageSize
     }
 
     const response = await fetchInventoryLotLines(params)
-
     if (response) {
       setInventoryLotLinesTotalCount(response.total);
       switch (actionType) {
@@ -144,38 +166,61 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
           break;
         case "paging":
           setFilteredInventoryLotLines((fi) =>
-            orderBy(
+            // orderBy(
               uniqBy([...fi, ...response.records], "id"),
-              ["id"], ["desc"]
-            ));
+              // ["id"], ["desc"])
+              );
       }
     }
-  }, [inventoriesPagingController, setInventoriesPagingController])
+  }, [])
 
   useEffect(() => {
-    refetchInventoryData(inputs, "paging")
-  }, [inventoriesPagingController])
+    // if (!isEqual(inventoryLotLinesPagingController, defaultPagingController)) {
+      refetchInventoryLotLineData(selectedInventory?.itemId ?? null, "paging", inventoryLotLinesPagingController)
+    // }
+  }, [inventoryLotLinesPagingController])
 
+  // Reset
   const onReset = useCallback(() => {
-    refetchInventoryData(inputs, "reset");
-    refetchInventoryLotLineData(null, "reset");
+    refetchInventoryData(defaultInputs, "reset", defaultPagingController);
+    refetchInventoryLotLineData(null, "reset", defaultPagingController);
     // setFilteredInventories(inventories);
+
+    setInputs(() => defaultInputs)
+    setInventoriesPagingController(() => defaultPagingController)
+    setInventoryLotLinesPagingController(() => defaultPagingController)
   }, []);
 
+  // Click Row
   const onInventoryRowClick = useCallback((item: InventoryResult) => {
-    setItem(item)
-    refetchInventoryLotLineData(item.itemId, "search")
+    refetchInventoryLotLineData(item.itemId, "search", defaultPagingController)
+
+    setSelectedInventory(item)
+    setInventoryLotLinesPagingController(() => defaultPagingController)
   }, [])
 
+  // On Search
+  const onSearch = useCallback((query: Record<SearchParamNames, string>) => {
+    refetchInventoryData(query, "search", defaultPagingController)
+    refetchInventoryLotLineData(null, "search", defaultPagingController);
+
+    setInputs(() => query)
+    setInventoriesPagingController(() => defaultPagingController)
+    setInventoryLotLinesPagingController(() => defaultPagingController)
+  }, [refetchInventoryData])
+
+  console.log("", "color: #666", inventoriesPagingController)
+
   return (
     <>
       <SearchBox
         criteria={searchCriteria}
         onSearch={(query) => {
+          onSearch(query)
           // console.log(query)
           // console.log(inventories)
-          setInputs(() => query)
-          refetchInventoryData(query, "search")
+          // setInputs(() => query)
+          // refetchInventoryData(query, "search", defaultPagingController)
           // setFilteredInventories(
           //   inventories.filter(
           //     (i) =>
@@ -202,7 +247,7 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
         pagingController={inventoryLotLinesPagingController}
         setPagingController={setInventoryLotLinesPagingController}
         totalCount={inventoryLotLinesTotalCount}
-        item={item}
+        inventory={selectedInventory}
       />
     </>
   );

src/components/SearchResults/SearchResults.tsx

@@ -331,7 +331,8 @@ function SearchResults<T extends ResultWithId>({
           <TableBody>
             {isAutoPaging
               ? items
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .slice((pagingController?.pageNum ? pagingController?.pageNum - 1 :page) * (pagingController?.pageSize ?? rowsPerPage), 
+                (pagingController?.pageNum ? pagingController?.pageNum - 1 :page) * (pagingController?.pageSize ?? rowsPerPage) + (pagingController?.pageSize ?? rowsPerPage))
                 .map((item) => {
                   return (
                     <TableRow
@@ -339,7 +340,6 @@ function SearchResults<T extends ResultWithId>({
                       tabIndex={-1}
                       key={item.id}
                       onClick={(event) => {
-                        console.log("first")
                         setCheckboxIds
                           ? handleRowClick(event, item, columns)
                           : undefined
@@ -412,8 +412,8 @@ function SearchResults<T extends ResultWithId>({
         //     ? items.length
         //     : pagingController.totalCount
         // }
-        rowsPerPage={rowsPerPage}
-        page={page}
+        rowsPerPage={pagingController?.pageSize ? pagingController?.pageSize : rowsPerPage}
+        page={pagingController?.pageNum ? pagingController?.pageNum - 1 : page}
         onPageChange={handleChangePage}
         onRowsPerPageChange={handleChangeRowsPerPage}
       />