Feature/mini challenge3

coverage.txt

@@ -0,0 +1,44 @@
+------------------------------|----------|----------|----------|----------|-------------------|
+File                          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
+------------------------------|----------|----------|----------|----------|-------------------|
+All files                     |    61.61 |       50 |       50 |    62.16 |                   |
+ components/Account           |    78.57 |       50 |       40 |    84.62 |                   |
+  index.jsx                   |       70 |       50 |       25 |    77.78 |             23,26 |
+  styled.js                   |      100 |       50 |      100 |      100 |                14 |
+ components/App               |        0 |      100 |        0 |        0 |                   |
+  App.component.jsx           |        0 |      100 |        0 |        0 | 14,15,17,18,19,23 |
+ components/Layout            |      100 |      100 |      100 |      100 |                   |
+  index.jsx                   |      100 |      100 |      100 |      100 |                   |
+  styled.js                   |      100 |      100 |      100 |      100 |                   |
+ components/NavBar            |    90.91 |      100 |       50 |    90.91 |                   |
+  index.jsx                   |       75 |      100 |       50 |       75 |                22 |
+  styled.js                   |      100 |      100 |      100 |      100 |                   |
+ components/SearchInput       |    92.31 |      100 |       75 |    92.31 |                   |
+  index.jsx                   |    91.67 |      100 |       75 |    91.67 |                21 |
+  styled.js                   |      100 |      100 |      100 |      100 |                   |
+ components/SideMenu          |    92.31 |       50 |       75 |    92.31 |                   |
+  index.jsx                   |       80 |       50 |       50 |       80 |                22 |
+  styled.js                   |      100 |       50 |      100 |      100 |              9,26 |
+ components/VideoCard         |      100 |      100 |      100 |      100 |                   |
+  index.jsx                   |      100 |      100 |      100 |      100 |                   |
+  styled.js                   |      100 |      100 |      100 |      100 |                   |
+ components/VideoGrid         |      100 |      100 |      100 |      100 |                   |
+  index.jsx                   |      100 |      100 |      100 |      100 |                   |
+  styled.js                   |      100 |      100 |      100 |      100 |                   |
+ components/VideosList        |        0 |        0 |        0 |        0 |                   |
+  index.jsx                   |        0 |        0 |        0 |        0 |          5,6,9,13 |
+ components/VideosListElement |        0 |      100 |        0 |        0 |                   |
+  index.jsx                   |        0 |      100 |        0 |        0 |               4,5 |
+  styled.js                   |        0 |      100 |        0 |        0 |      3,9,10,20,26 |
+ lib                          |      100 |       50 |      100 |      100 |                   |
+  youTubeApi.js               |      100 |       50 |      100 |      100 |               7,9 |
+ pages/Home                   |      100 |      100 |      100 |      100 |                   |
+  Home.page.jsx               |      100 |      100 |      100 |      100 |                   |
+  styled.js                   |      100 |      100 |      100 |      100 |                   |
+ pages/Login                  |        0 |      100 |        0 |        0 |                   |
+  Login.page.jsx              |        0 |      100 |        0 |        0 |   8,9,12,13,14,17 |
+ pages/VideoDetail            |        0 |        0 |        0 |        0 |                   |
+  VideoDetail.page.jsx        |        0 |        0 |        0 |        0 |... 20,21,23,24,27 |
+  index.js                    |        0 |        0 |        0 |        0 |                   |
+  styled.js                   |        0 |      100 |      100 |        0 |   3,7,18,27,31,38 |
+------------------------------|----------|----------|----------|----------|-------------------|

package.json

@@ -3,14 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@styled-icons/material-outlined": "^10.28.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "jest-fetch-mock": "^3.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-player": "^2.9.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Account/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { AccountIcon, Dropdown, Button } from './styled';
+import { AUTH_STORAGE_KEY } from '../../utils/constants';
+import { storage } from '../../utils/storage';
+import { useAuth } from '../../providers/Auth';
+
+const Account = () => {
+  const { logout } = useAuth();
+  const [openDrop, setOpenDrop] = React.useState(false);
+  const isLogged = storage.get(AUTH_STORAGE_KEY);
+  const logIn = (
+    <Link to="/login">
+      <span>LogIn</span>
+    </Link>
+  );
+  const logOut = <Button onClick={() => logout()}>LogOut</Button>;
+
+  return (
+    <div>
+      <AccountIcon
+        onClick={() => {
+          setOpenDrop(!openDrop);
+        }}
+      />
+      <Dropdown openDrop={openDrop} onClick={() => setOpenDrop(!openDrop)}>
+        {isLogged ? logOut : logIn}
+      </Dropdown>
+    </div>
+  );
+};
+
+export default Account;

