Feature/mini challenge5 - from challenge 4

package.json

@@ -3,7 +3,6 @@
   "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",

src/components/Account/index.jsx

@@ -4,6 +4,7 @@ import { AccountIcon, Dropdown, Button } from './styled';
 import { AUTH_STORAGE_KEY } from '../../utils/constants';
 import { storage } from '../../utils/storage';
 import { useAuth } from '../../providers/Auth';
+import user from '../../img/user.svg';
 
 const Account = () => {
   const { logout } = useAuth();
@@ -19,6 +20,7 @@ const Account = () => {
   return (
     <div>
       <AccountIcon
+        src={user}
         onClick={() => {
           setOpenDrop(!openDrop);
         }}

src/components/Account/styled.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
-import { AccountCircle } from '@styled-icons/material-outlined/AccountCircle';
 
-const AccountIcon = styled(AccountCircle)`
+const AccountIcon = styled.img`
   color: white;
   width: 50px;
   height: 50px;

src/components/App/App.component.jsx

@@ -7,18 +7,16 @@ import Layout from '../Layout';
 import HomePage from '../../pages/Home';
 import LoginPage from '../../pages/Login';
 import VideoDetailPage from '../../pages/VideoDetail';
+import FavoritesPage from '../../pages/Favorites';
 import NotFound from '../../pages/NotFound';
-import SearchWordContext from '../../state/SearchWordContext';
-import SearchWordReducer from '../../state/SearchWordReducer';
-import ThemeContext from '../../state/ThemeContext';
-import ThemeReducer from '../../state/ThemeReducer';
+import GlobalContext from '../../state/GlobalContext';
+import GlobalReducer from '../../state/GlobalReducer';
+import Private from '../Private';
 
 export default function App() {
   const [videos, setVideos] = React.useState([]);
-  const [state, dispatch] = useReducer(SearchWordReducer, {
+  const [state, dispatch] = useReducer(GlobalReducer, {
     word: 'Wizeline',
-  });
-  const [stateTheme, dispatchTheme] = useReducer(ThemeReducer, {
     theme: {
       navBar: '#3fc7cb',
       content: 'white',
@@ -29,27 +27,28 @@ export default function App() {
   return (
     <BrowserRouter>
       <AuthProvider>
-        <ThemeContext.Provider value={{ stateTheme, dispatchTheme }}>
-          <SearchWordContext.Provider value={{ state, dispatch }}>
-            <NavBar setVideos={setVideos} />
-            <Layout>
-              <Switch>
-                <Route exact path="/login">
-                  <LoginPage />
-                </Route>
-                <Route exact path="/">
-                  <HomePage videos={videos} />
-                </Route>
-                <Route exact path="/:id">
-                  <VideoDetailPage videos={videos} />
-                </Route>
-                <Route path="*">
-                  <NotFound />
-                </Route>
-              </Switch>
-            </Layout>
-          </SearchWordContext.Provider>
-        </ThemeContext.Provider>
+        <GlobalContext.Provider value={{ state, dispatch }}>
+          <NavBar setVideos={setVideos} />
+          <Layout>
+            <Switch>
+              <Route exact path="/">
+                <HomePage videos={videos} />
+              </Route>
+              <Route exact path="/login">
+                <LoginPage />
+              </Route>
+              <Private exact path="/favorites">
+                <FavoritesPage />
+              </Private>
+              <Route exact path="/video/:id">
+                <VideoDetailPage />
+              </Route>
+              <Route exact path="*">
+                <NotFound />
+              </Route>
+            </Switch>
+          </Layout>
+        </GlobalContext.Provider>
       </AuthProvider>
     </BrowserRouter>
   );

src/components/NavBar/index.jsx

@@ -12,15 +12,13 @@ import {
   NavElementsWrapper,
 } from './styled';
 import { fetchVideos } from '../../lib/youTubeApi';
-import SearchWordContext from '../../state/SearchWordContext';
-import ThemeContext from '../../state/ThemeContext';
+import GlobalContext from '../../state/GlobalContext';
 
 const Navbar = ({ setVideos }) => {
   const [checked, setChecked] = React.useState(false);
   const [open, setOpen] = React.useState(false);
-  const { state } = useContext(SearchWordContext);
-  const { stateTheme, dispatchTheme } = useContext(ThemeContext);
-  const { theme } = stateTheme;
+  const { state, dispatch } = useContext(GlobalContext);
+  const { theme } = state;
 
   React.useEffect(() => {
     fetchVideos(state.word).then((videosData) => {
@@ -31,21 +29,25 @@ const Navbar = ({ setVideos }) => {
   const changeHandler = () => {
     setChecked(!checked);
     if (!checked) {
-      dispatchTheme({
+      dispatch({
         type: 'SET_THEME',
         payload: {
-          navBar: '#556cd6',
-          content: '#303030',
-          text: 'white',
+          theme: {
+            navBar: '#556cd6',
+            content: '#303030',
+            text: 'white',
+          },
         },
       });
     } else {
-      dispatchTheme({
+      dispatch({
         type: 'SET_THEME',
         payload: {
-          navBar: '#3fc7cb',
-          content: 'white',
-          text: 'black',
+          theme: {
+            navBar: '#3fc7cb',
+            content: 'white',
+            text: 'black',
+          },
         },
       });
     }
@@ -55,7 +57,9 @@ const Navbar = ({ setVideos }) => {
     <Nav data-testid="navBar">
       <NavContent theme={theme} data-testid="navContent">
         <div>
-          <MenuIcon open={open} onClick={() => setOpen(!open)} />
+          <MenuIcon open={open} onClick={() => setOpen(!open)}>
+            =
+          </MenuIcon>
         </div>
         <SideMenu open={open} setOpen={setOpen} />
         <SearchInput />

src/components/NavBar/styled.js

@@ -1,10 +1,9 @@
 import styled from 'styled-components';
-import { Dehaze } from '@styled-icons/material-outlined/Dehaze';
 
-const MenuIcon = styled(Dehaze)`
+const MenuIcon = styled.p`
   color: white;
-  width: 50px;
-  height: 50px;
+  font-size: 80px;
+  margin-top: 60px;
 `;
 
 const Nav = styled.div`

src/components/SearchInput/index.jsx

@@ -1,17 +1,17 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router';
 import { Input } from './styled';
-import SearchWordContext from '../../state/SearchWordContext';
+import GlobalContext from '../../state/GlobalContext';
 
 const SearchInput = () => {
-  const { state, dispatch } = useContext(SearchWordContext);
+  const { state, dispatch } = useContext(GlobalContext);
   const [searchWord, setSearchWord] = React.useState(state.word);
   const history = useHistory();
 
   const triggerChange = () => {
     dispatch({
       type: 'SET_WORD',
-      payload: searchWord,
+      payload: { word: searchWord },
     });
 
     history.push('/');

src/components/SideMenu/index.jsx

@@ -3,15 +3,15 @@ import { Link } from 'react-router-dom';
 import { AUTH_STORAGE_KEY } from '../../utils/constants';
 import { storage } from '../../utils/storage';
 import { LinkText, ContainerMenu, SideMen, CloseBtn, Links, CloseIcon } from './styled';
-import ThemeContext from '../../state/ThemeContext';
+import GlobalContext from '../../state/GlobalContext';
 
 const SideMenu = ({ open, setOpen }) => {
   const isLogged = storage.get(AUTH_STORAGE_KEY);
-  const { stateTheme } = useContext(ThemeContext);
-  const { theme } = stateTheme;
+  const { state } = useContext(GlobalContext);
+  const { theme } = state;
 
   const favorites = (
-    <Link to={{ pathname: `/` }} onClick={() => setOpen(!open)}>
+    <Link to={{ pathname: `/favorites` }} onClick={() => setOpen(!open)}>
       <LinkText theme={theme}>
         <span role="img" aria-label="favorites">
           ⭐️
@@ -25,7 +25,7 @@ const SideMenu = ({ open, setOpen }) => {
     <ContainerMenu open={open} data-testid="sideMenu">
       <SideMen open={open} theme={theme}>
         <CloseBtn>
-          <CloseIcon onClick={() => setOpen(!open)} />
+          <CloseIcon onClick={() => setOpen(!open)}>X</CloseIcon>
         </CloseBtn>
         <Links>
           <Link to={{ pathname: `/` }} onClick={() => setOpen(!open)}>

src/components/SideMenu/styled.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Close } from '@styled-icons/material-outlined/Close';
 
 const ContainerMenu = styled.div`
   display: flex;
@@ -52,14 +51,15 @@ const LinkText = styled.p`
   }
 `;
 
-const CloseIcon = styled(Close)`
+const CloseIcon = styled.p`
+  font-size: 40px;
   color: lightgray;
   width: 50px;
   height: 50px;
 `;
 
 const CloseBtn = styled.div`
-  text-align-last: end;
+  float: right;
 `;
 
 const Links = styled.div`

src/components/VideoCard/index.jsx

@@ -1,15 +1,15 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { Card, CardImg, CardContent, CardTitle, CardDescription } from './styled';
-import ThemeContext from '../../state/ThemeContext';
+import GlobalContext from '../../state/GlobalContext';
 
-const VideoCard = ({ video }) => {
+const VideoCard = ({ video, videos }) => {
   const { snippet, id } = video;
-  const { stateTheme } = useContext(ThemeContext);
-  const { theme } = stateTheme;
+  const { state } = useContext(GlobalContext);
+  const { theme } = state;
 
   return (
-    <Link to={{ pathname: `/${id.videoId}`, state: { video } }}>
+    <Link to={{ pathname: `/video/${id.videoId}`, state: { video, videos } }}>
       <Card data-testid="card">
         <CardImg img={snippet.thumbnails.medium.url} />
         <CardContent>

src/components/VideoGrid/index.jsx

@@ -1,19 +1,19 @@
 import React, { useContext } from 'react';
 import VideoCard from '../VideoCard';
 import { Grid, Row, Col } from './styled';
-import ThemeContext from '../../state/ThemeContext';
+import GlobalContext from '../../state/GlobalContext';
 
 const VideoGrid = ({ videos }) => {
-  const { stateTheme } = useContext(ThemeContext);
-  const { theme } = stateTheme;
+  const { state } = useContext(GlobalContext);
+  const { theme } = state;
 
   return (
     <Grid theme={theme} data-testid="grid">
       <Row data-testid="row">
         {videos.map((video) =>
           video.id.videoId ? (
             <Col key={video.id.videoId}>
-              <VideoCard video={video} />
+              <VideoCard video={video} videos={videos} />
             </Col>
           ) : (
             ''

src/components/VideosListElement/index.jsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { ListElement, Image, Detail, Description } from './styled';
-import ThemeContext from '../../state/ThemeContext';
+import GlobalContext from '../../state/GlobalContext';
 
 const VideosListElement = ({ snippet }) => {
-  const { stateTheme } = useContext(ThemeContext);
-  const { theme } = stateTheme;
+  const { state } = useContext(GlobalContext);
+  const { theme } = state;
 
   return (
     <ListElement>

src/pages/Favorites/Favorites.page.jsx

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import { storage } from '../../utils/storage';
+import VideoGrid from '../../components/VideoGrid';
+import { Favorites } from './styled';
+import GlobalContext from '../../state/GlobalContext';
+
+function FavoritesPage() {
+  const { state } = useContext(GlobalContext);
+  const { theme } = state;
+  const videos = storage.get('favoriteList');
+
+  return (
+    <section>
+      <Favorites theme={theme}>Favorites</Favorites>
+      <VideoGrid videos={videos} />
+    </section>
+  );
+}
+
+export default FavoritesPage;

src/pages/Favorites/index.js

@@ -0,0 +1 @@
+export { default } from './Favorites.page';

src/pages/Favorites/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const Favorites = styled.div`
+  color: ${({ theme }) => theme.text};
+  flex-wrap: wrap;
+  align-content: center;
+  width: 100%;
+  text-align: -webkit-center;
+  padding-top: 30px;
+  font-size: 40px;
+  background-color: ${({ theme }) => theme.content};
+`;
+
+export { Favorites };