TASK-12: discovery page tabs

apps/mull-ui/src/app/app.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { BrowserRouter } from 'react-router-dom';
-import renderer from 'react-test-renderer';
 
 import App from './app';
 
@@ -16,15 +15,4 @@ describe('App', () => {
 
     expect(baseElement).toBeTruthy();
   });
-
-  it('should match snapshot', () => {
-    const tree = renderer
-      .create(
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
 });

apps/mull-ui/src/app/app.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import SwipeableRoutes from 'react-swipeable-routes';
+
 import { ToastContainer, toast } from 'react-toastify';
 import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
 
 import CreateEventPage from './pages/create-event/create-event';
-import { NavigationBar, Header, EventCard } from './components';
+import { NavigationBar, Header, SubNavigationBar, EventCard } from './components';
 import LoginPage from './pages/login/login';
 import RegisterPage from './pages/register/register';
 
@@ -31,8 +33,8 @@ export const App = () => {
   return (
     <div>
       <Switch>
-        <Route exact path="/">
-          {<Redirect to={ROUTES.HOME} />}
+        <Route exact path={['/', ROUTES.HOME]}>
+          {<Redirect to={ROUTES.DISCOVER} />}
         </Route>
         <Route exact path={ROUTES.CREATE_EVENT} component={CreateEventPage} />
         {/* Temporary, to be removed */}
@@ -46,6 +48,17 @@ export const App = () => {
             <EventCard event={dummyEvent} style={{ marginBottom: '1rem' }} />
           </div>
         </Route>
+        <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>} />
+              <Route path={ROUTES.HOME} render={() => <Redirect to={ROUTES.DISCOVER} />} />
+            </SwipeableRoutes>
+          </div>
+        </Route>
         <Route exact path={ROUTES.LOGIN} component={LoginPage} />
         <Route exact path={ROUTES.REGISTER} component={RegisterPage} />
       </Switch>

apps/mull-ui/src/app/components/header/header.spec.tsx

@@ -12,7 +12,6 @@ import renderer from 'react-test-renderer';
 describe('Header', () => {
   it('should render successfully', () => {
     const history = createMemoryHistory();
-    history.push(ROUTES.HOME);
 
     const { baseElement } = render(
       <Router history={history}>

apps/mull-ui/src/app/components/index.ts

@@ -7,3 +7,4 @@ export * from './header/header';
 export * from './mull-back-button/mull-back-button';
 export * from './mull-button/mull-button';
 export * from './navigation-bar/navigation-bar';
+export * from './subnavigation-bar/subnavigation-bar';

apps/mull-ui/src/app/components/navigation-bar/navigation-bar.spec.tsx

@@ -12,7 +12,6 @@ import renderer from 'react-test-renderer';
 describe('NavigationBar', () => {
   it('should render successfully', () => {
     const history = createMemoryHistory();
-    history.push(ROUTES.HOME);
 
     const { baseElement } = render(
       <Router history={history}>

apps/mull-ui/src/app/components/subnavigation-bar/__snapshots__/subnavigation-bar.spec.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubNavigationBar should match snapshot 1`] = `
+<div
+  className="subnavigation-container"
+>
+  <a
+    aria-current={null}
+    className="subnavigation-link"
+    data-testid="subnavigation-discover-button"
+    href="/home/discover"
+    onClick={[Function]}
+  >
+    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>
+`;

apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.scss

@@ -0,0 +1,23 @@
+@import 'variables';
+@import 'styles';
+
+.subnavigation-container {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.subnavigation-link {
+  color: $inactive-button-color;
+}
+
+.active {
+  color: $primary-color;
+  font-weight: 600;
+}
+
+@media (min-width: $breakpoint-mobile) {
+  .subnavigation-container {
+    margin-top: 2.5rem;
+  }
+}

apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+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', () => {
+  it('should render successfully', () => {
+    const history = createMemoryHistory();
+
+    const { baseElement } = render(
+      <Router history={history}>
+        <SubNavigationBar />
+      </Router>
+    );
+
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should have the correct button active based on the url', () => {
+    const testIds = {
+      [ROUTES.DISCOVER]: 'subnavigation-discover-button',
+      [ROUTES.UPCOMING]: 'subnavigation-upcoming-button',
+      [ROUTES.MY_EVENTS]: 'subnavigation-myEvents-button',
+    };
+    const history = createMemoryHistory();
+
+    const utils = render(
+      <Router history={history}>
+        <SubNavigationBar />
+      </Router>
+    );
+
+    for (const [key, value] of Object.entries(testIds)) {
+      history.push(key);
+      const button = utils.getByTestId(value);
+      expect(button.classList.contains('active'));
+    }
+  });
+
+  it('should match snapshot', () => {
+    const history = createMemoryHistory();
+    const tree = renderer
+      .create(
+        <Router history={history}>
+          <SubNavigationBar />
+        </Router>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.tsx

@@ -0,0 +1,37 @@
+import { ROUTES } from '../../../constants';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import './subnavigation-bar.scss';
+
+export const SubNavigationBar = () => {
+  return (
+    <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>
+  );
+};
+
+export default SubNavigationBar;

apps/mull-ui/src/constants.ts

@@ -5,6 +5,9 @@ import { EventRestriction, IEvent } from '@mull/types';
  */
 export const ROUTES = {
   HOME: '/home',
+  DISCOVER: '/home/discover',
+  UPCOMING: '/home/upcoming',
+  MY_EVENTS: '/home/myevents',
   MAP: '/map',
   CREATE_EVENT: '/create-event',
   TOOLS: '/tools',

libs/ui-lib/src/lib/styles/styles.scss

@@ -11,6 +11,10 @@
   border: 0;
 }
 
+a {
+  text-decoration: none;
+}
+
 .error-message {
   display: block;
   margin-top: 5px;