begins transformation of where internal state to query-compatible structure

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

@@ -127,7 +127,7 @@ const Button = (props) => {
 
 Button.defaultProps = {
   className: null,
-  type: 'submit',
+  type: 'button',
   buttonStyle: 'primary',
   el: null,
   to: null,

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

@@ -18,7 +18,7 @@ const NumberField = ({ onChange, value }) => {
 };
 
 NumberField.defaultProps = {
-  value: null,
+  value: '',
 };
 
 NumberField.propTypes = {

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

@@ -44,7 +44,29 @@ const WhereBuilder = (props) => {
   }, [fields]);
 
   useEffect(() => {
-    if (typeof handleChange === 'function') handleChange(where);
+    const whereQuery = {
+      or: [],
+    };
+
+    if (where) {
+      whereQuery.or = where.map((or) => {
+        return or.reduce((and, condition) => {
+          const { field, operator, value } = condition;
+          if (field && operator && value) {
+            return {
+              ...and,
+              [field]: {
+                [operator]: value,
+              },
+            };
+          }
+
+          return and;
+        }, {});
+      });
+    }
+
+    if (typeof handleChange === 'function') handleChange(whereQuery);
   }, [where, handleChange]);
 
   return (
@@ -94,6 +116,7 @@ const WhereBuilder = (props) => {
             })}
           </ul>
           <Button
+            className={`${baseClass}__add-or`}
             icon="plus"
             buttonStyle="icon-label"
             iconPosition="left"
@@ -107,6 +130,7 @@ const WhereBuilder = (props) => {
         <div className={`${baseClass}__no-filters`}>
           <div className={`${baseClass}__label`}>No filters set</div>
           <Button
+            className={`${baseClass}__add-first-filter`}
             icon="plus"
             buttonStyle="icon-label"
             iconPosition="left"

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

@@ -15,9 +15,12 @@
     padding: 0;
   }
 
-  &__no-filters {
-    .btn {
-      margin: 0;
-    }
+  &__add-or,
+  &__add-first-filter {
+    margin-bottom: 0;
+  }
+
+  &__add-first-filter {
+    margin-top: 0;
   }
 }

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

@@ -1,7 +1,3 @@
-const initialCondition = {
-  operators: [],
-};
-
 const reducer = (state, action = {}) => {
   const newState = [...state];
 
@@ -18,13 +14,13 @@ const reducer = (state, action = {}) => {
   switch (type) {
     case 'add': {
       if (relation === 'and') {
-        newState[orIndex].splice(andIndex, 0, initialCondition);
+        newState[orIndex].splice(andIndex, 0, {});
         return newState;
       }
 
       return [
         ...newState,
-        [initialCondition],
+        [{}],
       ];
     }
 

src/client/components/forms/Submit/index.js

@@ -12,6 +12,7 @@ const FormSubmit = ({ children }) => {
   return (
     <div className={baseClass}>
       <Button
+        type="submit"
         disabled={formContext.processing ? true : undefined}
       >
         {children}

src/client/scss/vars.scss

@@ -8,7 +8,7 @@
 /////////////////////////////
 
 $breakpoint-xs-width: 400px;
-$breakpoint-s-width: 500px;
+$breakpoint-s-width: 768px;
 $breakpoint-m-width: 1024px;
 $breakpoint-l-width: 1440px;