remove onConditionChange

client/src/components/advancedSearch/Condition.tsx

@@ -8,7 +8,7 @@ import {
   MenuItem,
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
-import {ConditionProps, Field} from './Types';
+import { ConditionProps, Field } from './Types';
 
 // Todo: Move to corrsponding Constant file.
 // Static logical operators.
@@ -97,7 +97,7 @@ const Condition: FC<ConditionProps> = props => {
         break;
     }
 
-    triggerChange({
+    triggerChange(id, {
       field: conditionField,
       op: operator,
       value: conditionValue,
@@ -110,7 +110,7 @@ const Condition: FC<ConditionProps> = props => {
 
   // Trigger change event if isValuelegal changed.
   useEffect(() => {
-    triggerChange({
+    triggerChange(id, {
       field: conditionField,
       op: operator,
       value: conditionValue,

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -62,7 +62,7 @@ const ConditionGroup = (props: ConditionGroupProps) => {
     addCondition,
     removeCondition,
     changeBinaryLogicalOp,
-    onConditionChange,
+    updateConditionData,
   } = handleConditions;
 
   const classes = useStyles();
@@ -94,7 +94,7 @@ const ConditionGroup = (props: ConditionGroupProps) => {
               removeCondition(condition.id);
             }}
             fields={fields}
-            triggerChange={onConditionChange}
+            triggerChange={updateConditionData}
             initData={condition?.data}
             className={generateClassName(conditions, currentIndex)}
           />
@@ -138,7 +138,7 @@ const ConditionGroup = (props: ConditionGroupProps) => {
               removeCondition(condition.id);
             }}
             fields={fields}
-            triggerChange={onConditionChange}
+            triggerChange={updateConditionData}
             initData={condition?.data}
             className={generateClassName(conditions, currentIndex)}
           />

client/src/components/advancedSearch/Filter.tsx

@@ -9,7 +9,7 @@ import {
 } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import AdvancedDialog from './Dialog';
-import { FilterProps, Field } from './Types';
+import { FilterProps, ConditionData } from './Types';
 import { generateHashCode } from '../../utils/Common';
 
 const Filter = function Filter(props: FilterProps) {
@@ -127,7 +127,7 @@ const Filter = function Filter(props: FilterProps) {
    * Remove "OR" operator in specified position.
    * @param targetId Remove the break operator after the target one.
    */
-  const removeBreak = (targetId: string) => {
+  const removeOrOp = (targetId: string) => {
     setFilteredFlatConditions(flatConditions.filter(i => i.id !== targetId));
   };
   /**
@@ -176,17 +176,12 @@ const Filter = function Filter(props: FilterProps) {
    */
   const removeCondition = (targetId: string) => {
     setFilteredFlatConditions(flatConditions.filter(i => i.id !== targetId));
-    // flatConditions.reduce((prev, item, currentIndex) => {
-    //   if (item.id === targetId) {
-
-    //   }
-    // }, []);
   };
   const changeBinaryLogicalOp = (value: string, targetId: string) => {
     if (value === 'or') {
       addBreak(targetId);
     } else if (value === 'and') {
-      removeBreak(targetId);
+      removeOrOp(targetId);
     }
   };
   /**
@@ -196,7 +191,7 @@ const Filter = function Filter(props: FilterProps) {
    */
   const updateConditionData = (
     id: string,
-    data: { field: Field; op: string; value: string; isCorrect: boolean }
+    data: ConditionData
   ) => {
     const formerFlatConditions = flatConditions.map(i => {
       if (i.id === id) return { ...i, data };
@@ -204,11 +199,6 @@ const Filter = function Filter(props: FilterProps) {
     });
     setFilteredFlatConditions(formerFlatConditions);
   };
-  // Handle condition change.
-  const onConditionChange = (data: any) => {
-    const { field, op, value, isCorrect, id } = data;
-    updateConditionData(id, { field, op, value, isCorrect });
-  };
   // Reset conditions.
   const resetConditions = () => {
     setIsConditionsLegal(false);
@@ -229,12 +219,11 @@ const Filter = function Filter(props: FilterProps) {
 
   const handleConditions = {
     addBreak,
-    removeBreak,
+    removeOrOp,
     addCondition,
     removeCondition,
     changeBinaryLogicalOp,
     updateConditionData,
-    onConditionChange,
     resetConditions,
     getConditionsSum,
     setFilteredFlatConditions,

client/src/components/advancedSearch/Types.ts

@@ -3,7 +3,7 @@
 export interface ConditionProps {
   others?: object;
   onDelete: () => void;
-  triggerChange: (data: TriggerChangeData) => void;
+  triggerChange: (id: string, data: TriggerChangeData) => void;
   fields: Field[];
   id: string;
   initData: any;
@@ -73,3 +73,10 @@ export interface FilterProps {
   tooltipPlacement?: 'left' | 'right' | 'bottom' | 'top';
   fields: Field[];
 }
+
+export interface ConditionData {
+  field: Field;
+  op: string;
+  value: string;
+  isCorrect: boolean;
+}