refactor(FE): Move table slice into UI store and persist search

src/components/pages/production/recording/RecordingTable.tsx

@@ -34,7 +34,7 @@ import { useTableFilter } from '@/services/hooks/useTableFilter';
 import toast from 'react-hot-toast';
 import Badge from '@/components/Badge';
 import CheckboxInput from '@/components/input/CheckboxInput';
-import { useTableStore } from '@/stores/table/table.store';
+import { useUiStore } from '@/stores/ui/ui.store';
 import { BaseApproval, BaseApiResponse } from '@/types/api/api-general';
 
 const RowOptionsMenu = ({
@@ -351,7 +351,7 @@ const ApprovalHistoryModal = ({
 };
 
 const RecordingTable = () => {
-  const { searchValue, setSearchValue, resetSearchValue } = useTableStore();
+  const { searchValue, setSearchValue, resetSearchValue } = useUiStore();
   const previousPathRef = useRef<string | null>(null);
 
   const {

src/stores/table/table.store.ts

@@ -1,27 +0,0 @@
-'use client';
-
-import { create } from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
-import { createTableSlice } from '@/stores/table/slices/table.slice';
-import type { TableSlice } from '@/stores/table/slices/table.slice';
-
-export type TableStore = TableSlice;
-
-export const useTableStore = create<TableStore>()(
-  devtools(
-    persist(
-      (...args) => ({
-        ...createTableSlice(...args),
-      }),
-      {
-        name: 'table-cache',
-        partialize: (state) => ({
-          searchValue: state.searchValue,
-        }),
-      }
-    ),
-    {
-      name: 'TableStore',
-    }
-  )
-);

src/stores/ui/slices/table.slice.ts

@@ -4,15 +4,18 @@ export interface TableState {
   searchValue: string;
 }
 
-export interface TableSlice {
+export interface TableUISlice {
   searchValue: string;
   setSearchValue: (value: string) => void;
   resetSearchValue: () => void;
 }
 
-export const createTableSlice: StateCreator<TableSlice, [], [], TableSlice> = (
-  set
-) => ({
+export const createTableUISlice: StateCreator<
+  TableUISlice,
+  [],
+  [],
+  TableUISlice
+> = (set) => ({
   // Initial state
   searchValue: '',
 

src/stores/ui/ui.store.ts

@@ -1,18 +1,28 @@
 'use client';
 
 import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
+import { devtools, persist } from 'zustand/middleware';
 
 import { UIStore } from '@/types/stores';
 import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
 import { createDrawerUISlice } from '@/stores/ui/slices/drawer.slice';
+import { createTableUISlice } from '@/stores/ui/slices/table.slice';
 
 export const useUiStore = create<UIStore>()(
   devtools(
-    (...args) => ({
-      ...createMainUiSlice(...args),
-      ...createDrawerUISlice(...args),
-    }),
+    persist(
+      (...args) => ({
+        ...createMainUiSlice(...args),
+        ...createDrawerUISlice(...args),
+        ...createTableUISlice(...args),
+      }),
+      {
+        name: 'ui-cache',
+        partialize: (state) => ({
+          searchValue: state.searchValue,
+        }),
+      }
+    ),
     {
       name: 'UIStore',
     }

src/types/stores.d.ts

@@ -26,7 +26,13 @@ type DrawerUISlice = {
   setIsNextStep: (v: boolean) => void;
 };
 
-export type UIStore = MainUiSlice & DrawerUISlice;
+type TableUISlice = {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  resetSearchValue: () => void;
+};
+
+export type UIStore = MainUiSlice & DrawerUISlice & TableUISlice;
 
 type ProductionStandardFormSlice = {
   formData: {