From 4e278c5687764915657237782a1aa2b0186dc817 Mon Sep 17 00:00:00 2001 From: rstubryan Date: Tue, 3 Mar 2026 10:59:26 +0700 Subject: [PATCH] refactor(FE): Integrate UI store and pathname sync in master-data tables --- .../pages/master-data/area/AreasTable.tsx | 18 ++++++++-- .../pages/master-data/bank/BanksTable.tsx | 18 ++++++++-- .../master-data/customer/CustomersTable.tsx | 18 ++++++++-- .../pages/master-data/flock/FlocksTable.tsx | 18 ++++++++-- .../master-data/kandang/KandangsTable.tsx | 18 ++++++++-- .../master-data/location/LocationsTable.tsx | 18 ++++++++-- .../master-data/nonstock/NonstocksTable.tsx | 18 ++++++++-- .../product-category/ProductCategoryTable.tsx | 33 ++++++------------- .../master-data/product/ProductTable.tsx | 16 ++++++++- .../ProductionStandardTable.tsx | 11 ++++++- .../master-data/supplier/SupplierTable.tsx | 18 ++++++++-- .../pages/master-data/uom/UomsTable.tsx | 18 ++++++++-- .../master-data/warehouse/WarehousesTable.tsx | 18 ++++++++-- 13 files changed, 195 insertions(+), 45 deletions(-) diff --git a/src/components/pages/master-data/area/AreasTable.tsx b/src/components/pages/master-data/area/AreasTable.tsx index 1884dca3..0ef35c80 100644 --- a/src/components/pages/master-data/area/AreasTable.tsx +++ b/src/components/pages/master-data/area/AreasTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Area } from '@/types/api/master-data/area'; import { AreaApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const AreasTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const AreasTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -132,7 +137,16 @@ const AreasTable = () => { const [selectedArea, setSelectedArea] = useState(undefined); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('areas-table', pathname); + }, [pathname]); + const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/bank/BanksTable.tsx b/src/components/pages/master-data/bank/BanksTable.tsx index a6a5dbef..472d563a 100644 --- a/src/components/pages/master-data/bank/BanksTable.tsx +++ b/src/components/pages/master-data/bank/BanksTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Bank } from '@/types/api/master-data/bank'; import { BankApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const BanksTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const BanksTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -132,7 +137,16 @@ const BanksTable = () => { const [selectedBank, setSelectedBank] = useState(undefined); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('banks-table', pathname); + }, [pathname]); + const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/customer/CustomersTable.tsx b/src/components/pages/master-data/customer/CustomersTable.tsx index 2768daa3..6718d4d8 100644 --- a/src/components/pages/master-data/customer/CustomersTable.tsx +++ b/src/components/pages/master-data/customer/CustomersTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Customer } from '@/types/api/master-data/customer'; import { CustomerApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const CustomersTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const CustomersTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -134,7 +139,16 @@ const CustomersTable = () => { >(undefined); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('customers-table', pathname); + }, [pathname]); + const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx index 3550a346..6ee4d0a1 100644 --- a/src/components/pages/master-data/flock/FlocksTable.tsx +++ b/src/components/pages/master-data/flock/FlocksTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Flock } from '@/types/api/master-data/flock'; import { FlockApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const FlockTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const FlockTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -134,7 +139,16 @@ const FlockTable = () => { ); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('flocks-table', pathname); + }, [pathname]); + const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/kandang/KandangsTable.tsx b/src/components/pages/master-data/kandang/KandangsTable.tsx index 63e9fa58..90d00b29 100644 --- a/src/components/pages/master-data/kandang/KandangsTable.tsx +++ b/src/components/pages/master-data/kandang/KandangsTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -21,6 +21,8 @@ import { KandangApi } from '@/services/api/master-data'; import { formatNumber } from '@/lib/helper'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -102,6 +104,9 @@ const RowOptionsMenu = ({ }; const KandangsTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -110,7 +115,7 @@ const KandangsTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -135,7 +140,16 @@ const KandangsTable = () => { ); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('kandangs-table', pathname); + }, [pathname]); + const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/location/LocationsTable.tsx b/src/components/pages/master-data/location/LocationsTable.tsx index 0b619079..82352dc8 100644 --- a/src/components/pages/master-data/location/LocationsTable.tsx +++ b/src/components/pages/master-data/location/LocationsTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Location } from '@/types/api/master-data/location'; import { LocationApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const LocationsTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const LocationsTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -134,7 +139,16 @@ const LocationsTable = () => { >(undefined); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('locations-table', pathname); + }, [pathname]); + const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/nonstock/NonstocksTable.tsx b/src/components/pages/master-data/nonstock/NonstocksTable.tsx index 8f15e529..db1ebc06 100644 --- a/src/components/pages/master-data/nonstock/NonstocksTable.tsx +++ b/src/components/pages/master-data/nonstock/NonstocksTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Nonstock } from '@/types/api/master-data/nonstock'; import { NonstockApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const NonstocksTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const NonstocksTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -117,6 +122,14 @@ const NonstocksTable = () => { }, }); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('nonstocks-table', pathname); + }, [pathname]); + const [sorting, setSorting] = useState([]); const { @@ -135,6 +148,7 @@ const NonstocksTable = () => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx index 161ebed4..c04c135a 100644 --- a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx +++ b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx @@ -7,6 +7,7 @@ import { useRef, useState, } from 'react'; +import { usePathname } from 'next/navigation'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -108,8 +109,8 @@ const RowOptionsMenu = ({ }; const ProductCategoryTable = () => { - const { searchValue, setSearchValue, resetSearchValue } = useUiStore(); - const previousPathRef = useRef(null); + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); const { state: tableFilterState, @@ -119,7 +120,7 @@ const ProductCategoryTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: searchValue, + search: '', }, paramMap: { page: 'page', @@ -127,6 +128,10 @@ const ProductCategoryTable = () => { }, }); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + const [sorting, setSorting] = useState([]); const { @@ -216,26 +221,8 @@ const ProductCategoryTable = () => { ); useEffect(() => { - // Store current path on mount - previousPathRef.current = window.location.pathname; - - return () => { - const currentPath = window.location.pathname; - - // if both paths are within /master-data/product-category module - const isCurrentPathProductCategory = currentPath.includes( - '/master-data/product-category' - ); - const isPreviousPathProductCategory = previousPathRef.current?.includes( - '/master-data/product-category' - ); - - // reset if we outside product category module entirely - if (isPreviousPathProductCategory && !isCurrentPathProductCategory) { - resetSearchValue(); - } - }; - }, [resetSearchValue]); + setTableState('product-category-table', pathname); + }, [pathname]); return ( <> diff --git a/src/components/pages/master-data/product/ProductTable.tsx b/src/components/pages/master-data/product/ProductTable.tsx index 08b585f0..d16bffe2 100644 --- a/src/components/pages/master-data/product/ProductTable.tsx +++ b/src/components/pages/master-data/product/ProductTable.tsx @@ -1,6 +1,7 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; +import { usePathname } from 'next/navigation'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -21,6 +22,7 @@ import { ProductApi } from '@/services/api/master-data'; import { formatCurrency } from '@/lib/helper'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -102,6 +104,9 @@ const RowOptionsMenu = ({ }; const ProductsTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -118,6 +123,10 @@ const ProductsTable = () => { }, }); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + const [sorting, setSorting] = useState([]); const { @@ -135,7 +144,12 @@ const ProductsTable = () => { ); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + useEffect(() => { + setTableState('product-table', pathname); + }, [pathname]); + const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx b/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx index 0ff8b594..2e788ed3 100644 --- a/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx +++ b/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -18,6 +18,8 @@ import ProductionStandardTableSkeleton from '@/components/pages/master-data/prod import { ProductionStandard } from '@/types/api/master-data/production-standard'; import { ProductionStandardApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -99,6 +101,13 @@ const RowOptionsMenu = ({ }; const ProductionStandardTable = () => { + const { setTableState } = useUiStore(); + const pathname = usePathname(); + + useEffect(() => { + setTableState('production-standard-table', pathname); + }, [pathname]); + const [sorting, setSorting] = useState([]); const { diff --git a/src/components/pages/master-data/supplier/SupplierTable.tsx b/src/components/pages/master-data/supplier/SupplierTable.tsx index 2b6cb227..b7fd571a 100644 --- a/src/components/pages/master-data/supplier/SupplierTable.tsx +++ b/src/components/pages/master-data/supplier/SupplierTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Supplier } from '@/types/api/master-data/supplier'; import { SupplierApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const SuppliersTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const SuppliersTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -117,6 +122,14 @@ const SuppliersTable = () => { }, }); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('suppliers-table', pathname); + }, [pathname]); + const [sorting, setSorting] = useState([]); const { @@ -135,6 +148,7 @@ const SuppliersTable = () => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/uom/UomsTable.tsx b/src/components/pages/master-data/uom/UomsTable.tsx index aeaae276..ce853b1b 100644 --- a/src/components/pages/master-data/uom/UomsTable.tsx +++ b/src/components/pages/master-data/uom/UomsTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Uom } from '@/types/api/master-data/uom'; import { UomApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const UomsTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const UomsTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -117,6 +122,14 @@ const UomsTable = () => { }, }); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('uoms-table', pathname); + }, [pathname]); + const [sorting, setSorting] = useState([]); const { @@ -133,6 +146,7 @@ const UomsTable = () => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); }; diff --git a/src/components/pages/master-data/warehouse/WarehousesTable.tsx b/src/components/pages/master-data/warehouse/WarehousesTable.tsx index c800e8eb..7cf6f918 100644 --- a/src/components/pages/master-data/warehouse/WarehousesTable.tsx +++ b/src/components/pages/master-data/warehouse/WarehousesTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; import useSWR from 'swr'; import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; import toast from 'react-hot-toast'; @@ -20,6 +20,8 @@ import { Warehouse } from '@/types/api/master-data/warehouse'; import { WarehouseApi } from '@/services/api/master-data'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { usePathname } from 'next/navigation'; +import { useUiStore } from '@/stores/ui/ui.store'; const RowOptionsMenu = ({ popoverPosition = 'bottom', @@ -101,6 +103,9 @@ const RowOptionsMenu = ({ }; const WarehousesTable = () => { + const { searchValue, setSearchValue, setTableState } = useUiStore(); + const pathname = usePathname(); + const { state: tableFilterState, updateFilter, @@ -109,7 +114,7 @@ const WarehousesTable = () => { toQueryString: getTableFilterQueryString, } = useTableFilter({ initial: { - search: '', + search: searchValue, }, paramMap: { page: 'page', @@ -117,6 +122,14 @@ const WarehousesTable = () => { }, }); + useEffect(() => { + updateFilter('search', searchValue); + }, [searchValue, updateFilter]); + + useEffect(() => { + setTableState('warehouses-table', pathname); + }, [pathname]); + const [sorting, setSorting] = useState([]); const { @@ -135,6 +148,7 @@ const WarehousesTable = () => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const searchChangeHandler: ChangeEventHandler = (e) => { + setSearchValue(e.target.value); updateFilter('search', e.target.value); };