refactor(FE): Refactor tab actions into a memoized component

2026-05-20 21:41:57 +00:00 · 2026-03-05 11:40:32 +07:00
parent 94ab48d3f6
commit 96ef6f8496
1 changed files with 139 additions and 116 deletions
@@ -1,6 +1,12 @@
 'use client';

-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
@@ -68,37 +74,10 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

+  const handleFilterModalOpenRef = useRef(() => {});
+
  const filterModal = useModal();

-  // ===== OPTIONS =====
-  const {
-    setInputValue: setLocationInputValue,
-    options: locationOptions,
-    isLoadingOptions: isLoadingLocations,
-    loadMore: loadMoreLocations,
-  } = useSelect<Kandang>(LocationApi.basePath, 'id', 'name', 'search');
-
-  const {
-    setInputValue: setSupplierInputValue,
-    options: supplierOptions,
-    isLoadingOptions: isLoadingSuppliers,
-    loadMore: loadMoreSuppliers,
-  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
-
-  const {
-    setInputValue: setKandangInputValue,
-    options: kandangOptions,
-    isLoadingOptions: isLoadingKandangs,
-    loadMore: loadMoreKandangs,
-  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name', 'search');
-
-  const {
-    setInputValue: setNonstockInputValue,
-    options: nonstockOptions,
-    isLoadingOptions: isLoadingNonstocks,
-    loadMore: loadMoreNonstocks,
-  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name', 'search');
-
  const categoryOptions = useMemo(
    () => [
      { value: 'BOP', label: 'BOP' },
@@ -149,6 +128,48 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
    },
  });

+  handleFilterModalOpenRef.current = () => {
+    filterModal.openModal();
+    formik.validateForm();
+  };
+
+  // ===== OPTIONS =====
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+  } = useSelect<Kandang>(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangs,
+    loadMore: loadMoreKandangs,
+  } = useSelect<Kandang>(
+    KandangApi.basePath,
+    'id',
+    'name',
+    'search',
+    formik.values.location_id?.value
+      ? { location_id: String(formik.values.location_id.value) }
+      : undefined
+  );
+
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstocks,
+    loadMore: loadMoreNonstocks,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name', 'search');
+
  // ===== FILTER VALUES =====
  const locationValue = useMemo(
    () => formik.values.location_id,
@@ -268,13 +289,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
        return;
      }

-      const pdfParams = {
-        location_name: locationValue?.label,
-        supplier_name: supplierValue?.label,
-        realization_date: formik.values.realization_date || undefined,
-      };
-
-      await generateReportExpensePDF(allData, pdfParams);
+      await generateReportExpensePDF(allData);

      toast.success('PDF berhasil dibuat dan diunduh.');
    } catch {
@@ -282,98 +297,105 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
    } finally {
      setIsPdfExportLoading(false);
    }
-  }, [
-    reportExpenseExport,
-    locationValue,
-    supplierValue,
-    kandangValue,
-    nonstockValue,
-    categoryValue,
-    formik.values.realization_date,
-  ]);
+  }, [reportExpenseExport]);

-  // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+  // ===== TAB ACTIONS COMPONENT =====
+  const TabActions = useMemo(() => {
+    return function TabActionsComponent() {
+      const setTabActions = useTabActionsStore((state) => state.setTabActions);
+      const clearTabActions = useTabActionsStore(
+        (state) => state.clearTabActions
+      );

-  useEffect(() => {
-    setTabActions(
-      tabId,
-      <div className='flex flex-row gap-3'>
-        <ButtonFilter
-          values={formik.values}
-          onClick={() => filterModal.openModal()}
-          variant='outline'
-          className='px-3 py-2.5'
-        />
-
-        <Dropdown
-          align='end'
-          direction='bottom'
-          className={{
-            content:
-              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-          }}
-          trigger={
-            <Button
+      useEffect(() => {
+        setTabActions(
+          tabId,
+          <div className='flex flex-row gap-3'>
+            <ButtonFilter
+              values={filterParams}
+              onClick={() => handleFilterModalOpenRef.current()}
              variant='outline'
-              color='none'
-              isLoading={isAnyExportLoading}
-              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+              className='px-3 py-2.5'
+            />
+
+            <Dropdown
+              align='end'
+              direction='bottom'
+              className={{
+                content:
+                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+              }}
+              trigger={
+                <Button
+                  variant='outline'
+                  color='none'
+                  isLoading={isAnyExportLoading}
+                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                >
+                  <div className='flex flex-row items-center gap-1.5'>
+                    <Icon
+                      icon='heroicons:cloud-arrow-down'
+                      width={20}
+                      height={20}
+                    />
+
+                    <span>Export</span>
+
+                    <div className='w-px self-stretch bg-base-content/10' />
+
+                    <Icon
+                      icon='heroicons:chevron-down'
+                      width={14}
+                      height={14}
+                    />
+                  </div>
+                </Button>
+              }
            >
-              <div className='flex flex-row items-center gap-1.5'>
-                <Icon
-                  icon='heroicons:cloud-arrow-down'
-                  width={20}
-                  height={20}
-                />
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={handleExportExcel}
+                isLoading={isExcelExportLoading}
+                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+              >
+                <Icon icon='heroicons:table-cells' width={20} height={20} />
+                Export to Excel
+              </Button>
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={handleExportPDF}
+                isLoading={isPdfExportLoading}
+                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+              >
+                <Icon icon='heroicons:document' width={20} height={20} />
+                Export to PDF
+              </Button>
+            </Dropdown>
+          </div>
+        );
+      }, [setTabActions]);

-                <span>Export</span>
+      useEffect(() => {
+        return () => {
+          clearTabActions(tabId);
+        };
+      }, [clearTabActions]);

-                <div className='w-px self-stretch bg-base-content/10' />
-
-                <Icon icon='heroicons:chevron-down' width={14} height={14} />
-              </div>
-            </Button>
-          }
-        >
-          <Button
-            variant='ghost'
-            color='none'
-            onClick={handleExportExcel}
-            isLoading={isExcelExportLoading}
-            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-          >
-            <Icon icon='heroicons:table-cells' width={20} height={20} />
-            Export to Excel
-          </Button>
-          <Button
-            variant='ghost'
-            color='none'
-            onClick={handleExportPDF}
-            isLoading={isPdfExportLoading}
-            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-          >
-            <Icon icon='heroicons:document' width={20} height={20} />
-            Export to PDF
-          </Button>
-        </Dropdown>
-      </div>
-    );
+      return null;
+    };
  }, [
    tabId,
-    formik.values,
+    filterParams,
    isAnyExportLoading,
    handleExportExcel,
    handleExportPDF,
-    setTabActions,
+    isExcelExportLoading,
+    isPdfExportLoading,
  ]);

-  useEffect(() => {
-    return () => {
-      clearTabActions(tabId);
-    };
-  }, [tabId, clearTabActions]);
+  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);

  // ===== TABLE COLUMNS DEFINITION =====
  const columns = useMemo((): ColumnDef<ReportExpense>[] => {
@@ -505,6 +527,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {

  return (
    <>
+      {TabActionsElement}
      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
        {!isSubmitted ? (
          <ReportExpenseSkeleton