refactor(FE-316): Extract uniformity state into separate store

src/components/pages/uniformity/form/UniformityForm.tsx

@@ -7,6 +7,7 @@ import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { useUiStore } from '@/stores/ui/ui.store';
+import { useUniformityStore } from '@/stores/uniformity/uniformity.store';
 import Button from '@/components/Button';
 import DateInput from '@/components/input/DateInput';
 
@@ -61,12 +62,15 @@ const UniformityForm = ({
   );
   const isNextStep = useUiStore((s) => s.isNextStep);
   const setIsNextStep = useUiStore((s) => s.setIsNextStep);
-  const setVerifyUniformityResult = useUiStore(
+
+  const setVerifyUniformityResult = useUniformityStore(
     (s) => s.setVerifyUniformityResult
   );
-  const setUniformityFormData = useUiStore((s) => s.setUniformityFormData);
+  const setUniformityFormData = useUniformityStore(
-  const uniformityStep = useUiStore((s) => s.uniformityStep);
+    (s) => s.setUniformityFormData
-  const setUniformityStep = useUiStore((s) => s.setUniformityStep);
+  );
+  const uniformityStep = useUniformityStore((s) => s.uniformityStep);
+  const setUniformityStep = useUniformityStore((s) => s.setUniformityStep);
 
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');

src/components/pages/uniformity/form/UniformityPreviewForm.tsx

@@ -7,6 +7,7 @@ import Button from '@/components/Button';
 import Tooltip from '@/components/Tooltip';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { useUiStore } from '@/stores/ui/ui.store';
+import { useUniformityStore } from '@/stores/uniformity/uniformity.store';
 import RequirePermission from '@/components/helper/RequirePermission';
 import Table from '@/components/Table';
 
@@ -19,8 +20,10 @@ type BodyWeightData = {
 const UniformityPreviewForm = () => {
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
   const setIsNextStep = useUiStore((s) => s.setIsNextStep);
-  const setUniformityStep = useUiStore((s) => s.setUniformityStep);
+  const setUniformityStep = useUniformityStore((s) => s.setUniformityStep);
-  const verifyUniformityResult = useUiStore((s) => s.verifyUniformityResult);
+  const verifyUniformityResult = useUniformityStore(
+    (s) => s.verifyUniformityResult
+  );
 
   const handleClose = () => {
     setExpandedDrawerOpen(false);

src/components/pages/uniformity/form/UniformityResultForm.tsx

@@ -7,6 +7,7 @@ import Button from '@/components/Button';
 import Tooltip from '@/components/Tooltip';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { useUiStore } from '@/stores/ui/ui.store';
+import { useUniformityStore } from '@/stores/uniformity/uniformity.store';
 import RequirePermission from '@/components/helper/RequirePermission';
 import Table from '@/components/Table';
 import { useRouter } from 'next/navigation';
@@ -24,12 +25,14 @@ const UniformityResultForm = () => {
   const router = useRouter();
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
   const setIsNextStep = useUiStore((s) => s.setIsNextStep);
-  const setUniformityStep = useUiStore((s) => s.setUniformityStep);
+  const setUniformityStep = useUniformityStore((s) => s.setUniformityStep);
-  const verifyUniformityResult = useUiStore((s) => s.verifyUniformityResult);
+  const verifyUniformityResult = useUniformityStore(
-  const setVerifyUniformityResult = useUiStore(
+    (s) => s.verifyUniformityResult
+  );
+  const setVerifyUniformityResult = useUniformityStore(
     (s) => s.setVerifyUniformityResult
   );
-  const uniformityFormData = useUiStore((s) => s.uniformityFormData);
+  const uniformityFormData = useUniformityStore((s) => s.uniformityFormData);
 
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 

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

@@ -48,14 +48,4 @@ export const createDrawerUISlice: StateCreator<
 
   isNextStep: false,
   setIsNextStep: (isNextStep: boolean) => set({ isNextStep }),
-
-  verifyUniformityResult: null,
-  setVerifyUniformityResult: (result) =>
-    set({ verifyUniformityResult: result }),
-
-  uniformityStep: 'preview',
-  setUniformityStep: (step) => set({ uniformityStep: step }),
-
-  uniformityFormData: null,
-  setUniformityFormData: (data) => set({ uniformityFormData: data }),
 });

src/stores/uniformity/uniformity.store.ts

@@ -0,0 +1,54 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { VerifyUniformityResponse } from '@/types/api/uniformity/uniformity';
+
+export type UniformityStep = 'preview' | 'result';
+
+export type UniformityFormData = {
+  date: string;
+  project_flock_kandang_id: number;
+  files: File | null;
+  fileName: string;
+};
+
+type UniformityState = {
+  // State
+  uniformityStep: UniformityStep;
+  verifyUniformityResult: VerifyUniformityResponse | null;
+  uniformityFormData: UniformityFormData | null;
+
+  // Actions
+  setUniformityStep: (step: UniformityStep) => void;
+  setVerifyUniformityResult: (result: VerifyUniformityResponse | null) => void;
+  setUniformityFormData: (data: UniformityFormData | null) => void;
+  resetUniformity: () => void;
+};
+
+export const useUniformityStore = create<UniformityState>()(
+  devtools(
+    (set) => ({
+      // Initial state
+      uniformityStep: 'preview',
+      verifyUniformityResult: null,
+      uniformityFormData: null,
+
+      // Actions
+      setUniformityStep: (step) => set({ uniformityStep: step }),
+
+      setVerifyUniformityResult: (result) =>
+        set({ verifyUniformityResult: result }),
+
+      setUniformityFormData: (data) => set({ uniformityFormData: data }),
+
+      resetUniformity: () =>
+        set({
+          uniformityStep: 'preview',
+          verifyUniformityResult: null,
+          uniformityFormData: null,
+        }),
+    }),
+    {
+      name: 'UniformityStore',
+    }
+  )
+);

src/types/stores.d.ts

@@ -1,21 +1,10 @@
 import type { ReactNode } from 'react';
-import type {
-  VerifyUniformityResponse,
-  CreateUniformityPayload,
-} from '@/types/api/uniformity/uniformity';
 
 type MainUiSlice = {
   mainDrawerOpen: boolean;
   setMainDrawerOpen: (open: boolean) => void;
 };
 
-type UniformityFormData = {
-  date: string;
-  project_flock_kandang_id: number;
-  files: File | null;
-  fileName: string | null;
-};
-
 type DrawerUISlice = {
   triggerValidate: boolean;
   toggleValidate: () => void;
@@ -29,12 +18,6 @@ type DrawerUISlice = {
   setExpandedDrawerContent: (content: ReactNode) => void;
   isNextStep: boolean;
   setIsNextStep: (v: boolean) => void;
-  verifyUniformityResult: VerifyUniformityResponse | null;
-  setVerifyUniformityResult: (result: VerifyUniformityResponse | null) => void;
-  uniformityStep: 'preview' | 'result';
-  setUniformityStep: (step: 'preview' | 'result') => void;
-  uniformityFormData: UniformityFormData | null;
-  setUniformityFormData: (data: UniformityFormData | null) => void;
 };
 
 export type UIStore = MainUiSlice & DrawerUISlice;