Address more pr comments #54

RGPosadas · Nov 28, 2020 · 82d35d4 · 82d35d4
1 parent 94af266
commit 82d35d4
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 86 deletions.
diff --git a/apps/mull-ui/src/app/app.tsx b/apps/mull-ui/src/app/app.tsx
@@ -4,9 +4,8 @@ import SwipeableRoutes from 'react-swipeable-routes';
 import { ToastContainer, toast } from 'react-toastify';
 import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
 
-import SubNavigationBar from './components/subnavigation-bar/subnavigation-bar';
 import CreateEventPage from './pages/create-event/create-event';
-import { NavigationBar, Header } from './components';
+import { NavigationBar, Header, SubNavigationBar } from './components';
 import LoginPage from './pages/login/login';
 import RegisterPage from './pages/register/register';
 
@@ -34,7 +33,7 @@ export const App = () => {
   return (
     <div>
       <Switch>
-        <Route exact path="/">
+        <Route exact path={['/', ROUTES.HOME]}>
           {<Redirect to={ROUTES.DISCOVER} />}
         </Route>
         <Route exact path={ROUTES.CREATE_EVENT} component={CreateEventPage} />
@@ -44,14 +43,15 @@ export const App = () => {
             <EventPage event={dummyEvent} prevPage={'Review'} />
           </div>
         </Route>
-        {/* Without this outter Route component, the inner components would show on all routes that are not matched */}
-        <Route exact path={[`${ROUTES.DISCOVER}`, `${ROUTES.UPCOMING}`, `${ROUTES.MYEVENTS}`]}>
-          <SubNavigationBar />
-          <SwipeableRoutes>
-            <Route path={ROUTES.DISCOVER} component={() => <div>DISCOVER!</div>} />
-            <Route path={ROUTES.UPCOMING} component={() => <div>UPCOMING!</div>} />
-            <Route path={ROUTES.MYEVENTS} component={() => <div>MYEVENTS!</div>} />
-          </SwipeableRoutes>
+        <Route path={ROUTES.HOME}>
+          <div className="page-container">
+            <SubNavigationBar />
+            <SwipeableRoutes>
+              <Route path={ROUTES.DISCOVER} component={() => <div>DISCOVER!</div>} />
+              <Route path={ROUTES.UPCOMING} component={() => <div>UPCOMING!</div>} />
+              <Route path={ROUTES.MY_EVENTS} component={() => <div>MY_EVENTS!</div>} />
+            </SwipeableRoutes>
+          </div>
         </Route>
         <Route exact path={ROUTES.LOGIN} component={LoginPage} />
         <Route exact path={ROUTES.REGISTER} component={RegisterPage} />

diff --git a/apps/mull-ui/src/app/components/index.ts b/apps/mull-ui/src/app/components/index.ts
@@ -6,3 +6,4 @@ export * from './mull-back-button/mull-back-button';
 export * from './mull-button/mull-button';
 export * from './navigation-bar/navigation-bar';
 export * from './custom-file-upload/custom-file-upload';
+export * from './subnavigation-bar/subnavigation-bar';
diff --git a/apps/mull-ui/src/app/components/navigation-bar/__snapshots__/navigation-bar.spec.tsx.snap b/apps/mull-ui/src/app/components/navigation-bar/__snapshots__/navigation-bar.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`NavigationBar should match snapshot 1`] = `
   <a
     aria-current={null}
     data-testid="home-navlink"
-    href="/discover"
+    href="/home"
     onClick={[Function]}
   >
     <svg

diff --git a/apps/mull-ui/src/app/components/navigation-bar/navigation-bar.spec.tsx b/apps/mull-ui/src/app/components/navigation-bar/navigation-bar.spec.tsx
@@ -24,7 +24,7 @@ describe('NavigationBar', () => {
 
   it('button associated with current should be active ', () => {
     const testIds = {
-      [ROUTES.DISCOVER]: 'home-navlink',
+      [ROUTES.HOME]: 'home-navlink',
       [ROUTES.MAP]: 'map-navlink',
       [ROUTES.CREATE_EVENT]: 'create-event-navlink',
       [ROUTES.TOOLS]: 'tools-navlink',

diff --git a/apps/mull-ui/src/app/components/navigation-bar/navigation-bar.tsx b/apps/mull-ui/src/app/components/navigation-bar/navigation-bar.tsx
@@ -10,7 +10,7 @@ import { ReactComponent as MessagesIcon } from '../../../assets/icons/nav-bar-ic
 import { ReactComponent as MachineLearningIcon } from '../../../assets/icons/nav-bar-icons/MachineLearningIcon.svg';
 import logo from '../../../assets/mull-logo.png';
 
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { ROUTES } from '../../../constants';
 
 /**
@@ -19,16 +19,10 @@ import { ROUTES } from '../../../constants';
  * @see ROUTES
  */
 export const NavigationBar = () => {
-  const { pathname } = useLocation<{}>();
   return (
     <div className="nav-container">
       <img src={logo} className="logo nav-element" alt="Mull logo" />
-      <NavLink
-        to={ROUTES.DISCOVER}
-        isActive={() => [ROUTES.DISCOVER, ROUTES.UPCOMING, ROUTES.MYEVENTS].includes(pathname)}
-        activeClassName="active"
-        data-testid="home-navlink"
-      >
+      <NavLink to={ROUTES.HOME} activeClassName="active" data-testid="home-navlink">
         <HomeIcon className="nav-button" />
       </NavLink>
       <NavLink to={ROUTES.MAP} activeClassName="active" data-testid="map-navlink">

diff --git a/...ull-ui/src/app/components/subnavigation-bar/__snapshots__/subnavigation-bar.spec.tsx.snap b/...ull-ui/src/app/components/subnavigation-bar/__snapshots__/subnavigation-bar.spec.tsx.snap
@@ -2,38 +2,34 @@
 
 exports[`SubNavigationBar should match snapshot 1`] = `
 <div
-  className="page-container"
+  className="subnavigation-container"
 >
-  <div
-    className="subnavigation-container"
+  <a
+    aria-current={null}
+    className="subnavigation-link"
+    data-testid="subnavigation-discover-button"
+    href="/home/discover"
+    onClick={[Function]}
   >
-    <a
-      aria-current={null}
-      className="subnavigation-link"
-      data-testid="subnavigation-discover-button"
-      href="/discover"
-      onClick={[Function]}
-    >
-      Discover
-    </a>
-    <a
-      aria-current={null}
-      className="subnavigation-link"
-      data-testid="subnavigation-upcoming-button"
-      href="/upcoming"
-      onClick={[Function]}
-    >
-      Upcoming
-    </a>
-    <a
-      aria-current={null}
-      className="subnavigation-link"
-      data-testid="subnavigation-myEvents-button"
-      href="/myevents"
-      onClick={[Function]}
-    >
-      My Events
-    </a>
-  </div>
+    Discover
+  </a>
+  <a
+    aria-current={null}
+    className="subnavigation-link"
+    data-testid="subnavigation-upcoming-button"
+    href="/home/upcoming"
+    onClick={[Function]}
+  >
+    Upcoming
+  </a>
+  <a
+    aria-current={null}
+    className="subnavigation-link"
+    data-testid="subnavigation-myEvents-button"
+    href="/home/myevents"
+    onClick={[Function]}
+  >
+    My Events
+  </a>
 </div>
 `;
diff --git a/apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.spec.tsx b/apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.spec.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
-import { createMemoryHistory } from 'history';
-
 import SubNavigationBar from './subnavigation-bar';
+
+import { render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+
 import { ROUTES } from '../../../constants';
 
 describe('SubNavigationBar', () => {
@@ -23,8 +24,8 @@ describe('SubNavigationBar', () => {
   it('should have the correct button active based on the url', () => {
     const testIds = {
       [ROUTES.DISCOVER]: 'subnavigation-discover-button',
-      [`${ROUTES.UPCOMING}`]: 'subnavigation-upcoming-button',
-      [`${ROUTES.MYEVENTS}`]: 'subnavigation-myEvents-button',
+      [ROUTES.UPCOMING]: 'subnavigation-upcoming-button',
+      [ROUTES.MY_EVENTS]: 'subnavigation-myEvents-button',
     };
     const history = createMemoryHistory();
 

diff --git a/apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.tsx b/apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.tsx
@@ -6,32 +6,30 @@ import './subnavigation-bar.scss';
 
 export const SubNavigationBar = () => {
   return (
-    <div className="page-container">
-      <div className="subnavigation-container">
-        <NavLink
-          to={ROUTES.DISCOVER}
-          className="subnavigation-link"
-          data-testid="subnavigation-discover-button"
-        >
-          Discover
-        </NavLink>
-        <NavLink
-          to={ROUTES.UPCOMING}
-          className="subnavigation-link"
-          activeClassName="active"
-          data-testid="subnavigation-upcoming-button"
-        >
-          Upcoming
-        </NavLink>
-        <NavLink
-          to={ROUTES.MYEVENTS}
-          className="subnavigation-link"
-          activeClassName="active"
-          data-testid="subnavigation-myEvents-button"
-        >
-          My Events
-        </NavLink>
-      </div>
+    <div className="subnavigation-container">
+      <NavLink
+        to={ROUTES.DISCOVER}
+        className="subnavigation-link"
+        data-testid="subnavigation-discover-button"
+      >
+        Discover
+      </NavLink>
+      <NavLink
+        to={ROUTES.UPCOMING}
+        className="subnavigation-link"
+        activeClassName="active"
+        data-testid="subnavigation-upcoming-button"
+      >
+        Upcoming
+      </NavLink>
+      <NavLink
+        to={ROUTES.MY_EVENTS}
+        className="subnavigation-link"
+        activeClassName="active"
+        data-testid="subnavigation-myEvents-button"
+      >
+        My Events
+      </NavLink>
     </div>
   );
 };

diff --git a/apps/mull-ui/src/constants.ts b/apps/mull-ui/src/constants.ts
@@ -4,16 +4,17 @@ import { EventRestriction, IEvent } from '@mull/types';
  * enum of the current routes for the application
  */
 export const ROUTES = {
+  HOME: '/home',
+  DISCOVER: '/home/discover',
+  UPCOMING: '/home/upcoming',
+  MY_EVENTS: '/home/myevents',
   MAP: '/map',
   CREATE_EVENT: '/create-event',
   TOOLS: '/tools',
   MESSAGES: '/messages',
   PROFILE: '/profile',
   LOGIN: '/login',
   REGISTER: '/register',
-  DISCOVER: '/discover',
-  UPCOMING: '/upcoming',
-  MYEVENTS: '/myevents',
 };
 
 export const DAY_IN_MILLISECONDS = 86400000;