src/components/Account/styled.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { AccountCircle } from '@styled-icons/material-outlined/AccountCircle';
+
+const AccountIcon = styled(AccountCircle)`
+  color: white;
+  width: 50px;
+  height: 50px;
+  float: right;
+  margin-left: 30px;
+`;
+
+const Dropdown = styled.ul`
+  position: absolute;
+  display: ${({ openDrop }) => (openDrop ? 'block' : 'none')};
+  padding-inline-start: 0px;
+  background-color: lightgray;
+  padding: 8px;
+  margin-top: 40px;
+`;
+
+const Button = styled.button`
+  box-sizing: inherit;
+  background-color: transparent;
+  font-size: 19px;
+  color: white;
+  font-weight: bold;
+  border: none;
+`;
+
+export { AccountIcon, Dropdown, Button };

src/components/App/App.component.jsx

@@ -1,58 +1,46 @@
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import AuthProvider from '../../providers/Auth';
+import NavBar from '../NavBar';
+import Layout from '../Layout';
 import HomePage from '../../pages/Home';
 import LoginPage from '../../pages/Login';
+import VideoDetailPage from '../../pages/VideoDetail';
 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';
-
-function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
+import { fetchVideos } from '../../lib/youTubeApi';
 
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
+export default function App() {
+  const [word, setWord] = React.useState('wizeline');
+  const [videos, setVideos] = React.useState([]);
 
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
-
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+  React.useEffect(() => {
+    fetchVideos(word).then((videosData) => {
+      setVideos(videosData.items);
+    });
+  }, [word]);
 
   return (
     <BrowserRouter>
       <AuthProvider>
+        <NavBar word={word} setWord={setWord} />
         <Layout>
           <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
             <Route exact path="/login">
               <LoginPage />
             </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
+            <Route exact path="/">
+              <HomePage videos={videos} />
+            </Route>
+            <Route exact path="/:id">
+              <VideoDetailPage videos={videos} />
+            </Route>
             <Route path="*">
               <NotFound />
             </Route>
           </Switch>
-          <Fortune />
         </Layout>
       </AuthProvider>
     </BrowserRouter>
   );
 }
-
-export default App;

src/components/Layout/Layout.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Layout from '.';
+
+describe('Layout', () => {
+  const children = <h1>hello</h1>;
+
+  beforeEach(() => {
+    render(<Layout>{children}</Layout>);
+  });
+
+  it('renders all children', () => {
+    const layout = screen.getByTestId('layout');
+    expect(layout.children.length).toEqual(1);
+    expect(screen.getByText('hello').tagName).toBe('H1');
+  });
+});

src/components/Layout/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Container } from './styled';
+
+function Layout({ children }) {
+  return (
+    <Container className="container" data-testid="layout">
+      {children}
+    </Container>
+  );
+}
+
+export default Layout;

src/components/Layout/styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Container = styled.main`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export { Container };

src/components/NavBar/NavBar.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import NavBar from '.';
+import AuthProvider from '../../providers/Auth';
+
+describe('NavBar', () => {
+  beforeEach(() => {
+    render(
+      <BrowserRouter>
+        <AuthProvider>
+          <NavBar />
+        </AuthProvider>
+      </BrowserRouter>
+    );
+  });
+
+  it('renders NavBar and its elements', () => {
+    const navBar = screen.getByTestId('navBar');
+    expect(navBar.children.length).toEqual(1);
+    const navContent = screen.getByTestId('navContent');
+    expect(navContent.children.length).toEqual(4);
+  });
+});

src/components/NavBar/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import SideMenu from '../SideMenu';
+import SearchInput from '../SearchInput';
+import Account from '../Account';
+import {
+  Nav,
+  NavContent,
+  MenuIcon,
+  CheckBoxWrapper,
+  CheckBoxLabel,
+  CheckBox,
+  NavElementsWrapper,
+} from './styled';
+
+const Navbar = ({ word, setWord }) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Nav data-testid="navBar">
+      <NavContent data-testid="navContent">
+        <div>
+          <MenuIcon open={open} onClick={() => setOpen(!open)} />
+        </div>
+        <SideMenu open={open} setOpen={setOpen} />
+        <SearchInput initSearchWord={word} onChange={setWord} />
+        <NavElementsWrapper className="nav-links">
+          <CheckBoxWrapper>
+            <CheckBox id="checkbox" type="checkbox" />
+            <CheckBoxLabel htmlFor="checkbox" />
+          </CheckBoxWrapper>
+          <Account />
+        </NavElementsWrapper>
+      </NavContent>
+    </Nav>
+  );
+};
+
+export default Navbar;