Mini challenge 5

.eslintrc

@@ -2,8 +2,11 @@
   "extends": ["react-app", "airbnb", "prettier", "prettier/react"],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
+    "prettier/prettier": ["error", {
+      "usePrettierrc": false,
+      "endOfLine": "auto"
+    }],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

package.json

@@ -10,17 +10,20 @@
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
-    "lint:fix": "eslint ./src --ext .js,.jsx --fix"
+    "lint:fix": "eslint ./src --ext .js,.jsx --fix",
+    "coverage": "react-scripts test --coverage"
   },
   "devDependencies": {
+    "@testing-library/react-hooks": "^7.0.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",

src/components/App/App.component.jsx

@@ -3,13 +3,15 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import AuthProvider from '../../providers/Auth';
 import HomePage from '../../pages/Home';
+import FavoritesPage from '../../pages/Favorites';
 import LoginPage from '../../pages/Login';
 import NotFound from '../../pages/NotFound';
 import SecretPage from '../../pages/Secret';
 import Private from '../Private';
-import Fortune from '../Fortune';
 import Layout from '../Layout';
 import { random } from '../../utils/fns';
+import AppState from '../../context/State/state';
+import VideoDetailsView from '../VideoDetailsView';
 
 function App() {
   useLayoutEffect(() => {
@@ -31,27 +33,38 @@ function App() {
   }, []);
 
   return (
-    <BrowserRouter>
-      <AuthProvider>
-        <Layout>
-          <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
-            <Route exact path="/login">
-              <LoginPage />
-            </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
-            <Route path="*">
-              <NotFound />
-            </Route>
-          </Switch>
-          <Fortune />
-        </Layout>
-      </AuthProvider>
-    </BrowserRouter>
+    <AppState>
+      <BrowserRouter>
+        <AuthProvider>
+          <Layout>
+            <Switch>
+              <Route exact path="/favorites">
+                <FavoritesPage />
+              </Route>
+              <Route exact path="/favorites/:id">
+                <VideoDetailsView />
+              </Route>
+
+              <Route exact path="/login">
+                <LoginPage />
+              </Route>
+              <Private exact path="/secret">
+                <SecretPage />
+              </Private>
+              <Route exact path="/:id">
+                <VideoDetailsView />
+              </Route>
+              <Route exact path="/">
+                <HomePage />
+              </Route>
+              <Route path="*">
+                <NotFound />
+              </Route>
+            </Switch>
+          </Layout>
+        </AuthProvider>
+      </BrowserRouter>
+    </AppState>
   );
 }
 

src/components/Layout/Layout.component.jsx

@@ -1,9 +1,39 @@
-import React from 'react';
+import React, { useState, useRef, useContext } from 'react';
+import styled from 'styled-components';
 
-import './Layout.styles.css';
+import Navbar from '../Navbar';
+import Menu from '../Menu';
+import { useOnClickOutside } from '../../utils/hooks/useOnClickOutside';
+import { StateContext } from '../../context/State/state';
+
+// import './Layout.styles.css';
+
+const Main = styled.main`
+  width: 100vw;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: ${(props) => (props.mode ? '#303030' : '#ffffff')};
+  color: ${(props) => (props.mode ? '#ccc' : '#303030')};
+`;
 
 function Layout({ children }) {
-  return <main className="container">{children}</main>;
+  const stateContext = useContext(StateContext);
+  const { darkMode } = stateContext;
+  const [open, setOpen] = useState(false);
+  const node = useRef();
+  useOnClickOutside(node, () => setOpen(false));
+  return (
+    <Main className="container" mode={darkMode}>
+      <Navbar open={open} setOpen={setOpen} />
+      <div ref={node}>
+        <Menu open={open} setOpen={setOpen} />
+      </div>
+
+      {children}
+    </Main>
+  );
 }
 
 export default Layout;

src/components/Menu/Menu.component.jsx

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
+
+import { StateContext } from '../../context/State/state';
+
+const StyledMenu = styled.nav`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  border: 3px solid ${(props) => (props.mode ? '#ffffff' : '#303030')};
+  height: 100vh;
+  text-align: left;
+  padding: 2rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(-100%);
+  transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(-100%)')};
+  z-index: 2;
+  background-color: ${(props) => (props.mode ? '#303030' : '#ffffff')};
+  color: ${(props) => (props.mode ? '#ccc' : '#303030')};
+`;
+
+const Span = styled.span`
+  cursor: pointer;
+`;
+
+const Menu = ({ open }) => {
+  const stateContext = useContext(StateContext);
+  const history = useHistory();
+  const {
+    darkMode,
+    video: { openedDetails },
+    toggleOpenedDetails,
+  } = stateContext;
+
+  return (
+    <StyledMenu mode={darkMode ? 1 : 0} open={open}>
+      <Span
+        onClick={() => {
+          history.push('/');
+          if (openedDetails) {
+            toggleOpenedDetails(openedDetails);
+          }
+        }}
+      >
+        HOME
+      </Span>
+      <Span
+        onClick={() => {
+          history.push('/favorites');
+          if (openedDetails) {
+            toggleOpenedDetails(openedDetails);
+          }
+        }}
+      >
+        FAVORITES
+      </Span>
+    </StyledMenu>
+  );
+};
+
+export default Menu;

src/components/Menu/Menu.test.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Menu from './index';
+
+import { ConfigProvider } from '../../context/State/state';
+
+const valueContextMock = {
+  darkMode: false,
+  video: {
+    openedDetails: false,
+  },
+};
+
+beforeEach(() => {
+  render(
+    <ConfigProvider value={valueContextMock}>
+      <Menu />
+    </ConfigProvider>
+  );
+});
+
+describe('Menu', () => {
+  test('should render Home span', async () => {
+    const spanLabel = screen.queryByText('HOME');
+    expect(spanLabel).toBeInTheDocument();
+  });
+
+  test('should render favorites span', async () => {
+    const spanLabel = screen.queryByText('FAVORITES');
+    expect(spanLabel).toBeInTheDocument();
+  });
+});

src/components/Menu/index.js

@@ -0,0 +1 @@
+export { default } from './Menu.component';

src/components/Navbar/Navbar.component.jsx

@@ -0,0 +1,85 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+
+import Profile from '../Profile';
+import Toggle from '../Toggle';
+
+import { StateContext } from '../../context/State/state';
+import { useAuth } from '../../providers/Auth';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  width: 100vw;
+  background-color: ${(props) => (props.mode ? '#556cd6' : '#1c5476')};
+  color: ${(props) => (props.mode ? '#ccc' : '#303030')};
+`;
+
+const MenuBurger = styled.div`
+  margin-right: 100px;
+  margin-left: 24px;
+  padding-top: 0;
+  padding-bottom: 0;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+
+  @media (max-width: 768px) {
+    margin-right: 20px;
+    margin-left: 12px;
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+  }
+`;
+
+const Search = styled.div`
+  margin-right: auto;
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+  height: 32.5px;
+
+  &::placeholder {
+    font-family: Arial, Helvetica, sans-serif; // <Thing> when hovered
+  }
+`;
+
+const Navbar = ({ open, setOpen }) => {
+  const stateContext = useContext(StateContext);
+  const { authenticated } = useAuth();
+  const { handleSearch, darkMode } = stateContext;
+
+  return (
+    <Container mode={darkMode ? 1 : 0}>
+      {authenticated ? (
+        <>
+          <MenuBurger onClick={() => setOpen(!open)}>
+            <svg
+              className="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path fill="#ffffff" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+            </svg>
+          </MenuBurger>
+          <Search>
+            <SearchInput type="search" placeholder="search..." onChange={handleSearch} />
+          </Search>
+          <Toggle />
+        </>
+      ) : undefined}
+      <Profile />
+    </Container>
+  );
+};
+
+export default Navbar;