From f34247cbd27d59a77b6729b7f01e5f187c5420fc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Nov 2023 10:16:40 +0700
Subject: Add page on useResultStore

---
 src/modules/result/components/Filter.tsx |  3 ++-
 src/modules/result/components/Table.tsx  | 19 ++++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'src/modules')

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>
     </>
-- 
cgit v1.2.3