fix: update dependencies in multiple tables to include updateSortingFilter in effect dependencies

package.json

@@ -6,6 +6,8 @@
     "dev": "eslint && next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
+    "start": "npx serve@latest out",
+    "start:next": "next start",
     "lint": "eslint"
   },
   "dependencies": {

src/components/pages/master-data/kandang/KandangsTable.tsx

@@ -231,7 +231,7 @@ const KandangsTable = () => {
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('locationSort', locationSortFilter);
     updateSortingFilter('picSort', picSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>

src/components/pages/master-data/location/LocationsTable.tsx

@@ -230,7 +230,7 @@ const LocationsTable = () => {
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('addressSort', addressSortFilter);
     updateSortingFilter('areaSort', areaSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -99,7 +99,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
 
   useEffect(() => {
     formik.setValues(formikInitialValues);
-  }, [formikInitialValues]);
+  }, [formik, formikInitialValues]);
 
   return (
     <section className='w-full max-w-xl'>

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

@@ -66,7 +66,12 @@ const RowOptionsMenu = ({
         color='error'
         className='text-error hover:text-inherit'
       >
-        <Icon icon='mdi:delete-outline' width={16} height={16} className='justify-start text-sm' />
+        <Icon
+          icon='mdi:delete-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
         Delete
       </Button>
     </div>
@@ -96,7 +101,9 @@ const ProductCategoryTable = () => {
 
   const deleteModal = useModal();
 
-  const [selectedProductCategory, setSelectedProductCategory] = useState<ProductCategory | undefined>(undefined);
+  const [selectedProductCategory, setSelectedProductCategory] = useState<
+    ProductCategory | undefined
+  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -186,7 +193,7 @@ const ProductCategoryTable = () => {
     } else {
       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
     }
-  }, [sorting]);
+  }, [sorting, updateFilter]);
 
   return (
     <>
@@ -221,18 +228,30 @@ const ProductCategoryTable = () => {
           </div>
         </div>
         <Table<ProductCategory>
-          data={isResponseSuccess(productCategories) ? productCategories?.data : []}
+          data={
+            isResponseSuccess(productCategories) ? productCategories?.data : []
+          }
           columns={productCategoryColumns}
           pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(productCategories) ? productCategories?.meta?.page : 0}
+          page={
-          totalItems={isResponseSuccess(productCategories) ? productCategories?.meta?.total_results : 0}
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.total_results
+              : 0
+          }
           onPageChange={setPage}
           isLoading={isLoading}
           sorting={sorting}
           setSorting={setSorting}
           className={{
             containerClassName: cn({
-              'mb-20': isResponseSuccess(productCategories) && productCategories?.data?.length === 0,
+              'mb-20':
+                isResponseSuccess(productCategories) &&
+                productCategories?.data?.length === 0,
             }),
             tableWrapperClassName: 'overflow-x-auto min-h-full!',
             tableClassName: 'font-inter w-full table-auto min-h-full!',
@@ -263,4 +282,4 @@ const ProductCategoryTable = () => {
   );
 };
 
-export default ProductCategoryTable;
+export default ProductCategoryTable;

src/components/pages/master-data/product/ProductTable.tsx

@@ -116,7 +116,9 @@ const ProductsTable = () => {
   );
 
   const deleteModal = useModal();
-  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(undefined);
+  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(
+    undefined
+  );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -153,12 +155,14 @@ const ProductsTable = () => {
     {
       accessorKey: 'product_price',
       header: 'Harga Produk',
-      cell: (props) => props.row.original.product_price?.toLocaleString() ?? '-',
+      cell: (props) =>
+        props.row.original.product_price?.toLocaleString() ?? '-',
     },
     {
       accessorKey: 'selling_price',
       header: 'Harga Jual',
-      cell: (props) => props.row.original.selling_price?.toLocaleString() ?? '-',
+      cell: (props) =>
+        props.row.original.selling_price?.toLocaleString() ?? '-',
     },
     {
       accessorKey: 'tax',
@@ -261,13 +265,15 @@ const ProductsTable = () => {
     const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
     const skuSortFilter = sorting.find((sortItem) => sortItem.id === 'sku');
     const brandSortFilter = sorting.find((sortItem) => sortItem.id === 'brand');
-    const categorySortFilter = sorting.find((sortItem) => sortItem.id === 'product_category');
+    const categorySortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'product_category'
+    );
 
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('skuSort', skuSortFilter);
     updateSortingFilter('brandSort', brandSortFilter);
     updateSortingFilter('categorySort', categorySortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>
@@ -347,4 +353,4 @@ const ProductsTable = () => {
   );
 };
 
-export default ProductsTable;
+export default ProductsTable;

src/components/pages/master-data/uom/UomsTable.tsx

@@ -192,7 +192,7 @@ const UomsTable = () => {
     } else {
       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
     }
-  }, [sorting]);
+  }, [sorting, updateFilter]);
 
   return (
     <>

src/components/pages/master-data/warehouse/WarehousesTable.tsx

@@ -270,7 +270,7 @@ const WarehousesTable = () => {
     updateSortingFilter('areaSort', areaSortFilter);
     updateSortingFilter('locationSort', locationSortFilter);
     updateSortingFilter('kandangSort', kandangSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>