Challenge 5

.vscode/launch.json

@@ -0,0 +1,7 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": []
+}

package.json

@@ -26,6 +26,7 @@
     "coverage": "yarn test --coverage --watchAll=false"
   },
   "devDependencies": {
+    "@testing-library/react-hooks": "^5.1.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",

src/api/auth.js

@@ -0,0 +1,19 @@
+// login.api.js
+
+const mockedUser = {
+  id: '123',
+  name: 'Wizeline',
+  avatarUrl:
+    'https://media.glassdoor.com/sqll/868055/wizeline-squarelogo-1473976610815.png',
+};
+
+export default function loginApi(username, password) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (username === 'wizeline' && password === 'Rocks!') {
+        return resolve(mockedUser);
+      }
+      return reject(new Error('Username or password invalid'));
+    }, 500);
+  });
+}

src/api/youtube.js

@@ -2,11 +2,18 @@ import axios from 'axios';
 
 const KEY = process.env.REACT_APP_YOUTUBE_KEY;
 
-export default axios.create({
+export const bySnippet = axios.create({
   baseURL: 'https://www.googleapis.com/youtube/v3/',
   params: {
     part: 'snippet',
     maxResults: 10,
     key: KEY,
   },
 });
+export const byContentDetail = axios.create({
+  baseURL: 'https://www.googleapis.com/youtube/v3/',
+  params: {
+    part: 'contentDetail',
+    key: KEY,
+  },
+});

src/components/App/App.component.jsx

@@ -1,42 +1,27 @@
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 import { Switch, Route, HashRouter } from 'react-router-dom';
 
 import AuthProvider from '../../providers/Auth';
 import HomePage from '../../pages/Home';
 import LoginPage from '../../pages/Login';
 import NotFound from '../../pages/NotFound';
 import Layout from '../Layout';
-import { random } from '../../utils/fns';
 import VideoDetail from '../../pages/VideoDetail/VideoDetail';
 import DetailContextProvider from '../../providers/Detail/Detail.provider';
 import NavigationMenu from '../NavigationMenu/NavigationMenu';
 import { ThemeProvider } from 'styled-components';
 import { dark, light } from './../../themes/themes';
 import { GlobalStyles } from '../GlobalStyles/GlobalStyles';
 import useGlobal from '../../hooks/useGlobal';
+import ProtectedRoute from '../ProtectedRoute/ProtectedRoute';
+import Favorites from '../../pages/Favorites/Favorites';
+import FavoriteDetail from '../../pages/FavoriteDetail/FavoriteDetail';
 
 function App() {
   const { globalState } = useGlobal(),
     getTheme = (darkModeEnabled) => {
       return darkModeEnabled ? dark : light;
     };
-  useLayoutEffect(() => {
-    const { body } = document;
-
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
-
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
-
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
 
   return (
     <ThemeProvider theme={getTheme(globalState.darkModeEnabled)}>
@@ -49,14 +34,26 @@ function App() {
               <Route exact path="/">
                 <HomePage />
               </Route>
-              <Route exact path="/detail">
+              <Route exact path="/detail/:id">
                 <DetailContextProvider>
                   <VideoDetail />
                 </DetailContextProvider>
               </Route>
               <Route exact path="/login">
                 <LoginPage />
               </Route>
+              <ProtectedRoute
+                path="/favorites"
+                isAuthenticated={globalState.authenticated}
+                Component={Favorites}
+              />
+              <DetailContextProvider>
+                <ProtectedRoute
+                  path="/favoriteDetail/:id"
+                  isAuthenticated={globalState.authenticated}
+                  Component={FavoriteDetail}
+                />
+              </DetailContextProvider>
               <Route path="*">
                 <NotFound />
               </Route>

src/components/FavoriteButton/FavoriteButton.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import useDetail from '../../hooks/useDetail';
+import useGlobal from '../../hooks/useGlobal';
+import { Button } from './styled';
+
+export default function FavoriteButton({ video }) {
+  const {
+    globalState,
+    videoIsInFavorites,
+    addToFavorites,
+    removeFromFavorites,
+  } = useGlobal();
+  const { detailState } = useDetail();
+  const [buttonMessage, setButtonMessage] = useState('');
+  const handleClick = () => {
+    if (videoIsInFavorites(video)) {
+      removeFromFavorites(video);
+    } else {
+      addToFavorites(video);
+    }
+  };
+  useEffect(() => {
+    if (videoIsInFavorites(video)) {
+      setButtonMessage('Remove from Favorites');
+    } else {
+      setButtonMessage('Add to Favorites');
+    }
+  }, [globalState.favorites, detailState.currentVideo]);
+  return (
+    <Button onClick={handleClick}>
+      <p>
+        {buttonMessage} <FaStar />
+      </p>
+    </Button>
+  );
+}

src/components/FavoriteButton/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.secondary};
+  color: ${({ theme }) => theme.main};
+  cursor: pointer;
+  padding: 0.2rem;
+  margin-left: 0.5rem;
+  & p {
+    margin: 0;
+  }
+`;
+
+export { Button };

src/components/NavigationMenu/NavigationMenu.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import useGlobal from '../../hooks/useGlobal';
 import { Header, Wrapper, List, Element, NavLink } from './styled';
 
 export default function () {
-  const { globalState } = useGlobal();
+  const { globalState, closeNavigation } = useGlobal();
   return (
-    <Wrapper open={globalState.isMenuOpen}>
+    <Wrapper open={globalState.isMenuOpen} onBlur={closeNavigation}>
       <Header>Menu</Header>
       <List>
         <Element>
           <NavLink to="/">Home</NavLink>
+          {globalState.authenticated ? <NavLink to="/favorites">Favorites</NavLink> : ''}
         </Element>
       </List>
     </Wrapper>

src/components/ProfileButton/ProfileButton.jsx

@@ -1,13 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FaUser } from 'react-icons/fa';
-import { Button } from './styled';
+import useGlobal from '../../hooks/useGlobal';
+import { Button, ToggleWrapper, ButtonWrapper, Option, NavLink, Avatar } from './styled';
 
 function ProfileButton() {
-  return (
-    <Button>
-      <FaUser />
-    </Button>
-  );
+  const [visible, setVisible] = useState(false),
+    { globalState, logout } = useGlobal();
+  let authenticatedOptions = <Option onClick={logout}>Logout</Option>,
+    guestOptions = (
+      <Option>
+        <NavLink to="/login">Login</NavLink>
+      </Option>
+    ),
+    profileButton = (
+      <ButtonWrapper onBlur={() => setVisible(false)}>
+        <Button onClick={() => setVisible(!visible)}>
+          {globalState.authenticated ? (
+            <Avatar src={globalState.userData.avatarUrl} alt="User avatar" />
+          ) : (
+            <FaUser />
+          )}
+        </Button>
+        <ToggleWrapper visible={visible}>
+          {globalState.authenticated ? authenticatedOptions : guestOptions}
+        </ToggleWrapper>
+      </ButtonWrapper>
+    );
+  return profileButton;
 }
 
 export default ProfileButton;