migration

Author: MacKentoch

front/src/components/navigation/NavigationBar.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  NavLink,
+} from 'reactstrap';
+import { RouteComponentProps } from 'react-router';
+import { OwnProps, MappedDispatchToProps, MappedStateToProps } from './index';
+
+// #region types
+type Props = {} & RouteComponentProps &
+  OwnProps &
+  MappedStateToProps &
+  MappedDispatchToProps;
+// #endregion
+
+function NavigationBar({
+  brand,
+  navModel: { rightLinks },
+  leftNavItemClick,
+  rightNavItemClick,
+  isAuthenticated,
+  history,
+  disconnectUser,
+}: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // #region navigation bar toggle
+  const toggle = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    event && event.preventDefault();
+    setIsOpen(!isOpen);
+  };
+  // #endregion
+
+  // #region handlesNavItemClick event
+  const handlesNavItemClick = (link: string = '/') => (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    event && event.preventDefault();
+    history.push(link);
+  };
+  // #endregion
+
+  // #region disconnect
+  const handlesDisconnect = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event && event.preventDefault();
+    disconnectUser();
+    history.push('/');
+  };
+  // #endregion
+
+  return (
+    <Navbar color="light" light expand="md">
+      <NavbarBrand href="/">{brand}</NavbarBrand>
+      <NavbarToggler onClick={toggle} />
+      <Collapse isOpen={isOpen} navbar>
+        <Nav className="ml-auto" navbar>
+          {rightLinks.map(({ label, link }, index) => (
+            <NavItem key={`${index}`}>
+              <NavLink href="#" onClick={handlesNavItemClick(link)}>
+                {label}
+              </NavLink>
+            </NavItem>
+          ))}
+          {isAuthenticated && (
+            <NavItem>
+              <NavLink href="#" onClick={handlesDisconnect}>
+                Disconnect
+              </NavLink>
+            </NavItem>
+          )}
+        </Nav>
+      </Collapse>
+    </Navbar>
+  );
+}
+
+NavigationBar.displayName = 'NavigationBar';
+
+export default NavigationBar;

front/src/components/navigation/NavigationBar.tsx

@@ -1,11 +1,7 @@
-// @flow
-
-// #region imports
 import React from 'react';
-import renderer from 'react-test-renderer'; // needed both for snpashot testing but also to prevent errors from enzyme
+import { shallow } from 'enzyme';
 import { MemoryRouter } from 'react-router';
 import NavigationBar from '../NavigationBar';
-// #endregion
 
 describe('NavigationBar component', () => {
   it('renders as expected', () => {
@@ -33,15 +29,13 @@ describe('NavigationBar component', () => {
       },
     };
 
-    const component = renderer
-      .create(
-        <div>
-          <MemoryRouter>
-            <NavigationBar {...props} />
-          </MemoryRouter>
-        </div>,
-      )
-      .toJSON();
+    const component = shallow(
+      <div>
+        <MemoryRouter>
+          <NavigationBar {...props} />
+        </MemoryRouter>
+      </div>,
+    );
     expect(component).toMatchSnapshot();
   });
 });

front/src/components/navigation/__tests__/NavigationBar.test.js renamed to front/src/components/navigation/__tests__/NavigationBar.test.tsx

@@ -1,9 +1,5 @@
-// @flow
-
-// #region imports
 import { compose } from 'redux';
 import withAuth from '../../contexts/auth/consumerHOC';
 import NavigationBar from './NavigationBar';
-// #endregion
 
 export default compose(withAuth())(NavigationBar);