From 45d65024dbc26e9485552125c4a9df605d8420d2 Mon Sep 17 00:00:00 2001 From: rstubryan Date: Sat, 27 Dec 2025 21:51:13 +0700 Subject: [PATCH] refactor(FE-316): Extract uniformity state into separate store --- .../pages/uniformity/form/UniformityForm.tsx | 12 +++-- .../uniformity/form/UniformityPreviewForm.tsx | 7 ++- .../uniformity/form/UniformityResultForm.tsx | 11 ++-- src/stores/ui/slices/drawer.slice.ts | 10 ---- src/stores/uniformity/uniformity.store.ts | 54 +++++++++++++++++++ src/types/stores.d.ts | 17 ------ 6 files changed, 74 insertions(+), 37 deletions(-) create mode 100644 src/stores/uniformity/uniformity.store.ts diff --git a/src/components/pages/uniformity/form/UniformityForm.tsx b/src/components/pages/uniformity/form/UniformityForm.tsx index 59521018..40587e6f 100644 --- a/src/components/pages/uniformity/form/UniformityForm.tsx +++ b/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 uniformityStep = useUiStore((s) => s.uniformityStep); - const setUniformityStep = useUiStore((s) => s.setUniformityStep); + const setUniformityFormData = useUniformityStore( + (s) => s.setUniformityFormData + ); + const uniformityStep = useUniformityStore((s) => s.uniformityStep); + const setUniformityStep = useUniformityStore((s) => s.setUniformityStep); const [uniformityFormErrorMessage, setUniformityFormErrorMessage] = useState(''); diff --git a/src/components/pages/uniformity/form/UniformityPreviewForm.tsx b/src/components/pages/uniformity/form/UniformityPreviewForm.tsx index ff526bc0..e8258ba2 100644 --- a/src/components/pages/uniformity/form/UniformityPreviewForm.tsx +++ b/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 verifyUniformityResult = useUiStore((s) => s.verifyUniformityResult); + const setUniformityStep = useUniformityStore((s) => s.setUniformityStep); + const verifyUniformityResult = useUniformityStore( + (s) => s.verifyUniformityResult + ); const handleClose = () => { setExpandedDrawerOpen(false); diff --git a/src/components/pages/uniformity/form/UniformityResultForm.tsx b/src/components/pages/uniformity/form/UniformityResultForm.tsx index c0137e37..153db04d 100644 --- a/src/components/pages/uniformity/form/UniformityResultForm.tsx +++ b/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 verifyUniformityResult = useUiStore((s) => s.verifyUniformityResult); - const setVerifyUniformityResult = useUiStore( + const setUniformityStep = useUniformityStore((s) => s.setUniformityStep); + const verifyUniformityResult = useUniformityStore( + (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); diff --git a/src/stores/ui/slices/drawer.slice.ts b/src/stores/ui/slices/drawer.slice.ts index 4e93dea9..382eaff2 100644 --- a/src/stores/ui/slices/drawer.slice.ts +++ b/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 }), }); diff --git a/src/stores/uniformity/uniformity.store.ts b/src/stores/uniformity/uniformity.store.ts new file mode 100644 index 00000000..914f398e --- /dev/null +++ b/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()( + 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', + } + ) +); diff --git a/src/types/stores.d.ts b/src/types/stores.d.ts index ddf94844..7bfa63cd 100644 --- a/src/types/stores.d.ts +++ b/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;