Mini-Challenge 5: Routing

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.env
 
 # testing
 /coverage

package.json

@@ -6,16 +6,21 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "axios": "^0.21.1",
+    "dotenv": "^8.2.0",
+    "emotion-theming": "^11.0.0",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
     "react": "^16.13.1",
     "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",
+    "test": "react-scripts test --coverage --watchAll",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
@@ -30,6 +35,7 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.2.5",
+    "jest": "^24.9.0",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"

src/apis/YouTube.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+require('dotenv').config();
+const KEY = process.env.KEY_YT;
+export default axios.create({
+  baseURL: 'https://www.googleapis.com/youtube/v3/',
+  params: {
+    part: 'snippet',
+    maxResults: 15,
+    key: KEY,
+  },
+});

src/apis/login.api.js

@@ -0,0 +1,17 @@
+const mockedUser = {
+  id: '123',
+  name: 'Wizeline',
+  avatarUrl:
+    'https://media.glassdoor.com/sqll/868055/wizeline-squarelogo-1473976610815.png',
+};
+
+export default async 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/components/App/App.component.jsx

@@ -1,57 +1,52 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
-import AuthProvider from '../../providers/Auth';
+import React from 'react';
+import { HashRouter, Switch, Route } from 'react-router-dom';
 import HomePage from '../../pages/Home';
-import LoginPage from '../../pages/Login';
-import NotFound from '../../pages/NotFound';
-import SecretPage from '../../pages/Secret';
+import FavoriteVideosViewPage from '../../pages/FavoriteVideosView';
+import FavoriteVideoDetailsView from '../../pages/FavoriteVideoDetailsView';
 import Private from '../Private';
-import Fortune from '../Fortune';
+import NotFound from '../../pages/NotFound';
+import VideoDetailsView from '../../pages/VideoDetailsView';
 import Layout from '../Layout';
-import { random } from '../../utils/fns';
-
-function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
-
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
+import { useStoreContext } from '../../state/Store.provider';
+import GlobalStyle from './App.styles';
 
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
-
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+const lightTheme = {
+  body: '#fff',
+  a: '#000',
+  cardBodyHover: '#f8f7f7',
+};
+const darkTheme = {
+  body: 'rgba(33, 33, 33, 0.98)',
+  a: '#fff',
+  cardBodyHover: '#353434',
+};
 
+function App() {
+  const { store } = useStoreContext();
+  const { theme } = store;
   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>
+    <HashRouter>
+      <GlobalStyle theme={theme === 'light' ? lightTheme : darkTheme} />
+      <Layout>
+        <Switch>
+          <Route exact path="/">
+            <HomePage />
+          </Route>
+          <Route path="/video/:id">
+            <VideoDetailsView />
+          </Route>
+          <Private exact path="/favorites">
+            <FavoriteVideosViewPage />
+          </Private>
+          <Private path="/favorites/:id">
+            <FavoriteVideoDetailsView />
+          </Private>
+          <Route path="*">
+            <NotFound />
+          </Route>
+        </Switch>
+      </Layout>
+    </HashRouter>
   );
 }
 

src/components/App/App.styles.jsx

