feat(FE): refactor drawer zustand store

src/app/production/project-flock/layout.tsx

@@ -4,7 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import Drawer from '@/components/Drawer';
 import React, { ReactNode } from 'react';
 import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
-import { useProjectFlockUiStore } from '@/stores/ui/slices/production/project-flock.slice';
+import { useUiStore } from '@/stores/ui/ui.store';
 
 export default function ProjectFlockLayout({
   children,
@@ -13,7 +13,7 @@ export default function ProjectFlockLayout({
 }) {
   const pathname = usePathname();
   const router = useRouter();
-  const toggleValidate = useProjectFlockUiStore((s) => s.toggleValidate);
+  const toggleValidate = useUiStore((s) => s.toggleValidate);
 
   const isAdd = pathname.endsWith('/add');
   const isEdit = pathname.includes('/detail/edit');
@@ -23,14 +23,12 @@ export default function ProjectFlockLayout({
   const isOpen = isAdd || isEdit || isDetail || isChickin;
 
   const handleBackdropClick = () => {
-    const unsub = useProjectFlockUiStore
-      .getState()
-      .subscribeIsValid((isValid) => {
-        if (isValid) {
-          unsub(); // berhenti listen
-          router.push('/production/project-flock');
-        }
-      });
+    const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
+      if (isValid) {
+        unsub(); // berhenti listen
+        router.push('/production/project-flock');
+      }
+    });
 
     toggleValidate();
   };

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -17,7 +17,7 @@ import {
 import { Icon } from '@iconify/react';
 import { FormikErrors, useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { use, useEffect, useMemo, useState } from 'react';
 import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockBudgetsSchemaType,
@@ -45,8 +45,8 @@ import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWith
 import NumberInput from '@/components/input/NumberInput';
 import Card from '@/components/Card';
 import ProjectFlockKandangTable from '@/components/pages/production/project-flock/form/ProjectFlockKandangTable';
-import { useProjectFlockUiStore } from '@/stores/ui/slices/production/project-flock.slice';
 import { Nonstock } from '@/types/api/master-data/nonstock';
+import { useUiStore } from '@/stores/ui/ui.store';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -83,8 +83,8 @@ const ProjectFlockForm = ({
       initialValues?.flock_name?.lastIndexOf(' ')
     ) ?? ''
   );
-  const subscribeValidate = useProjectFlockUiStore((s) => s.subscribeValidate);
-  const setIsValid = useProjectFlockUiStore((s) => s.setIsValid);
+  const subscribeValidate = useUiStore((s) => s.subscribeValidate);
+  const setIsValid = useUiStore((s) => s.setIsValid);
 
   const deleteModal = useModal();
   const confirmModal = useModal();

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

@@ -1,21 +1,11 @@
+import { DrawerUISlice } from '@/types/stores';
 import { StateCreator } from 'zustand';
-import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
 
-export type ProjectFloockUISlice = {
-  triggerValidate: boolean;
-  toggleValidate: () => void;
-  subscribeValidate: (callback: () => void) => void;
-  isValid: boolean;
-  setIsValid: (v: boolean) => void;
-  subscribeIsValid: (callback: (isValid: boolean) => void) => () => void;
-};
-
-export const createProjectFlockUiSlice: StateCreator<
-  ProjectFloockUISlice,
+export const createDrawerUISlice: StateCreator<
+  DrawerUISlice,
   [],
   [],
-  ProjectFloockUISlice
+  DrawerUISlice
 > = (set, get, api) => ({
   // event flag untuk memicu formik validate
   triggerValidate: false,
@@ -48,14 +38,3 @@ export const createProjectFlockUiSlice: StateCreator<
     });
   },
 });
-
-export const useProjectFlockUiStore = create<ProjectFloockUISlice>()(
-  devtools(
-    (...args) => ({
-      ...createProjectFlockUiSlice(...args),
-    }),
-    {
-      name: 'ProjectFlockUiStore',
-    }
-  )
-);

src/stores/ui/ui.store.ts

@@ -5,11 +5,13 @@ import { devtools } from 'zustand/middleware';
 
 import { UIStore } from '@/types/stores';
 import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
+import { createDrawerUISlice } from '@/stores/ui/slices/drawer.slice';
 
 export const useUiStore = create<UIStore>()(
   devtools(
     (...args) => ({
       ...createMainUiSlice(...args),
+      ...createDrawerUISlice(...args),
     }),
     {
       name: 'UIStore',

src/types/stores.d.ts

@@ -3,4 +3,13 @@ type MainUiSlice = {
   setMainDrawerOpen: (open: boolean) => void;
 };
 
-export type UIStore = MainUiSlice;
+type DrawerUISlice = {
+  triggerValidate: boolean;
+  toggleValidate: () => void;
+  subscribeValidate: (callback: () => void) => void;
+  isValid: boolean;
+  setIsValid: (v: boolean) => void;
+  subscribeIsValid: (callback: (isValid: boolean) => void) => () => void;
+};
+
+export type UIStore = MainUiSlice & DrawerUISlice;