Mini challenge4

.eslintrc

@@ -3,7 +3,7 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#netlify
+
+.netlify

package.json

@@ -8,9 +8,11 @@
     "@testing-library/user-event": "^12.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.2.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.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -34,6 +36,9 @@
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"
   },
+  "resolutions": {
+    "styled-components": "^5"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/App/App.component.jsx

@@ -1,57 +1,52 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useState } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
+import { ThemeProvider } from 'styled-components';
 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 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}%`);
-    }
-
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
-
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+import { GlobalStyle, themes } from '../../globalStyles';
+import VideoPlayer from '../../pages/VideoPlayer';
+import ThemeContext from '../Context/ThemeContext';
 
+function App() {
+  const [theme, setTheme] = useState('light');
   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>
+    <>
+      <ThemeProvider theme={themes[theme]}>
+        <GlobalStyle />
+        <BrowserRouter>
+          <AuthProvider>
+            <Layout>
+              <ThemeContext.Provider value={{ theme, setTheme }}>
+                <Switch>
+                  <Route exact path="/">
+                    <HomePage />
+                  </Route>
+                  <Route path="/watch">
+                    <VideoPlayer />
+                  </Route>
+                  <Route exact path="/login">
+                    <LoginPage />
+                  </Route>
+                  <Private exact path="/secret">
+                    <SecretPage />
+                  </Private>
+                  <Route path="*">
+                    <NotFound />
+                  </Route>
+                </Switch>
+              </ThemeContext.Provider>
+            </Layout>
+          </AuthProvider>
+        </BrowserRouter>
+      </ThemeProvider>
+    </>
   );
 }
 

src/components/CardVideo/CardVideo.component.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import LinkVideo from '../Link.element';
+import {
+  CardVideoDisplayerContainer,
+  CardVideoContainer,
+  CardVideoImage,
+  CardVideoBottom,
+} from './CardVideo.elements';
+
+export function CardVideo({ video, id }) {
+  const urlVideo = `/watch?v=${id}`;
+
+  return (
+    <>
+      <LinkVideo to={urlVideo}>
+        <CardVideoContainer>
+          <CardVideoImage
+            src={
+              video.snippet.thumbnails.high.url
+                ? video.snippet.thumbnails.high.url
+                : video.snippet.thumbnails.default.url
+            }
+          />
+          <CardVideoBottom
+            title={video.snippet.title}
+            description={video.snippet.description}
+          />
+        </CardVideoContainer>
+      </LinkVideo>
+    </>
+  );
+}
+
+function CardVideoDisplayer({ videos }) {
+  const [listVideos, setListVideo] = useState();
+
+  useEffect(() => {
+    if (videos) {
+      setListVideo(
+        videos.map((video) => (
+          <CardVideo id={video.id.videoId} key={video.etag} video={video} />
+        ))
+      );
+    }
+  }, [videos]);
+
+  return (
+    <>
+      <CardVideoDisplayerContainer>{listVideos}</CardVideoDisplayerContainer>
+    </>
+  );
+}
+
+export default CardVideoDisplayer;

src/components/CardVideo/CardVideo.elements.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const CardVideoDisplayerContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  position: absolute;
+  justify-content: center;
+  padding-bottom: 2rem;
+
+  top: ${(props) => props.theme.navbar_height};
+  left: ${(props) => props.theme.sidemenu_width};
+
+  width: calc(100vw - ${(props) => props.theme.sidemenu_width});
+`;
+
+export const CardVideoContainer = styled.div`
+  width: calc((100vw - ${({ theme }) => theme.sidemenu_width}) / 1 - 4rem - 0.01px);
+  aspect-ratio: 16/14;
+  margin-top: 2rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+
+  @media (min-width: 750px) {
+    width: calc((100vw - ${({ theme }) => theme.sidemenu_width}) / 2 - 4rem - 0.01px);
+  }
+
+  @media (min-width: 1000px) {
+    width: calc((100vw - ${({ theme }) => theme.sidemenu_width}) / 3 - 4rem - 0.01px);
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const CardVideoImage = styled.img`
+  width: 100%;
+  aspect-ratio: 16/9;
+  height: auto;
+`;
+
+const CardVideoBottomContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  aspect-ratio: 16/5;
+  align-items: center;
+  justify-content: center;
+`;
+
+const CardVideoTitle = styled.h2`
+  color: ${(props) => props.theme.text_color};
+  font-size: 1.2rem;
+  padding: 0.5rem 0.3rem;
+  text-align: center;
+`;
+
+const CardVideoDescription = styled.p`
+  color: ${(props) => props.theme.text_color};
+
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+`;
+
+export function CardVideoBottom({ title, description }) {
+  function trucateText(text) {
+    const maxLength = 50;
+    return text.length <= maxLength ? text : `${text.substring(0, maxLength)}...`;
+  }
+
+  return (
+    <>
+      <CardVideoBottomContainer>
+        <CardVideoTitle>{title}</CardVideoTitle>
+        <CardVideoDescription>{trucateText(description)}</CardVideoDescription>
+      </CardVideoBottomContainer>
+    </>
+  );
+}

src/components/CardVideo/CardVideo.test.js

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import CardVideoDisplayer from './CardVideo.component';
+
+describe('navbar', () => {
+  beforeEach(() => {
+    const videos = [
+      {
+        etag: 'sadlkjsakdljsa',
+        snippet: {
+          title: 'Wizeline',
+          description: 'hlksjdakjskldja asjdaks',
+          thumbnails: {
+            high: {
+              url:
+                'https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo',
+            },
+          },
+        },
+      },
+    ];
+
+    render(<CardVideoDisplayer videos={videos} />);
+  });
+
+  test('should contains a title', () => {
+    const title = screen.queryByText('Wizeline');
+
+    expect(title).toBeInTheDocument();
+  });
+
+  test('should contains a img', () => {
+    const img = screen.queryByText('hlksjdakjskldja asjdaks');
+
+    expect(img).toBeInTheDocument();
+  });
+});

src/components/CardVideo/index.js

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

src/components/Context/ThemeContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeContext = createContext({});
+
+export default ThemeContext;

src/components/Link.element.jsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const LinkVideo = styled(Link)`
+  text-decoration: none;
+`;
+
+export default LinkVideo;

src/components/Navbar/Navbar.component.jsx

@@ -0,0 +1,26 @@
+import React, { createRef } from 'react';
+import { useHistory } from 'react-router';
+import { Nav, IconLogo, SearchBar, ProfileImg } from './Navbar.elements';
+
+function Navbar() {
+  const history = useHistory();
+
+  const inputRef = createRef();
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    history.push(`/?q=${inputRef.current.value}`);
+  };
+
+  return (
+    <>
+      <Nav>
+        <IconLogo />
+        <SearchBar inputRef={inputRef} handleSubmit={handleSubmit} />
+        <ProfileImg src="https://bigosvaap.github.io/img/foca.webp" />
+      </Nav>
+    </>
+  );
+}
+
+export default Navbar;