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;
+ }
 }