Mini-Challenge 4: State management

.gitignore

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

package.json

@@ -6,16 +6,20 @@
     "@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",
     "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 +34,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/components/App/App.component.jsx

@@ -1,56 +1,112 @@
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 import { BrowserRouter, Switch, Route } 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 SecretPage from '../../pages/Secret';
-import Private from '../Private';
-import Fortune from '../Fortune';
+import VideoDetailsView from '../../pages/VideoDetailsView';
 import Layout from '../Layout';
-import { random } from '../../utils/fns';
+import { createGlobalStyle } from 'styled-components';
+import { useStoreContext } from '../../state/Store.provider';
 
-function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
+const lightTheme = {
+  body: '#fff',
+  a: '#000',
+  cardBodyHover: '#f8f7f7',
+};
+const darkTheme = {
+  body: 'rgba(33, 33, 33, 0.98)',
+  a: '#fff',
+  cardBodyHover: '#353434',
+};
+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);
+}
 
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
+div{
+  color: ${(props) => props.theme.a};
+}
 
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
+#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};
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
 
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+body {
+  margin: 0;
+  padding: 0;
+  background-color: ${(props) => props.theme.body};
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
+.separator::before {
+  content: '•';
+  color:${(props) => props.theme.body};
+  padding: 0.4rem;
+}
+
+a {
+  text-decoration: none;
+  font-weight: bold;
+  color: ${(props) => props.theme.a};
+}
+
+a:active {
+  color: red;
+}
+
+`;
+
+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>
+      <GlobalStyle theme={theme === 'light' ? lightTheme : darkTheme} />
+      <Layout>
+        <Switch>
+          <Route exact path="/">
+            <HomePage />
+          </Route>
+          <Route exact path="/login">
+            <LoginPage />
+          </Route>
+          <Route path="/:id">
+            <VideoDetailsView />
+          </Route>
+          <Route path="*">
+            <NotFound />
+          </Route>
+        </Switch>
+      </Layout>
     </BrowserRouter>
   );
 }

src/components/App/App.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import App from './App.component';
+import StoreProvider from '../../state/Store.provider';
+import { render, screen } from '@testing-library/react';
+describe('App', () => {
+  it('Rendiring the home page ', () => {
+    render(
+      <StoreProvider>
+        <App />
+      </StoreProvider>
+    );
+    expect(screen.getByTestId('location-home')).toBeInTheDocument();
+  });
+});

src/components/Card/Card.component.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+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;
+`;
+
+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.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,34 @@
+import React from 'react';
+import Card from '../../components/Card';
+import { Link } from 'react-router-dom';
+function Cards(props) {
+  const filteredVideos = props.videos.items.filter(
+    (video) => video.id.kind === 'youtube#video'
+  );
+  return (
+    <>
+      {filteredVideos.map((video) => {
+        return (
+          <Link
+            key={video.id.videoId}
+            to={{
+              pathname: `/${video.id.videoId}`,
+              state: {
+                videoTitle: video.snippet.title,
+                videoDescription: video.snippet.description,
+              },
+            }}
+          >
+            <Card
+              image={video.snippet.thumbnails.high.url}
+              title={video.snippet.title}
+              description={video.snippet.description}
+            ></Card>
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+export default Cards;

src/components/Cards/Cards.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Cards from './Cards.component';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('Cards', () => {
+  beforeEach(() => {
+    const video = {
+      items: [
+        {
+          kind: 'youtube#searchResult',
+          etag: '7VY0u60YdqamyHOCAufd7r6qTsQ',
+          id: {
+            kind: 'youtube#video',
+            videoId: 'HYyRZiwBWc8',
+          },
+          snippet: {
+            publishedAt: '2019-04-18T18:48:04Z',
+            channelId: 'UCPGzT4wecuWM0BH9mPiulXg',
+            title: 'Test title',
+            description:
+              'Wizeline continues to offer a Silicon Valley culture in burgeoning innovation hubs like Mexico and Vietnam. In 2018, our Guadalajara team moved into a ...',
+            thumbnails: {
+              default: {
+                url: 'https://i.ytimg.com/vi/HYyRZiwBWc8/default.jpg',
+                width: 120,
+                height: 90,
+              },
+              medium: {
+                url: 'https://i.ytimg.com/vi/HYyRZiwBWc8/mqdefault.jpg',
+                width: 320,
+                height: 180,
+              },
+              high: {
+                url: 'https://i.ytimg.com/vi/HYyRZiwBWc8/hqdefault.jpg',
+                width: 480,
+                height: 360,
+              },
+            },
+            channelTitle: 'Wizeline',
+            liveBroadcastContent: 'none',
+            publishTime: '2019-04-18T18:48:04Z',
+          },
+        },
+      ],
+    };
+    render(
+      <BrowserRouter>
+        <Cards videos={video} />
+      </BrowserRouter>
+    );
+  });
+  test('should contains a title corresponding to the card render', () => {
+    expect(screen.getByText(/title/i)).toBeInTheDocument();
+  });
+});

src/components/Cards/index.js

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