pdf-reader-web/containers/Navbar.tsx

import React from 'react';

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

import NavbarComponent from '../components/Navbar';
import Search from '../components/Search';
import Annotations from '../components/Annotations';
import Thumbnails from './Thumbnails';

const Navbar: React.FunctionComponent = () => {
  const [{ navbarState }, dispatch] = useStore();
  const { switchNavbar } = useActions(dispatch);

  const onClick = (state: string): void => {
    if (state === navbarState) {
      switchNavbar('');
    } else {
      switchNavbar(state);
    }
  };

  const transferProps = (role: string): any => ({
    isActive: navbarState === role,
    close: (): void => { onClick(''); },
  });

  return (
    <NavbarComponent
      onClick={onClick}
      navbarState={navbarState}
    >
      <Search {...transferProps('search')} />
      <Annotations {...transferProps('annotations')} />
      <Thumbnails />
    </NavbarComponent>
  );
};

export default Navbar;