shlinkio / shlink-web-client

import React, { useEffect } from 'react';

import { Route, Switch } from 'react-router-dom';

import { Swipeable } from 'react-swipeable';

import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import classNames from 'classnames';

import * as PropTypes from 'prop-types';

import { serverType } from '../servers/prop-types';

import { withSelectedServer } from '../servers/helpers/withSelectedServer';

import { useToggle } from '../utils/helpers/hooks';

import { versionMatch } from '../utils/helpers/version';

import NotFound from './NotFound';

import './MenuLayout.scss';

const propTypes = {

  match: PropTypes.object,

  location: PropTypes.object,

  selectedServer: serverType,

};

const MenuLayout = (

  TagsList,

  ShortUrls,

  AsideMenu,

  CreateShortUrl,

  ShortUrlVisits,

  TagVisits,

  ShlinkVersions,

  ServerError

) => {

  const MenuLayoutComp = ({ match, location, selectedServer }) => {

    const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();

    const { params: { serverId } } = match;

    useEffect(() => hideSidebar(), [ location ]);

    if (selectedServer.serverNotReachable) {

      return <ServerError type="not-reachable" />;

    }

    const addTagsVisitsRoute = versionMatch(selectedServer.version, { minVersion: '2.2.0' });

    const burgerClasses = classNames('menu-layout__burger-icon', {

      'menu-layout__burger-icon--active': sidebarVisible,

    });

    const swipeMenuIfNoModalExists = (callback) => (e) => {

      const swippedOnVisitsTable = e.event.path.some(

        ({ classList }) => classList && classList.contains('visits-table')

      );

      if (swippedOnVisitsTable || document.querySelector('.modal')) {

        return;

      }

      callback();

    };

    return (

      <React.Fragment>

        <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />

        <Swipeable

          delta={40}

          className="menu-layout__swipeable"

          onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}

          onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}

        >

          <div className="row menu-layout__swipeable-inner">

            <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />

            <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>

              <div className="menu-layout__container">

                <Switch>

                  <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />

                  <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />

                  <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />

                  {addTagsVisitsRoute && <Route exact path="/server/:serverId/tag/:tag/visits" component={TagVisits} />}

                  <Route exact path="/server/:serverId/manage-tags" component={TagsList} />

                  <Route

                    render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`}>List short URLs</NotFound>}

                  />

                </Switch>

              </div>

              <div className="menu-layout__footer text-center text-md-right">

                <ShlinkVersions />

              </div>

            </div>

          </div>

        </Swipeable>

      </React.Fragment>

    );

  };

  MenuLayoutComp.propTypes = propTypes;

  return withSelectedServer(MenuLayoutComp, ServerError);

};

export default MenuLayout;