fix(FE): fixing table flickering when input form value

src/components/pages/marketing/form/MarketingForm.tsx

@@ -24,7 +24,10 @@ import { CustomerApi } from '@/services/api/master-data';
 import { useFormik } from 'formik';
 import { SalesOrderFormValues, SalesOrderSchema } from './MarketingForm.schema';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { SalesOrderApi } from '@/services/api/marketing/marketing';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
 import { SalesOrderProductFormValues } from './repeater/sales-order/SalesOrderProduct.schema';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
@@ -180,16 +183,17 @@ const SalesForm = ({
   const deleteMarketingHandler = async () => {
     setIsLoading(true);
     console.log(initialValues?.id);
-    const deleteMarketingRes = await SalesOrderApi.delete(
+    const deleteMarketingRes = await MarketingApi.delete(
       initialValues?.id as number
     );
     if (isResponseSuccess(deleteMarketingRes)) {
       console.log(deleteMarketingRes);
+      toast.success(deleteMarketingRes?.message as string);
     }
     if (isResponseError(deleteMarketingRes)) {
       console.log(deleteMarketingRes);
+      toast.error(deleteMarketingRes?.message as string);
     }
-    toast.success('Successfully deleted Sales Order!');
     setIsLoading(false);
     deleteModal.closeModal();
     router.push('/marketing/sales-orders');
@@ -249,6 +253,8 @@ const SalesForm = ({
     [formik]
   );
 
+  const memoSalesOrder = formik.values.sales_order;
+
   return (
     <>
       <form
@@ -301,7 +307,7 @@ const SalesForm = ({
           <div className='text-green-500'>{JSON.stringify(formik.values)}</div>
           <div className='text-red-500'>{JSON.stringify(formik.errors)}</div> */}
           <SalesOrderProductTable
-            data={formik.values.sales_order}
+            data={memoSalesOrder}
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             selectedRowIds={selectedRowIds}

src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx

@@ -10,7 +10,7 @@ import {
   formatVechicleNumber,
 } from '@/lib/helper';
 import { Icon } from '@iconify/react';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import * as TanStack from '@tanstack/react-table';
 import CheckboxInput from '@/components/input/CheckboxInput';
 
@@ -35,6 +35,9 @@ const SalesOrderProductTable = ({
   onBulkDelete,
   onAddProductClick,
 }: SalesOrderProductTableProps) => {
+  const onDeleteRef = useRef(onDelete);
+  onDeleteRef.current = onDelete;
+
   const columns = useMemo(
     () => [
       {
@@ -114,9 +117,9 @@ const SalesOrderProductTable = ({
             <Button
               color='error'
               className='p-1'
-              onClick={() => {
-                onDelete(props.row.original.id as number);
-              }}
+              onClick={() =>
+                onDeleteRef.current(props.row.original.id as number)
+              }
               type='button'
             >
               <Icon icon='mdi:trash' width={16} height={16} />
@@ -125,7 +128,7 @@ const SalesOrderProductTable = ({
         ),
       },
     ],
-    [onDelete]
+    []
   );
 
   return (