diff options
| -rw-r--r-- | src/common/stores/useResultStore.ts | 4 | ||||
| -rw-r--r-- | src/modules/result/components/Filter.tsx | 3 | ||||
| -rw-r--r-- | src/modules/result/components/Table.tsx | 19 |
3 files changed, 13 insertions, 13 deletions
diff --git a/src/common/stores/useResultStore.ts b/src/common/stores/useResultStore.ts index 09e8146..680db56 100644 --- a/src/common/stores/useResultStore.ts +++ b/src/common/stores/useResultStore.ts @@ -6,12 +6,13 @@ type State = { search: string; company: string; show: string; + page: number; }; companies: SelectOption[]; }; type Action = { - updateFilter: (name: string, value: string) => void; + updateFilter: (name: string, value: string | number) => void; setCompanies: (data: SelectOption[]) => void; }; @@ -20,6 +21,7 @@ export const useResultStore = create<State & Action>((set) => ({ search: "", company: "", show: "1", + page: 1, }, updateFilter: (name, value) => set((state) => ({ diff --git a/src/modules/result/components/Filter.tsx b/src/modules/result/components/Filter.tsx index 73f346c..511b91c 100644 --- a/src/modules/result/components/Filter.tsx +++ b/src/modules/result/components/Filter.tsx @@ -38,7 +38,8 @@ const Filter = () => { <div className="w-full md:w-10/12"> <Input type="text" - label="Produk" + label="Pencarian" + placeholder="Cari nama, sku, barcode, atau rak" name="search" onChange={handleInputChange} value={filter.search} diff --git a/src/modules/result/components/Table.tsx b/src/modules/result/components/Table.tsx index 8a29fd4..a184ad7 100644 --- a/src/modules/result/components/Table.tsx +++ b/src/modules/result/components/Table.tsx @@ -3,28 +3,25 @@ import { useResultStore } from "@/common/stores/useResultStore"; import { StockOpnameRes } from "@/common/types/stockOpname"; import { Button, Pagination, Skeleton, Spacer, Spinner } from "@nextui-org/react" import { useQuery } from "@tanstack/react-query"; -import { useSearchParams } from "next/navigation"; -import { useRouter } from "next/navigation"; import styles from "./table.module.css" import clsxm from "@/common/libs/clsxm"; import DetailRow from "./DetailRow"; import { useDebounce } from "usehooks-ts"; import getClientCredential from "@/common/libs/getClientCredential"; import { SHOWING_SELECTIONS } from "@/common/constants/result"; -import Link from "next/link"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import moment from "moment"; const Table = () => { const credential = getClientCredential() - const params = useSearchParams() - const router = useRouter() - const page = params.get('page') ?? '1' - - const { filter: { company, search, show } } = useResultStore() + const { filter: { company, search, show, page }, updateFilter } = useResultStore() const debouncedSearch = useDebounce(search, 500) + useEffect(() => { + updateFilter('page', 1) + }, [company, debouncedSearch, show, updateFilter]) + const stockOpnames = useQuery({ queryKey: ['stockOpnames', company, debouncedSearch, page, show], queryFn: async () => { @@ -37,7 +34,7 @@ const Table = () => { if (debouncedSearch) searchParams.set('search', debouncedSearch) - searchParams.set('page', page); + searchParams.set('page', page.toString()); return await fetch(`/api/stock-opname?${searchParams}`) .then(res => res.json()) @@ -155,7 +152,7 @@ const Table = () => { isCompact page={stockOpnames.data?.page || 1} total={stockOpnames.data?.totalPage || 1} - onChange={(page) => router.push(`?page=${page}`)} + onChange={(page) => updateFilter('page', page)} /> </div> </> |