completes functionality for adding / removing conditions in WhereBuilder

src/client/components/elements/WhereBuilder/Condition/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import ReactSelect from '../../ReactSelect';
 import Button from '../../Button';
@@ -11,24 +11,33 @@ const baseClass = 'condition';
 const Condition = (props) => {
   const {
     fields,
-    operators,
-    handleChange,
+    dispatch,
     value,
+    orIndex,
+    andIndex,
   } = props;
 
+  const [activeOperators, setActiveOperators] = useState([]);
+
+  useEffect(() => {
+
+  }, [value]);
+
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__wrap`}>
         <div className={`${baseClass}__inputs`}>
           <div className={`${baseClass}__field`}>
             <ReactSelect
+              value={value.field}
               options={fields}
               onChange={newField => console.log('changing field', newField)}
             />
           </div>
           <div className={`${baseClass}__operator`}>
             <ReactSelect
-              options={operators}
+              value={value.field}
+              options={activeOperators}
               onChange={() => console.log('changing')}
             />
           </div>
@@ -49,13 +58,26 @@ const Condition = (props) => {
             icon="x"
             round
             buttonStyle="icon-label"
-            onClick={() => console.log('remove')}
+            onClick={() => dispatch({
+              type: 'remove',
+              payload: {
+                orIndex,
+                andIndex,
+              },
+            })}
           />
           <Button
             icon="plus"
             round
             buttonStyle="icon-label"
-            onClick={() => console.log('add')}
+            onClick={() => dispatch({
+              type: 'add',
+              payload: {
+                relation: 'and',
+                orIndex,
+                andIndex: andIndex + 1,
+              },
+            })}
           />
         </div>
       </div>
@@ -71,7 +93,17 @@ Condition.propTypes = {
       type: PropTypes.string,
     }),
   ).isRequired,
-  handleChange: PropTypes.func.isRequired,
+  value: PropTypes.shape({
+    field: PropTypes.string,
+    operator: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+  }).isRequired,
+  dispatch: PropTypes.func.isRequired,
+  orIndex: PropTypes.number.isRequired,
+  andIndex: PropTypes.number.isRequired,
 };
 
 export default Condition;

src/client/components/elements/WhereBuilder/index.js

@@ -89,6 +89,14 @@ const WhereBuilder = (props) => {
               );
             })}
           </ul>
+          <Button
+            icon="plus"
+            buttonStyle="icon-label"
+            iconPosition="left"
+            onClick={() => dispatchWhere({ type: 'add' })}
+          >
+            Or
+          </Button>
         </>
       )}
       {where.length === 0 && (
@@ -98,7 +106,7 @@ const WhereBuilder = (props) => {
             icon="plus"
             buttonStyle="icon-label"
             iconPosition="left"
-            onClick={() => dispatchWhere({ type: 'add', payload: { condition: [{}] } })}
+            onClick={() => dispatchWhere({ type: 'add' })}
           >
             Add filter
           </Button>

src/client/components/elements/WhereBuilder/reducer.js

@@ -1,20 +1,35 @@
-const reducer = (state, { type, payload }) => {
+const reducer = (state, {
+  type, payload: {
+    relation, orIndex, andIndex,
+  } = {},
+}) => {
+  const newState = [...state];
+
   switch (type) {
     case 'add': {
+      if (relation === 'and') {
+        newState[orIndex].splice(andIndex, 0, {});
+        return newState;
+      }
+
       return [
-        ...state,
-        payload.condition,
+        ...newState,
+        [{}],
       ];
     }
 
     case 'remove': {
-      const newState = [...state];
-      newState.splice(payload.index);
+      newState[orIndex].splice(andIndex, 1);
+
+      if (newState[orIndex].length === 0) {
+        newState.splice(orIndex, 1);
+      }
+
       return newState;
     }
 
     default: {
-      return state;
+      return newState;
     }
   }
 };