From e5318fd6b5efd32287f7081f3b5b6a25009a342d Mon Sep 17 00:00:00 2001 From: randy-ar Date: Thu, 13 Nov 2025 11:18:11 +0700 Subject: [PATCH] refactor(FE-238-86): change useApprovalSteps params, and minimize fetching data --- src/components/pages/ApprovalSteps.tsx | 64 ++++++------------- .../production/chickin/form/ChickinForm.tsx | 4 +- .../project-flock/form/ProjectFlockForm.tsx | 5 +- src/config/approval-line.ts | 11 ++++ src/config/constant.ts | 46 ------------- src/types/api/api-general.d.ts | 4 -- src/types/config/constant.d.ts | 14 ---- 7 files changed, 37 insertions(+), 111 deletions(-) diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx index 18d7fcfe..a56a85c8 100644 --- a/src/components/pages/ApprovalSteps.tsx +++ b/src/components/pages/ApprovalSteps.tsx @@ -8,9 +8,8 @@ import { BaseApiResponse, BaseApproval, BaseGroupedApproval, - ModuleWithApproval, } from '@/types/api/api-general'; -import { AppConfigData, ApprovalLine } from '@/types/config/constant'; +import { ApprovalLine } from '@/types/config/constant'; import useSWR from 'swr'; import { httpClientFetcher } from '@/services/http/client'; import { isResponseSuccess } from '@/lib/api-helper'; @@ -238,13 +237,15 @@ const isGroupedApprovalData = ( ); }; -const useApprovalSteps = ({ - moduleUrl, +const useApprovalSteps = ({ + latestApproval, + approvalLines, moduleName, moduleId, params, }: { - moduleUrl: string; + latestApproval: BaseApproval | undefined; + approvalLines: ApprovalLine; moduleName: string; moduleId: string; params?: { @@ -254,26 +255,20 @@ const useApprovalSteps = ({ group_step_number?: boolean; }; }) => { + // Membuat URL Parameters const paramString = new URLSearchParams({ page: params?.page?.toString() || '', limit: params?.limit?.toString() || '', search: params?.search || '', }).toString(); - const SWR_KEY_CONSTANTS = '/constants'; + + // fetching data approvals const SWR_KEY_APPROVALS = moduleName && moduleId ? `/approvals?module_name=${moduleName}&module_id=${moduleId}${ params ? `&${paramString}` : '' }` : null; - const SWR_KEY_CURRENT_DATA = moduleUrl; - - const { data: constData, isLoading: constIsLoading } = useSWR( - SWR_KEY_CONSTANTS, - async (url) => { - return await httpClientFetcher(url); - } - ); const { data: approvalData, @@ -285,30 +280,12 @@ const useApprovalSteps = ({ >(url); }); - const { - data: currentData, - isLoading: currentIsLoading, - mutate: mutateCurrentData, - } = useSWR(SWR_KEY_CURRENT_DATA, async (url) => { - return await httpClientFetcher>(url); - }); - // Fungsi Refresh const refresh = useCallback(async () => { - await Promise.all([mutateApprovals(), mutateCurrentData()]); - }, [mutateApprovals, mutateCurrentData]); - - const { approvalLine, groupedApprovals, latestApproval } = useMemo(() => { - const line = constData - ? (constData.approval_workflows.find((approval) => { - return approval.key === moduleName; - })?.steps ?? []) - : []; - - const latest = isResponseSuccess(currentData) - ? currentData.data?.approval - : undefined; + await mutateApprovals(); + }, [mutateApprovals]); + const { groupedApprovals } = useMemo(() => { const rawData = isResponseSuccess(approvalData) ? approvalData.data : undefined; @@ -326,30 +303,30 @@ const useApprovalSteps = ({ } return { - approvalLine: line, groupedApprovals: processedGroupedApprovals, - latestApproval: latest, }; - }, [constData, approvalData, currentData, moduleName]); + }, [approvalData]); - const isLoading = constIsLoading || approvalIsLoading || currentIsLoading; + const isLoading = approvalIsLoading; + // Formatting Akhir const approvals = useMemo(() => { - if (isLoading || !approvalLine.length || !latestApproval) { + if (isLoading || !approvalLines.length || !latestApproval) { return []; } try { return formatGroupedApprovalsToApprovalSteps( - approvalLine, + approvalLines, groupedApprovals, - latestApproval as BaseApproval + latestApproval ); } catch (error) { console.warn('Gagal memformat approval steps:', error); return []; } - }, [isLoading, approvalLine, groupedApprovals, latestApproval]); + }, [isLoading, approvalLines, groupedApprovals, latestApproval]); + // Raw Data Approvals const rawDataApprovals = useMemo(() => { const rawData = isResponseSuccess(approvalData) ? approvalData.data @@ -381,7 +358,6 @@ const useApprovalSteps = ({ return { approvals, isLoading, - rawData: isResponseSuccess(currentData) ? currentData.data : undefined, rawDataApprovals: rawDataApprovals, refresh, }; diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx index 5bd23368..1ed33b2c 100644 --- a/src/components/pages/production/chickin/form/ChickinForm.tsx +++ b/src/components/pages/production/chickin/form/ChickinForm.tsx @@ -13,6 +13,7 @@ import { useState } from 'react'; import ApprovalSteps, { useApprovalSteps, } from '@/components/pages/ApprovalSteps'; +import { PROJECT_FLOCK_KANDANG_APPROVAL_LINE } from '@/config/approval-line'; const ChickinFormKandang = ({ formType = 'add', initialValues, @@ -29,7 +30,8 @@ const ChickinFormKandang = ({ isLoading: approvalsLoading, refresh: refreshApprovals, } = useApprovalSteps({ - moduleUrl: `/production/project-flock-kandangs/${initialValues?.id}`, + latestApproval: initialValues?.approval, + approvalLines: PROJECT_FLOCK_KANDANG_APPROVAL_LINE, moduleName: 'PROJECT_FLOCK_KANDANGS', moduleId: initialValues?.id.toString() ?? '', }); diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx index e78e2279..ce3c1dce 100644 --- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx +++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx @@ -41,6 +41,7 @@ import ProjectFlockKandangTable from './ProjectFlockKandangTable'; import ApprovalSteps, { useApprovalSteps, } from '@/components/pages/ApprovalSteps'; +import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line'; interface ProjectFlockFormProps { formType?: 'add' | 'edit' | 'detail'; @@ -150,11 +151,11 @@ const ProjectFlockForm = ({ const { approvals, isLoading: approvalsLoading, - rawData: rawApprovals, rawDataApprovals: rawDataApprovals, refresh: refreshApprovals, } = useApprovalSteps({ - moduleUrl: `/production/project-flocks/${initialValues?.id}`, + latestApproval: initialValues?.approval, + approvalLines: PROJECT_FLOCK_APPROVAL_LINE, moduleName: 'PROJECT_FLOCKS', moduleId: initialValues?.id.toString() ?? '', }); diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts index 0a02d1f1..1ef0e1c3 100644 --- a/src/config/approval-line.ts +++ b/src/config/approval-line.ts @@ -10,3 +10,14 @@ export const PROJECT_FLOCK_APPROVAL_LINE: ApprovalLine = [ step_name: 'Aktif', }, ] as const; + +export const PROJECT_FLOCK_KANDANG_APPROVAL_LINE: ApprovalLine = [ + { + step_number: 1, + step_name: 'Pengajuan', + }, + { + step_number: 2, + step_name: 'Disetujui', + }, +] as const; diff --git a/src/config/constant.ts b/src/config/constant.ts index 7e730635..933ba2ab 100644 --- a/src/config/constant.ts +++ b/src/config/constant.ts @@ -231,49 +231,3 @@ export const RECORDING_FLAG_OPTIONS = [ { label: 'Ayam Culling', value: 'Ayam Culling' }, { label: 'Ayam Mati', value: 'Ayam Mati' }, ]; - -export const APPROVAL_WORKFLOWS = [ - { - key: 'PROJECT_FLOCKS', - steps: [ - { - step_number: 1, - step_name: 'Pengajuan', - }, - { - step_number: 2, - step_name: 'Aktif', - }, - ], - }, - { - key: 'PROJECT_FLOCK_KANDANGS', - steps: [ - { - step_number: 1, - step_name: 'Pengajuan', - }, - { - step_number: 2, - step_name: 'Disetujui', - }, - ], - }, - { - key: 'RECORDINGS', - steps: [ - { - step_number: 1, - step_name: 'Grading-Telur', - }, - { - step_number: 2, - step_name: 'Pengajuan', - }, - { - step_number: 3, - step_name: 'Disetujui', - }, - ], - }, -]; diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts index f9e35512..5b9f04e3 100644 --- a/src/types/api/api-general.d.ts +++ b/src/types/api/api-general.d.ts @@ -113,10 +113,6 @@ export type BaseGroupedApproval = { approvals: BaseApproval[]; }; -interface ModuleWithApproval { - approval?: BaseApproval; -} - export type Approvals = BaseApiResponse; export type GroupedApprovals = BaseApiResponse; diff --git a/src/types/config/constant.d.ts b/src/types/config/constant.d.ts index eeb0d7f6..3e4371be 100644 --- a/src/types/config/constant.d.ts +++ b/src/types/config/constant.d.ts @@ -2,17 +2,3 @@ export type ApprovalLine = { step_number: number; step_name: string; }[]; - -export interface ApprovalWorkflow { - key: string; - steps: ApprovalLine; -} - -export interface AppConfigData { - approval_workflows: ApprovalWorkflow[]; - flags: string[]; - warehouse_types: string[]; - stock_log: string; - supplier_categories: string[]; - customer_supplier_types: string[]; -}