further scaffolding to WhereBuilder

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

@@ -38,10 +38,11 @@ const ButtonContents = ({ children, icon }) => {
 
 ButtonContents.defaultProps = {
   icon: null,
+  children: null,
 };
 
 ButtonContents.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   icon: PropTypes.node,
 };
 

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

@@ -28,9 +28,11 @@ const reducer = (state, { type, payload }) => {
 
 const ColumnSelector = (props) => {
   const {
+    collection: {
+      fields,
+      useAsTitle,
+    },
     handleChange,
-    fields,
-    useAsTitle,
     defaultColumns,
   } = props;
 
@@ -73,17 +75,18 @@ const ColumnSelector = (props) => {
 
 ColumnSelector.defaultProps = {
   defaultColumns: undefined,
-  useAsTitle: undefined,
 };
 
 ColumnSelector.propTypes = {
-  fields: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
+  collection: PropTypes.shape({
+    fields: PropTypes.arrayOf(
+      PropTypes.shape({}),
+    ),
+    useAsTitle: PropTypes.string,
+  }).isRequired,
   defaultColumns: PropTypes.arrayOf(
     PropTypes.string,
   ),
-  useAsTitle: PropTypes.string,
   handleChange: PropTypes.func.isRequired,
 };
 

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

@@ -15,6 +15,7 @@ const baseClass = 'list-controls';
 const ListControls = (props) => {
   const {
     handleChange,
+    collection,
     collection: {
       fields,
       useAsTitle,
@@ -84,8 +85,7 @@ const ListControls = (props) => {
         height={visibleDrawer === 'columns' ? 'auto' : 0}
       >
         <ColumnSelector
-          useAsTitle={useAsTitle}
-          fields={fields}
+          collection={collection}
           defaultColumns={defaultColumns}
           handleChange={setColumns}
         />
@@ -94,7 +94,10 @@ const ListControls = (props) => {
         className={`${baseClass}__where`}
         height={visibleDrawer === 'where' ? 'auto' : 0}
       >
-        <WhereBuilder handleChange={setWhere} />
+        <WhereBuilder
+          handleChange={setWhere}
+          collection={collection}
+        />
       </AnimateHeight>
     </div>
   );

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

@@ -79,6 +79,7 @@ ReactSelect.defaultProps = {
   showError: false,
   disabled: false,
   formatValue: null,
+  options: [],
 };
 
 ReactSelect.propTypes = {
@@ -101,7 +102,7 @@ ReactSelect.propTypes = {
         label: PropTypes.string,
       }),
     ),
-  ]).isRequired,
+  ]),
   isMulti: PropTypes.bool,
 };
 

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ReactSelect from '../../ReactSelect';
+import Button from '../../Button';
+
+import './index.scss';
+
+const baseClass = 'condition';
+
+const Condition = (props) => {
+  const {
+    fields,
+    handleChange,
+    hideRelation,
+    relation,
+  } = props;
+
+  const [condition, setCondition] = useState({});
+
+  return (
+    <div className={baseClass}>
+      {!hideRelation && (
+        <div className={`${baseClass}__label`}>
+          {relation === 'and' && 'And'}
+          {relation === 'or' && 'Or'}
+        </div>
+      )}
+      <div className={`${baseClass}__wrap`}>
+        <div className={`${baseClass}__field`}>
+          <ReactSelect onChange={() => console.log('changing')} />
+        </div>
+        <div className={`${baseClass}__operator`}>
+          <ReactSelect onChange={() => console.log('changing')} />
+        </div>
+        <div className={`${baseClass}__value`}>
+          <ReactSelect onChange={() => console.log('changing')} />
+        </div>
+      </div>
+      <div className={`${baseClass}__actions`}>
+        <Button
+          icon="x"
+          round
+          buttonStyle="none"
+          onClick={() => console.log('remove')}
+        />
+        <Button
+          icon="plus"
+          round
+          buttonStyle="none"
+          onClick={() => console.log('add')}
+        />
+      </div>
+    </div>
+  );
+};
+
+Condition.defaultProps = {
+  relation: 'and',
+  hideRelation: false,
+};
+
+Condition.propTypes = {
+  hideRelation: PropTypes.bool,
+  fields: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      name: PropTypes.string,
+      type: PropTypes.string,
+    }),
+  ).isRequired,
+  handleChange: PropTypes.func.isRequired,
+  relation: PropTypes.oneOf(['and', 'or']),
+};
+
+export default Condition;

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

@@ -0,0 +1,5 @@
+.condition {
+  &__wrap {
+    display: flex;
+  }
+}

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

@@ -2,6 +2,7 @@ import React, { useEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button';
 import reducer from './reducer';
+import Condition from './Condition';
 
 import './index.scss';
 
@@ -9,6 +10,12 @@ const baseClass = 'where-builder';
 
 const WhereBuilder = (props) => {
   const {
+    collection: {
+      fields,
+      labels: {
+        plural,
+      } = {},
+    } = {},
     handleChange,
   } = props;
 
@@ -20,18 +27,46 @@ const WhereBuilder = (props) => {
 
   return (
     <div className={baseClass}>
-      {where.length > 0 && where.map((condition) => {
-        if (Array.isArray(condition)) {
-          return (
-            <div className={`${baseClass}__filters`}>
-              <div>Filter pages where</div>
-            </div>
-          );
-        }
-      })}
+      {where.length > 0 && (
+        <>
+          <div className={`${baseClass}__label`}>
+            Filter
+            {' '}
+            {plural}
+            {' '}
+            where
+          </div>
+          <ul className={`${baseClass}__filters`}>
+            {where.map((condition, i) => {
+              if (Array.isArray(condition)) {
+                return (
+                  <li key={i}>
+                    <Condition
+                      relation="and"
+                      fields={fields}
+                      handleChange={() => console.log('handling change')}
+                    />
+                  </li>
+                );
+              }
+
+              return (
+                <li key={i}>
+                  <Condition
+                    hideRelation={i === 0}
+                    relation={i === 0 ? 'and' : 'or'}
+                    fields={fields}
+                    handleChange={() => console.log('handling change')}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
       {where.length === 0 && (
         <div className={`${baseClass}__no-filters`}>
-          <p>No filters set</p>
+          <div className={`${baseClass}__label`}>No filters set</div>
           <Button
             icon="plus"
             buttonStyle="icon-label"
@@ -48,6 +83,14 @@ const WhereBuilder = (props) => {
 
 WhereBuilder.propTypes = {
   handleChange: PropTypes.func.isRequired,
+  collection: PropTypes.shape({
+    fields: PropTypes.arrayOf(
+      PropTypes.shape({}),
+    ),
+    labels: PropTypes.shape({
+      plural: PropTypes.string,
+    }),
+  }).isRequired,
 };
 
 export default WhereBuilder;

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

@@ -2,7 +2,17 @@
 
 .where-builder {
   background: $color-background-gray;
-  padding: $baseline;
+  padding: base(.5) $baseline $baseline;
+
+  &__label {
+    margin: base(.5) 0;
+  }
+
+  &__filters {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 
   &__no-filters {
     .btn {