SettingLogbookMenuPanel.js

import React from 'react';
import { Col, Grid, Panel, Row, Checkbox } from 'react-bootstrap';
import {
  EVENT_CATEGORY_COMMANDLINE,
  EVENT_CATEGORY_ERROR,
  EVENT_CATEGORY_INFO,
  ANNOTATION,
  NOTIFICATION,
  EVENT_CATEGORY_COMMENT,
  EVENT_CATEGORY_DEBUG,
} from '../../../constants/eventTypes';
import { useDispatch } from 'react-redux';
import styles from './SettingLogbookMenuPanel.module.css';
import { setCategoryTypes, unsetCategoryTypes } from '../../../actions/logbook';

const checkBoxes = [
  {
    name: 'showComments',
    label: 'Comments',
    value: [
      { type: ANNOTATION },
      { type: NOTIFICATION, category: EVENT_CATEGORY_COMMENT },
    ],
  },
  {
    name: 'showInformation',
    label: 'Information',
    value: [
      { type: NOTIFICATION, category: EVENT_CATEGORY_INFO },
      { type: NOTIFICATION, category: EVENT_CATEGORY_DEBUG },
    ],
  },
  {
    name: 'showError',
    label: 'Errors',
    value: [{ type: NOTIFICATION, category: EVENT_CATEGORY_ERROR }],
  },
  {
    name: 'showCommandLine',
    label: 'Command Lines',
    value: [{ type: NOTIFICATION, category: EVENT_CATEGORY_COMMANDLINE }],
  },
];

/*
 * React component which renders a panel showing the filter that can be applied on events
 */
export default function SettingLogbookMenuPanel(props) {
  const dispatch = useDispatch();

  const getValueByName = (name) =>
    checkBoxes.find((cb) => cb.name === name).value;

  /** Checkbox will be checked if and only if its values are in the categoryTypes  */
  const isChecked = (values) => {
    let found = true;
    values.forEach((value) => {
      if (
        props.categoryTypes &&
        props.categoryTypes.find(
          (ct) => ct.type === value.type && ct.category === value.category
        ) == null
      ) {
        found = false;
      }
    });

    return found;
  };
  return (
    <Panel>
      <Panel.Heading>
        <Panel.Title componentClass="h2">Settings</Panel.Title>
      </Panel.Heading>
      <Panel.Body>
        <Grid fluid>
          <Col md={2} sm={6} xs={6}>
            <h4>Log types</h4>
            <Grid>
              <Row>
                {checkBoxes.map((checkbox) => (
                  <Row key={checkbox.name}>
                    <Col md={2} sm={6} xs={6}>
                      <Checkbox
                        className={styles.returnCheckbox}
                        name={checkbox.name}
                        checked={isChecked(checkbox.value)}
                        value={checkbox.value}
                        onChange={(e) => {
                          if (e.target.checked) {
                            dispatch(
                              setCategoryTypes(getValueByName(e.target.name))
                            );
                          } else {
                            dispatch(
                              unsetCategoryTypes(getValueByName(e.target.name))
                            );
                          }
                        }}
                      >
                        {checkbox.label}
                      </Checkbox>
                    </Col>
                  </Row>
                ))}
              </Row>
            </Grid>
          </Col>
        </Grid>
      </Panel.Body>
    </Panel>
  );
}