Add page on useResultStore

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>
     </>