From 1b0210a55ea99d5d31b432559fec46dc6b31c669 Mon Sep 17 00:00:00 2001
From: caichi <caichi0424@gmail.com>
Date: Fri, 29 Nov 2024 17:56:04 +0900
Subject: [PATCH] fix: metadata update logic

---
 .../Common/MultiValueField/index.tsx          |  2 +-
 .../Form/fields/FieldComponents/BoolField.tsx |  7 +--
 .../fields/FieldComponents/CheckboxField.tsx  |  7 +--
 .../Form/fields/FieldComponents/DateField.tsx | 12 +---
 .../Form/fields/FieldComponents/TagField.tsx  |  6 +-
 .../molecules/Content/Form/index.tsx          | 59 +++++++++++++------
 6 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/web/src/components/molecules/Common/MultiValueField/index.tsx b/web/src/components/molecules/Common/MultiValueField/index.tsx
index 43de23d37f..221601bcb7 100644
--- a/web/src/components/molecules/Common/MultiValueField/index.tsx
+++ b/web/src/components/molecules/Common/MultiValueField/index.tsx
@@ -115,7 +115,7 @@ const MultiValueField: React.FC<Props> = ({
           type="primary"
           onClick={() => {
             const currentValues = value || [];
-            const defaultValue = props.type === "date" ? dayjs() : "";
+            const defaultValue = "";
             if (Array.isArray(currentValues)) {
               onChange?.([...currentValues, defaultValue]);
             } else {
diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx
index a83cd8935a..ca45186442 100644
--- a/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx
+++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx
@@ -8,11 +8,10 @@ import FieldTitle from "../../FieldTitle";
 type BoolFieldProps = {
   field: Field;
   itemGroupId?: string;
-  onMetaUpdate?: () => void;
   disabled: boolean;
 };
 
-const BoolField: React.FC<BoolFieldProps> = ({ field, itemGroupId, onMetaUpdate, disabled }) => {
+const BoolField: React.FC<BoolFieldProps> = ({ field, itemGroupId, disabled }) => {
   return (
     <Form.Item
       extra={field.description}
@@ -20,9 +19,9 @@ const BoolField: React.FC<BoolFieldProps> = ({ field, itemGroupId, onMetaUpdate,
       valuePropName="checked"
       label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />}>
       {field.multiple ? (
-        <MultiValueBooleanField onChange={onMetaUpdate} FieldInput={Switch} disabled={disabled} />
+        <MultiValueBooleanField FieldInput={Switch} disabled={disabled} />
       ) : (
-        <Switch onChange={onMetaUpdate} disabled={disabled} />
+        <Switch disabled={disabled} />
       )}
     </Form.Item>
   );
diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx
index d3f2bbf9d1..e2d97b1531 100644
--- a/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx
+++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx
@@ -7,11 +7,10 @@ import FieldTitle from "../../FieldTitle";
 
 type CheckboxFieldProps = {
   field: Field;
-  onMetaUpdate?: () => void;
   disabled: boolean;
 };
 
-const CheckboxField: React.FC<CheckboxFieldProps> = ({ field, onMetaUpdate, disabled }) => {
+const CheckboxField: React.FC<CheckboxFieldProps> = ({ field, disabled }) => {
   return (
     <Form.Item
       extra={field.description}
@@ -19,9 +18,9 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({ field, onMetaUpdate, disa
       valuePropName="checked"
       label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={false} />}>
       {field.multiple ? (
-        <MultiValueBooleanField onChange={onMetaUpdate} FieldInput={Checkbox} disabled={disabled} />
+        <MultiValueBooleanField FieldInput={Checkbox} disabled={disabled} />
       ) : (
-        <Checkbox onChange={onMetaUpdate} disabled={disabled} />
+        <Checkbox disabled={disabled} />
       )}
     </Form.Item>
   );
diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx
index ad45046135..328a886c17 100644
--- a/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx
+++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx
@@ -12,11 +12,10 @@ import { requiredValidator } from "../utils";
 type DateFieldProps = {
   field: Field;
   itemGroupId?: string;
-  onMetaUpdate?: () => void;
   disabled: boolean;
 };
 
-const DateField: React.FC<DateFieldProps> = ({ field, itemGroupId, onMetaUpdate, disabled }) => {
+const DateField: React.FC<DateFieldProps> = ({ field, itemGroupId, disabled }) => {
   const t = useT();
 
   return (
@@ -32,14 +31,9 @@ const DateField: React.FC<DateFieldProps> = ({ field, itemGroupId, onMetaUpdate,
       name={itemGroupId ? [field.id, itemGroupId] : field.id}
       label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />}>
       {field.multiple ? (
-        <MultiValueField
-          onChange={onMetaUpdate}
-          type="date"
-          FieldInput={StyledDatePicker}
-          disabled={disabled}
-        />
+        <MultiValueField type="date" FieldInput={StyledDatePicker} disabled={disabled} />
       ) : (
-        <StyledDatePicker onChange={onMetaUpdate} disabled={disabled} />
+        <StyledDatePicker disabled={disabled} />
       )}
     </Form.Item>
   );
diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx
index b0de42cce2..2a51babc23 100644
--- a/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx
+++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx
@@ -10,11 +10,10 @@ import FieldTitle from "../../FieldTitle";
 
 type TagFieldProps = {
   field: Field;
-  onMetaUpdate?: () => void;
   disabled: boolean;
 };
 
-const TagField: React.FC<TagFieldProps> = ({ field, onMetaUpdate, disabled }) => {
+const TagField: React.FC<TagFieldProps> = ({ field, disabled }) => {
   const t = useT();
 
   return (
@@ -30,7 +29,6 @@ const TagField: React.FC<TagFieldProps> = ({ field, onMetaUpdate, disabled }) =>
       label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={false} />}>
       {field.multiple ? (
         <StyledMultipleSelect
-          onChange={onMetaUpdate}
           mode="multiple"
           tagRender={props => <>{props.label}</>}
           allowClear
@@ -42,7 +40,7 @@ const TagField: React.FC<TagFieldProps> = ({ field, onMetaUpdate, disabled }) =>
           ))}
         </StyledMultipleSelect>
       ) : (
-        <Select onChange={onMetaUpdate} allowClear disabled={disabled}>
+        <Select allowClear disabled={disabled}>
           {field.typeProperty?.tags?.map((tag: { id: string; name: string; color: string }) => (
             <Select.Option key={tag.name} value={tag.id}>
               <TagWrapper>
diff --git a/web/src/components/molecules/Content/Form/index.tsx b/web/src/components/molecules/Content/Form/index.tsx
index ff7f7e2167..0d65ec2424 100644
--- a/web/src/components/molecules/Content/Form/index.tsx
+++ b/web/src/components/molecules/Content/Form/index.tsx
@@ -451,7 +451,6 @@ const ContentForm: React.FC<Props> = ({
   ]);
 
   const handleMetaUpdate = useCallback(async () => {
-    if (!itemId) return;
     try {
       const metaFields = await metaFieldsGet();
       await onMetaItemUpdate({
@@ -461,20 +460,48 @@ const ContentForm: React.FC<Props> = ({
     } catch (info) {
       console.log("Validate Failed:", info);
     }
-  }, [itemId, metaFieldsGet, onMetaItemUpdate, item?.metadata?.id]);
+  }, [metaFieldsGet, onMetaItemUpdate, item?.metadata?.id]);
 
-  const handleMetaValuesChange = useCallback(async () => {
-    if (itemId) return;
-    try {
-      await metaForm.validateFields();
-    } catch (e) {
-      if ((e as ValidateErrorEntity).errorFields.length > 0) {
-        setIsDisabled(true);
-        return;
+  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleMetaValuesChange = useCallback(
+    async (changedValues: Record<string, unknown>) => {
+      if (itemId) {
+        if (timeout.current) {
+          clearTimeout(timeout.current);
+          timeout.current = null;
+        }
+        const [key, value] = Object.entries(changedValues)[0];
+        const initialValue = initialMetaFormValues[key];
+        if (Array.isArray(value)) {
+          // use checkIfEmpty
+          const noEmptyValuesLength = value.filter(
+            v => !(v === undefined || v === null || v === ""),
+          ).length;
+          if (
+            noEmptyValuesLength === value.length ||
+            (noEmptyValuesLength && !initialValue) ||
+            (Array.isArray(initialValue) && noEmptyValuesLength !== initialValue.length)
+          ) {
+            timeout.current = setTimeout(handleMetaUpdate, 800);
+          }
+        } else if (value !== initialValue) {
+          timeout.current = setTimeout(handleMetaUpdate, 800);
+        }
+      } else {
+        try {
+          await metaForm.validateFields();
+        } catch (e) {
+          if ((e as ValidateErrorEntity).errorFields.length > 0) {
+            setIsDisabled(true);
+            return;
+          }
+        }
+        setIsDisabled(false);
       }
-    }
-    setIsDisabled(false);
-  }, [itemId, metaForm]);
+    },
+    [handleMetaUpdate, initialMetaFormValues, itemId, metaForm],
+  );
 
   const items: MenuProps["items"] = useMemo(() => {
     const menuItems = [
@@ -702,11 +729,7 @@ const ContentForm: React.FC<Props> = ({
             const FieldComponent = FIELD_TYPE_COMPONENT_MAP[field.type];
             return (
               <MetaFormItemWrapper key={field.id}>
-                <FieldComponent
-                  field={field}
-                  onMetaUpdate={handleMetaUpdate}
-                  disabled={fieldDisabled}
-                />
+                <FieldComponent field={field} disabled={fieldDisabled} />
               </MetaFormItemWrapper>
             );
           })}