pdf-reader-web/containers/MarkupTools.tsx

import React, { useEffect } from 'react';

import Button from '../components/Button';
import ExpansionPanel from '../components/ExpansionPanel';
import Icon from '../components/Icon';
import HighlightTools from './HighlightTools';
import Freehand from '../components/Freehand';
import TextTools from '../components/TextTools';
import Shape from '../components/Shape';

import useActions from '../actions';
import useStore from '../store';
import { BtnWrapper } from '../global/toolStyled';

const MarkupTools: React.FunctionComponent = () => {
  const [{ sidebarState, markupToolState }, dispatch] = useStore();
  const { setSidebar, setMarkupTool } = useActions(dispatch);

  const onClickSidebar = (state: string): void => {
    if (state === sidebarState) {
      setSidebar('');
    } else {
      setSidebar(state);
    }
  };

  const onClickTool = (state: string): void => {
    if (state === markupToolState) {
      setMarkupTool('');
    } else {
      setMarkupTool(state);
    }
  };

  useEffect(() => {
    if (sidebarState !== 'markup-tools') {
      setMarkupTool('');
    }
  }, []);

  return (
    <ExpansionPanel
      label={(
        <Button
          shouldFitContainer
          align="left"
          onClick={(): void => { onClickSidebar('markup-tools'); }}
        >
          <Icon glyph="markup-tools" style={{ marginRight: '10px' }} />
          Markup Tools
        </Button>
      )}
      isActive={sidebarState === 'markup-tools'}
    >
      <HighlightTools
        isActive={markupToolState === 'highlight'}
        onClick={(): void => { onClickTool('highlight'); }}
      />
      <Freehand
        isActive={markupToolState === 'freehand'}
        onClick={(): void => { onClickTool('freehand'); }}
      />
      <TextTools
        isActive={markupToolState === 'text'}
        onClick={(): void => { onClickTool('text'); }}
      />
      <BtnWrapper>
        <Button shouldFitContainer align="left" onClick={(): void => { onClickTool('sticky'); }} isActive={markupToolState === 'sticky'}>
          <Icon glyph="sticky-note" style={{ marginRight: '10px' }} />
          Sticky Note
        </Button>
      </BtnWrapper>
      <Shape
        isActive={markupToolState === 'shape'}
        onClick={(): void => { onClickTool('shape'); }}
      />
    </ExpansionPanel>
  );
};

export default MarkupTools;