throttles WhereBuilder and ensures search and filter can work together

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

@@ -45,7 +45,7 @@ const ListControls = (props) => {
 
     if (search) {
       newState.where = {
-        AND: [
+        and: [
           search,
         ],
       };
@@ -54,11 +54,11 @@ const ListControls = (props) => {
     if (where) {
       if (!search) {
         newState.where = {
-          AND: [],
+          and: [],
         };
       }
 
-      newState.where.AND.push(where);
+      newState.where.and.push(where);
     }
 
     handleChange(newState);

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

@@ -5,7 +5,7 @@
   top: 0;
   left: 0;
   bottom: 0;
-  width: base(10);
+  width: base(9);
   overflow: hidden;
 
   header {
@@ -112,6 +112,10 @@
     }
   }
 
+  @include large-break {
+    width: base(8);
+  }
+
   @include mid-break {
     background: rgba($color-background-gray, .8);
     backdrop-filter: saturate(180%) blur(5px);

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

@@ -5,7 +5,7 @@ const boolean = [
   },
   {
     label: 'is not equal to',
-    value: 'not-equals',
+    value: 'not_equals',
   },
 ];
 
@@ -17,14 +17,14 @@ const base = [
   },
   {
     label: 'is not in',
-    value: 'not-in',
+    value: 'not_in',
   },
 ];
 
 const numeric = [
   ...base,
   {
-    label: 'is greater Than',
+    label: 'is greater than',
     value: 'greater_than',
   },
   {

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
+import useThrottledEffect from '../../../hooks/useThrottledEffect';
 import Button from '../Button';
 import reducer from './reducer';
 import Condition from './Condition';
@@ -54,7 +55,7 @@ const WhereBuilder = (props) => {
     }, []));
   }, [fields]);
 
-  useEffect(() => {
+  useThrottledEffect(() => {
     let whereQuery = {
       or: [],
     };
@@ -86,7 +87,7 @@ const WhereBuilder = (props) => {
     whereQuery = validateWhereQuery(whereQuery);
 
     if (typeof handleChange === 'function') handleChange(whereQuery);
-  }, [where, handleChange]);
+  }, 500, [where, handleChange]);
 
   return (
     <div className={baseClass}>

src/client/components/templates/Default/index.scss

@@ -18,6 +18,12 @@
     padding-bottom: base(2);
   }
 
+  @include large-break {
+    &__wrap {
+      padding-left: base(1);
+    }
+  }
+
   @include mid-break {
     width: 100%;
     margin-left: 0;