From 30a5ac53fc26a52fc422d2940e1842eab3f9d249 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Thu, 28 May 2020 19:14:43 -0400
Subject: [PATCH] throttles WhereBuilder and ensures search and filter can work
 together

---
 src/client/components/elements/ListControls/index.js       | 6 +++---
 src/client/components/elements/Nav/index.scss              | 6 +++++-
 src/client/components/elements/WhereBuilder/field-types.js | 6 +++---
 src/client/components/elements/WhereBuilder/index.js       | 5 +++--
 src/client/components/templates/Default/index.scss         | 6 ++++++
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/client/components/elements/ListControls/index.js b/src/client/components/elements/ListControls/index.js
index d4088ed4cd..2d725fbd12 100644
--- a/src/client/components/elements/ListControls/index.js
+++ b/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);
diff --git a/src/client/components/elements/Nav/index.scss b/src/client/components/elements/Nav/index.scss
index a8e0872123..83b2e091dd 100644
--- a/src/client/components/elements/Nav/index.scss
+++ b/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);
diff --git a/src/client/components/elements/WhereBuilder/field-types.js b/src/client/components/elements/WhereBuilder/field-types.js
index b0bfb92343..19b21a830e 100644
--- a/src/client/components/elements/WhereBuilder/field-types.js
+++ b/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',
   },
   {
diff --git a/src/client/components/elements/WhereBuilder/index.js b/src/client/components/elements/WhereBuilder/index.js
index a6710e3241..c2d0f5ab9f 100644
--- a/src/client/components/elements/WhereBuilder/index.js
+++ b/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}>
diff --git a/src/client/components/templates/Default/index.scss b/src/client/components/templates/Default/index.scss
index ed040abd84..f167f67e3d 100644
--- a/src/client/components/templates/Default/index.scss
+++ b/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;