Created MenuLayout test

src/common/MenuLayout.tsx

@@ -1,11 +1,10 @@
 import { FC, useEffect } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { useSwipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
-import { useToggle } from '../utils/helpers/hooks';
+import { useSwipeable, useToggle } from '../utils/helpers/hooks';
 import { versionMatch } from '../utils/helpers/version';
 import { isReachableServer } from '../servers/data';
 import NotFound from './NotFound';
@@ -33,25 +32,8 @@ const MenuLayout = (
 
   const addTagsVisitsRoute = versionMatch(selectedServer.version, { minVersion: '2.2.0' });
   const addOrphanVisitsRoute = versionMatch(selectedServer.version, { minVersion: '2.6.0' });
-  const burgerClasses = classNames('menu-layout__burger-icon', {
-    'menu-layout__burger-icon--active': sidebarVisible,
-  });
-  const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
-    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
-      ({ classList }) => classList?.contains('visits-table'),
-    );
-
-    if (swippedOnVisitsTable || document.querySelector('.modal')) {
-      return;
-    }
-
-    callback();
-  };
-  const swipeableProps = useSwipeable({
-    delta: 40,
-    onSwipedLeft: swipeMenuIfNoModalExists(hideSidebar),
-    onSwipedRight: swipeMenuIfNoModalExists(showSidebar),
-  });
+  const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
+  const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
   return (
     <>

src/servers/data/index.ts

@@ -34,7 +34,7 @@ export const isServerWithId = (server: SelectedServer | ServerWithId): server is
   !!server?.hasOwnProperty('id');
 
 export const isReachableServer = (server: SelectedServer): server is ReachableServer =>
-  !!server?.hasOwnProperty('printableVersion');
+  !!server?.hasOwnProperty('version');
 
 export const isNotFoundServer = (server: SelectedServer): server is NotFoundServer =>
   !!server?.hasOwnProperty('serverNotFound');

src/utils/helpers/hooks.ts

@@ -1,4 +1,5 @@
 import { useState, useRef } from 'react';
+import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 
 const DEFAULT_DELAY = 2000;
 
@@ -30,3 +31,23 @@ export const useToggle = (initialValue = false): ToggleResult => {
 
   return [ flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false) ];
 };
+
+export const useSwipeable = (showSidebar: () => void, hideSidebar: () => void) => {
+  const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
+    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
+      ({ classList }) => classList?.contains('visits-table'),
+    );
+
+    if (swippedOnVisitsTable || document.querySelector('.modal')) {
+      return;
+    }
+
+    callback();
+  };
+
+  return useReactSwipeable({
+    delta: 40,
+    onSwipedLeft: swipeMenuIfNoModalExists(hideSidebar),
+    onSwipedRight: swipeMenuIfNoModalExists(showSidebar),
+  });
+};