pdf-reader-web/containers/Navbar.tsx

import React from 'react';
import queryString from 'query-string';

import useStore from '../store';
import useActions from '../actions';

import NavbarComponent from '../components/Navbar';
import Search from './Search';
import Thumbnails from './Thumbnails';
import AnnotationList from './AnnotationList';
import { downloadFileWithUri } from '../helpers/utility';

const Navbar: React.FC = () => {
  const [{
    navbarState,
    displayMode,
    info,
    annotations,
    totalPage,
  }, dispatch] = useStore();
  const { setNavbar } = useActions(dispatch);

  const onClick = (state: string): void => {
    switch (state) {
      case 'export': {
        const parsed = queryString.parse(window.location.search);
        const fileName = atob(info.token as string);
        const outputPath = `/api/v1/output.pdf?f=${info.token}&user_id=${parsed.watermark}&pages=0-${totalPage}`;
        const originalPath = `/api/v1/original.pdf?transaction_id=${info.id}`;

        if (annotations.length) {
          downloadFileWithUri(fileName, outputPath);
        } else {
          downloadFileWithUri(fileName, originalPath);
        }
        break;
      }
      case navbarState:
        setNavbar('');
        break;
      default:
        setNavbar(state);
        break;
    }
  };

  return (
    <NavbarComponent
      onClick={onClick}
      navbarState={navbarState}
      displayMode={displayMode}
      fileName={info.token ? atob(info.token) : ''}
    >
      <Search />
      <AnnotationList />
      <Thumbnails />
    </NavbarComponent>
  );
};

export default Navbar;