allows for WhereBuilder condition values to be refilled

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

@@ -20,8 +20,12 @@ const Condition = (props) => {
   const [activeOperators, setActiveOperators] = useState([]);
 
   useEffect(() => {
+    const activeField = fields.find(field => value.field === field.value);
 
-  }, [value]);
+    if (activeField) {
+      setActiveOperators(activeField.operators);
+    }
+  }, [value, fields]);
 
   return (
     <div className={baseClass}>
@@ -29,20 +33,31 @@ const Condition = (props) => {
         <div className={`${baseClass}__inputs`}>
           <div className={`${baseClass}__field`}>
             <ReactSelect
-              value={value.field}
+              value={fields.find(field => value.field === field.value)}
               options={fields}
-              onChange={newField => console.log('changing field', newField)}
+              onChange={field => dispatch({
+                type: 'update',
+                orIndex,
+                andIndex,
+                field,
+              })}
             />
           </div>
           <div className={`${baseClass}__operator`}>
             <ReactSelect
-              value={value.field}
+              value={activeOperators.find(operator => value.operator === operator.value)}
               options={activeOperators}
-              onChange={() => console.log('changing')}
+              onChange={operator => dispatch({
+                type: 'update',
+                orIndex,
+                andIndex,
+                operator,
+              })}
             />
           </div>
           <div className={`${baseClass}__value`}>
             <ReactSelect
+              value={value.value}
               options={[
                 {
                   label: 'Option 1',
@@ -60,10 +75,8 @@ const Condition = (props) => {
             buttonStyle="icon-label"
             onClick={() => dispatch({
               type: 'remove',
-              payload: {
-                orIndex,
-                andIndex,
-              },
+              orIndex,
+              andIndex,
             })}
           />
           <Button
@@ -72,11 +85,9 @@ const Condition = (props) => {
             buttonStyle="icon-label"
             onClick={() => dispatch({
               type: 'add',
-              payload: {
-                relation: 'and',
-                orIndex,
-                andIndex: andIndex + 1,
-              },
+              relation: 'and',
+              orIndex,
+              andIndex: andIndex + 1,
             })}
           />
         </div>
@@ -89,8 +100,10 @@ Condition.propTypes = {
   fields: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string,
-      name: PropTypes.string,
-      type: PropTypes.string,
+      value: PropTypes.string,
+      operators: PropTypes.arrayOf(
+        PropTypes.shape({}),
+      ),
     }),
   ).isRequired,
   value: PropTypes.shape({

src/client/components/elements/WhereBuilder/field-types.js

@@ -1,12 +1,10 @@
-import { buildASTSchema } from 'graphql';
-
 const boolean = [
   {
-    label: 'Equals',
+    label: 'equals',
     value: 'equals',
   },
   {
-    label: 'Not Equals',
+    label: 'is not equal to',
     value: 'not-equals',
   },
 ];
@@ -14,11 +12,11 @@ const boolean = [
 const base = [
   ...boolean,
   {
-    label: 'In',
+    label: 'is in',
     value: 'in',
   },
   {
-    label: 'Not In',
+    label: 'is not in',
     value: 'not-in',
   },
 ];
@@ -26,26 +24,26 @@ const base = [
 const numeric = [
   ...base,
   {
-    label: 'Greater Than',
+    label: 'is greater Than',
     value: 'greater_than',
   },
   {
-    label: 'Less Than',
+    label: 'is less than',
     value: 'less_than',
   },
   {
-    label: 'Less Than Equals',
+    label: 'is less than or equal to',
     value: 'less_than_equals',
   },
   {
-    label: 'Greater Than Equals',
+    label: 'is greater than or equal to',
     value: 'greater_than_equals',
   },
 ];
 
 const like = {
-  label: 'like',
-  value: 'Like',
+  label: 'is like',
+  value: 'like',
 };
 
 const fieldTypeConditions = {
@@ -95,4 +93,4 @@ const fieldTypeConditions = {
   },
 };
 
-module.exports = fieldTypeConditions;
+export default fieldTypeConditions;

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

@@ -31,7 +31,7 @@ const WhereBuilder = (props) => {
           {
             label: field.label,
             value: field.name,
-            operators: fieldTypes[field.type],
+            ...fieldTypes[field.type],
           },
         ];
       }

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

@@ -1,9 +1,14 @@
-const reducer = (state, {
-  type, payload: {
-    relation, orIndex, andIndex,
-  } = {},
-}) => {
+const reducer = (state, action = {}) => {
   const newState = [...state];
+  const {
+    type,
+    relation,
+    orIndex,
+    andIndex,
+    field,
+    operator,
+    value,
+  } = action;
 
   switch (type) {
     case 'add': {
@@ -28,6 +33,26 @@ const reducer = (state, {
       return newState;
     }
 
+    case 'update': {
+      newState[orIndex][andIndex] = {
+        ...newState[orIndex][andIndex],
+      };
+
+      if (operator) {
+        newState[orIndex][andIndex].operator = operator;
+      }
+
+      if (field) {
+        newState[orIndex][andIndex].field = field;
+      }
+
+      if (value) {
+        newState[orIndex][andIndex].value = value;
+      }
+
+      return newState;
+    }
+
     default: {
       return newState;
     }