@@ -0,0 +1,83 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  html {
+    font-size: 1.125rem;
+    line-height: 1.6;
+    font-weight: 400;
+    font-family: sans-serif;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+  div{
+    color: ${(props) => props.theme.a};
+  }
+  .form-group {  background-color: ${(props) => props.theme.body};}
+  #cardBody{
+    box-shadow: ${(props) => props.theme.a} 1px 1px 0, ${(props) =>
+  props.theme.a} 2px 2px 0, ${(props) => props.theme.a} 3px 3px 0, ${(props) =>
+  props.theme.a} 4px 4px 0,
+      ${(props) => props.theme.a} 5px 5px 0, ${(props) => props.theme.a} 6px 6px 0, ${(
+  props
+) => props.theme.a} 7px 7px 0, ${(props) => props.theme.a} 8px 8px 0;
+    :hover {
+      background-color: ${(props) => props.theme.cardBodyHover};
+      box-shadow: red 1px 1px 0, red 2px 2px 0, red 3px 3px 0, red 4px 4px 0, red 5px 5px 0,
+        red 6px 6px 0, red 7px 7px 0, red 8px 8px 0;
+    }
+  }
+  #relatedVideo{
+    :hover {
+      background-color: ${(props) => props.theme.cardBodyHover};
+    }
+  }
+  #menu{
+    :hover {
+      background-color: ${(props) => props.theme.a};
+      border-radius: 50%;
+    }
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: ${(props) => props.theme.body};
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  a {
+    text-decoration: none;
+    font-weight: bold;
+    color: ${(props) => props.theme.a};
+  }
+  .login {
+    color: ${(props) => props.theme.a};
+  }
+  a:active {
+    color: red;
+  }
+  .nav-menu {
+  background-color: ${(props) => props.theme.body};
+  width: 200px;
+  height: 100vh;
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  transition: 850ms;
+}
+
+.nav-menu.active {
+  left: 0;
+  transition: 350ms;
+}
+
+`;
+
+export default GlobalStyle;

src/components/App/App.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import App from './App.component';
+import StoreProvider from '../../state/Store.provider';
+import { render, screen, fireEvent } from '@testing-library/react';
+describe('App', () => {
+  beforeEach(() => {
+    render(
+      <StoreProvider>
+        <App />
+      </StoreProvider>
+    );
+  });
+  it('Rendiring the home page ', () => {
+    expect(screen.getByTestId('location-home')).toBeInTheDocument();
+  });
+  test('should change to dark theme ', () => {
+    fireEvent.click(screen.getByRole('checkbox'));
+    expect(screen.getByTestId('darkTheme')).toBeInTheDocument();
+  });
+});

src/components/Card/Card.component.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CardBody, ImageCard, WraperText, Title, Description } from './Card.styles';
+
+function Card({ image, title, description }) {
+  return (
+    <CardBody id="cardBody">
+      <ImageCard imageUrl={image}></ImageCard>
+      <WraperText>
+        <Title>{title}</Title>
+        <Description>{description}</Description>
+      </WraperText>
+    </CardBody>
+  );
+}
+
+export default Card;

src/components/Card/Card.styles.jsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+const CardBody = styled.div`
+  width: 100%;
+  height: 20rem;
+  cursor: pointer;
+  overflow: hidden;
+`;
+const ImageCard = styled.div`
+  width: 100%;
+  height: 10rem;
+  background-image: url(${(props) => props.imageUrl});
+  background-position: center;
+  background-repeat: no-repeat;
+`;
+const WraperText = styled.div`
+  padding: 0.5rem;
+`;
+const Title = styled.div`
+  font-weight: 600;
+  font-size: 1.1rem;
+`;
+const Description = styled.div`
+  font-size: 0.7rem;
+`;
+
+export { CardBody, ImageCard, WraperText, Title, Description };

src/components/Card/Card.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Card from './Card.component';
+
+describe('Card', () => {
+  beforeEach(() => {
+    render(
+      <Card
+        image="https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo"
+        title="Test title"
+        description="Test description"
+      ></Card>
+    );
+  });
+  test('should contains a title', () => {
+    expect(screen.getByText(/title/i)).toBeInTheDocument();
+  });
+  test('should contains a description', () => {
+    expect(screen.getByText('Test description')).toBeInTheDocument();
+  });
+});

src/components/Card/index.js

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

src/components/Cards/Cards.component.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Card from '../../components/Card';
+import { useLocation, Link } from 'react-router-dom';
+function Cards(props) {
+  const location = useLocation();
+  const route = location.pathname;
+  if (props.videos === 'error') {
+    return (
+      <>
+        <h1>You haven't added any video to your favorites yet</h1>
+      </>
+    );
+  }
+  const filteredVideos = props.videos.items.filter(
+    (video) => video.id.kind === 'youtube#video'
+  );
+  var path = '';
+  if (route === '/') {
+    path = 'video';
+  } else {
+    path = 'favorites';
+  }
+  return (
+    <>
+      {filteredVideos.map((video) => {
+        return (
+          <Link
+            key={video.id.videoId}
+            to={{
+              pathname: `/${path}/${video.id.videoId}`,
+              state: {
+                videoTitle: video.snippet.title,
+                videoDescription: video.snippet.description,
+                image: video.snippet.thumbnails.high.url,
+              },
+            }}
+          >
+            <Card
+              image={video.snippet.thumbnails.high.url}
+              title={video.snippet.title}
+              description={video.snippet.description}
+            ></Card>
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+export default Cards;