Ethan/move filters left v1

statusboard/package.json

@@ -28,6 +28,7 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-split-pane": "^0.1.92",
     "react-super-responsive-table": "^5.2.0",
     "react-table": "^7.7.0",
     "sass": "^1.49.9",

statusboard/src/components/App/App.js

@@ -9,12 +9,12 @@ function App() {
   return (
     <div className="App">
       <TaxonomyDataContextProvider>
-      <BrigadeDataContextProvider>
-        <AppRouter>
-          <Header />
-          <PageContents />
-        </AppRouter>
-      </BrigadeDataContextProvider>
+        <BrigadeDataContextProvider>
+          <AppRouter>
+            <Header />
+            <PageContents />
+          </AppRouter>
+        </BrigadeDataContextProvider>
       </TaxonomyDataContextProvider>
     </div>
   );

statusboard/src/components/Checkbox/Checkbox.js

@@ -1,37 +1,19 @@
 import React from 'react';
-import cx from 'classnames';
 import '../commonFormControlStyles.scss';
 import './Checkbox.scss';
 
-export default function Checkbox({
-  label,
-  id,
-  onChange,
-  className = '',
-  inline = true
-}) {
+export default function Checkbox({ label, id, onChange }) {
   return (
-    <div
-      className={cx(
-        'form-control-container',
-        { 'form-control-container--inline': inline },
-        className
-      )}
-      style={{ display: 'flex' }}
-    >
-      <label
-        htmlFor={id}
-        className={cx('form-label', { 'form-label--inline': inline })}
-      >
+    <div className="form-control-container" style={{ display: 'flex' }}>
+      <label htmlFor={id} className="form-label checkboxLabelAdjustment">
         {label}
       </label>
       <input
-	    type="checkbox"
+        type="checkbox"
         id={id}
         onChange={onChange}
-        className={cx('form-control', { 'form-control--inline': inline })}
+        className="form-control"
       />
     </div>
   );
 }
-

statusboard/src/components/Divider/Divider.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Checkbox() {
+  return <div className="separator" />;
+}

statusboard/src/components/PageContents/PageContents.css

@@ -1,6 +1,6 @@
 .contents {
   display: block;
-  padding: 3rem 5vw 0 5vw;
+  padding: 1rem 5vw 0 5vw;
 }
 
 .text-content {

statusboard/src/components/Projects/MultiSelect/MultiSelect.js

@@ -0,0 +1,114 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Downshift from 'downshift';
+import './MultiSelect.scss';
+import { UnselectedTags } from './UnselectedTags';
+
+const displayCollapseExpand = (display) => (display ? collapse : expand);
+const collapse = '▲';
+const expand = '▼';
+
+function changeHandler({
+  setSelectedItem,
+  setInputValue,
+  inputValue,
+  setIsOpen,
+  isOpen,
+  selectedItems,
+  setSelectedItems,
+}) {
+  return (selectedItem, downshift) => {
+    setInputValue(inputValue);
+    setIsOpen(isOpen);
+    if (!selectedItem) return;
+    setSelectedItem(selectedItem);
+    // setInputValue(inputValue);
+    // const i = selectedItems.findIndex((item) => item.id === selectedItem.id);
+    setSelectedItems([...selectedItems, selectedItem]);
+    downshift.clearSelection();
+  };
+}
+
+// From https://www.axelerant.com/resources/team-blog/using-downshift-create-multi-select-widget-react
+export const MultiSelect = ({
+  availableTags,
+  inputClassName = '',
+  labelText,
+  setSelectedItems,
+  selectedItems = [],
+  setSelectedItem,
+  setIsOpen,
+  isOpen,
+  setInputValue,
+  inputValue,
+  ...rest
+}) => (
+  <>
+    <Downshift
+      {...rest}
+      onChange={changeHandler({
+        selectedItems,
+        setSelectedItem,
+        setIsOpen,
+        isOpen,
+        setInputValue,
+        inputValue,
+        setSelectedItems,
+      })}
+    >
+      {({
+        // parameters provided by Downshift
+        getLabelProps,
+        getInputProps,
+        getItemProps,
+        getToggleButtonProps,
+        isOpen,
+        inputValue,
+      }) => (
+        <div className="multi-select">
+          <div className="form-control-container">
+            <label {...getLabelProps()}>{labelText}</label>
+            <input
+              {...getInputProps()}
+              {...getToggleButtonProps()}
+              type="text"
+              width="40px"
+              className={`form-control ${inputClassName}`}
+            />
+            <span
+              {...getToggleButtonProps({
+                className: 'accordionCollapseExpandButton',
+              })}
+            >
+              {displayCollapseExpand(isOpen)}
+            </span>
+          </div>
+          <UnselectedTags
+            availableTags={availableTags}
+            selectedItems={selectedItems}
+            getItemProps={getItemProps}
+            isOpen={isOpen}
+            inputValue={inputValue}
+          />
+        </div>
+      )}
+    </Downshift>
+  </>
+);
+
+MultiSelect.defaultProps = {};
+
+MultiSelect.propTypes = {
+  availableTags: PropTypes.array,
+  labelText: PropTypes.string,
+  setSelectedItems: PropTypes.func,
+  getItemProps: PropTypes.func,
+  isOpen: PropTypes.bool,
+  selectedItem: {},
+  inputValue: PropTypes.string,
+};