refactor(FE-238-86): change useApprovalSteps params, and minimize fetching data

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 = <T extends ModuleWithApproval>({
+const useApprovalSteps = ({
-  moduleUrl,
+  latestApproval,
+  approvalLines,
   moduleName,
   moduleId,
   params,
 }: {
-  moduleUrl: string;
+  latestApproval: BaseApproval | undefined;
+  approvalLines: ApprovalLine;
   moduleName: string;
   moduleId: string;
   params?: {
@@ -254,26 +255,20 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     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<AppConfigData>(url);
-    }
-  );
 
   const {
     data: approvalData,
@@ -285,30 +280,12 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     >(url);
   });
 
-  const {
-    data: currentData,
-    isLoading: currentIsLoading,
-    mutate: mutateCurrentData,
-  } = useSWR(SWR_KEY_CURRENT_DATA, async (url) => {
-    return await httpClientFetcher<BaseApiResponse<T>>(url);
-  });
-
   // Fungsi Refresh
   const refresh = useCallback(async () => {
-    await Promise.all([mutateApprovals(), mutateCurrentData()]);
+    await mutateApprovals();
-  }, [mutateApprovals, mutateCurrentData]);
+  }, [mutateApprovals]);
-
-  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;
 
+  const { groupedApprovals } = useMemo(() => {
     const rawData = isResponseSuccess(approvalData)
       ? approvalData.data
       : undefined;
@@ -326,30 +303,30 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     }
 
     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 = <T extends ModuleWithApproval>({
   return {
     approvals,
     isLoading,
-    rawData: isResponseSuccess(currentData) ? currentData.data : undefined,
     rawDataApprovals: rawDataApprovals,
     refresh,
   };

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() ?? '',
   });

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() ?? '',
   });

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;

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',
-      },
-    ],
-  },
-];

src/types/api/api-general.d.ts

@@ -113,10 +113,6 @@ export type BaseGroupedApproval = {
   approvals: BaseApproval[];
 };
 
-interface ModuleWithApproval {
-  approval?: BaseApproval;
-}
-
 export type Approvals = BaseApiResponse<BaseApproval>;
 
 export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;

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[];
-}