diff --git a/src/app/production/project-flock/layout.tsx b/src/app/production/project-flock/layout.tsx index 6bf27a41..bc50b862 100644 --- a/src/app/production/project-flock/layout.tsx +++ b/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(); }; diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx index d7a12951..01157c6f 100644 --- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx +++ b/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(); diff --git a/src/stores/ui/slices/production/project-flock.slice.ts b/src/stores/ui/slices/drawer.slice.ts similarity index 56% rename from src/stores/ui/slices/production/project-flock.slice.ts rename to src/stores/ui/slices/drawer.slice.ts index 4ecd1329..b92b60c3 100644 --- a/src/stores/ui/slices/production/project-flock.slice.ts +++ b/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()( - devtools( - (...args) => ({ - ...createProjectFlockUiSlice(...args), - }), - { - name: 'ProjectFlockUiStore', - } - ) -); diff --git a/src/stores/ui/ui.store.ts b/src/stores/ui/ui.store.ts index 49554bc9..cbc5785d 100644 --- a/src/stores/ui/ui.store.ts +++ b/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()( devtools( (...args) => ({ ...createMainUiSlice(...args), + ...createDrawerUISlice(...args), }), { name: 'UIStore', diff --git a/src/types/stores.d.ts b/src/types/stores.d.ts index 1a3046ae..37b252fe 100644 --- a/src/types/stores.d.ts +++ b/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;