refine code

client/src/components/advancedSearch/Condition.tsx

@@ -76,51 +76,35 @@ const Condition: FC<ConditionProps> = props => {
 
     const type = conditionField?.type;
     const isIn = operator === 'in';
+    let isLegal = false;
 
     switch (type) {
       case 'int':
-        setIsValueLegal(
-          isIn
-            ? regIntInterval.test(conditionValue)
-            : regInt.test(conditionValue)
-        );
+        isLegal = isIn
+          ? regIntInterval.test(conditionValue)
+          : regInt.test(conditionValue);
         break;
       case 'float':
-        setIsValueLegal(
-          isIn
-            ? regFloatInterval.test(conditionValue)
-            : regFloat.test(conditionValue)
-        );
+        isLegal = isIn
+          ? regFloatInterval.test(conditionValue)
+          : regFloat.test(conditionValue);
         break;
       default:
-        setIsValueLegal(false);
+        isLegal = false;
         break;
     }
-
+    setIsValueLegal(isLegal);
     triggerChange(id, {
       field: conditionField,
       op: operator,
       value: conditionValue,
-      isCorrect: isValuelegal,
+      isCorrect: isLegal,
       id,
     });
-    // No need of 'id', 'isValuelegal', and 'triggerChange'.
+    // No need for 'id' and 'triggerChange'.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [conditionField, operator, conditionValue]);
 
-  // Trigger change event if isValuelegal changed.
-  useEffect(() => {
-    triggerChange(id, {
-      field: conditionField,
-      op: operator,
-      value: conditionValue,
-      isCorrect: isValuelegal,
-      id,
-    });
-    // No need of 'id', 'isValuelegal', and 'triggerChange'.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isValuelegal]);
-
   const classes = useStyles();
 
   // Logic operator input change.
@@ -197,7 +181,6 @@ const useStyles = makeStyles((theme: Theme) =>
       minWidth: '466px',
       minHeight: '62px',
       background: '#FFFFFF',
-      // borderRadius: '8px',
       padding: '12px 16px',
       display: 'flex',
       flexDirection: 'row',

client/src/components/advancedSearch/Filter.tsx

@@ -33,7 +33,8 @@ const Filter = function Filter(props: FilterProps) {
 
   useEffect(() => {
     setInitConditions(flatConditions);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // Only need set init conditions after first mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Check all conditions are all correct.
@@ -108,7 +109,11 @@ const Filter = function Filter(props: FilterProps) {
     const formerConditons = [...flatConditions];
     const newConditions = formerConditons.reduce((prev, item) => {
       if (item.id === targetId) {
-        return [...prev, item, { id: generateIdByHash('break'), type: 'break' }];
+        return [
+          ...prev,
+          item,
+          { id: generateIdByHash('break'), type: 'break' },
+        ];
       }
       return [...prev, item];
     }, []);
@@ -180,10 +185,7 @@ const Filter = function Filter(props: FilterProps) {
    * @param id Specify one item that will be updated.
    * @param data Data that will be updated to condition.
    */
-  const updateConditionData = (
-    id: string,
-    data: ConditionData
-  ) => {
+  const updateConditionData = (id: string, data: ConditionData) => {
     const formerFlatConditions = flatConditions.map(i => {
       if (i.id === id) return { ...i, data };
       return i;