Add toggle to show/hide patterns (seanprashad#32)

Fixes seanprashad#31

Author: Sean

package-lock.json

@@ -22,6 +22,7 @@
     "react-scroll": "^1.7.15",
     "react-table": "^7.0.0-rc.15",
     "react-test-renderer": "^16.12.0",
+    "react-toggle": "^4.1.1",
     "react-tooltip": "^3.11.2",
     "reactstrap": "^8.2.0"
   },

package.json

@@ -6,6 +6,7 @@ import {
   Badge,
   NavLink,
 } from 'reactstrap';
+import Toggle from 'react-toggle';
 import ReactTooltip from 'react-tooltip';
 import { useTable, useFilters, useSortBy } from 'react-table';
 import { FaQuestionCircle, FaLock } from 'react-icons/fa';
@@ -18,6 +19,7 @@ import { Event } from '../Shared/Tracking';
 
 import questions from '../../data';
 
+import 'react-toggle/style.css';
 import './styles.scss';
 
 const images = require.context('../../icons', true);
@@ -28,10 +30,19 @@ const Table = () => {
       new Array(questions.length).fill(false),
   );
 
+  const [hidePatterns, setHidePatterns] = useState(
+    JSON.parse(localStorage.getItem('hidePatterns')) ||
+      new Array(1).fill(false),
+  );
+
   useEffect(() => {
     window.localStorage.setItem('checked', JSON.stringify(checked));
   }, [checked]);
 
+  useEffect(() => {
+    window.localStorage.setItem('hidePatterns', JSON.stringify(hidePatterns));
+  }, [hidePatterns]);
+
   const data = React.useMemo(() => questions, []);
 
   const defaultColumn = React.useMemo(
@@ -106,15 +117,33 @@ const Table = () => {
             disableFilters: true,
           },
           {
-            Header: 'Pattern',
+            Header: () => {
+              return (
+                <label htmlFor="pattern-toggle">
+                  <span>Show/Hide Patterns </span>
+                  <Toggle
+                    id="pattern-toggle"
+                    defaultChecked={hidePatterns[0]}
+                    icons={{
+                      checked: null,
+                      unchecked: null,
+                    }}
+                    onChange={() => {
+                      hidePatterns[0] = !hidePatterns[0];
+                      setHidePatterns([...hidePatterns]);
+                    }}
+                  />
+                </label>
+              );
+            },
             accessor: 'pattern',
             Cell: cellInfo => {
               const patterns = `${cellInfo.row.original.pattern}`
                 .split(',')
                 .map(pattern => {
                   return (
                     <Badge key={pattern} className={pattern} pill>
-                      {checked[cellInfo.row.original.id] ? pattern : '***'}
+                      {hidePatterns[0] ? pattern : '***'}
                     </Badge>
                   );
                 });

src/components/Table/index.js

@@ -36,4 +36,8 @@
     justify-content: space-evenly;
     margin: 0;
   }
+
+  .react-toggle {
+    top: 5px;
+  }
 }