cvillanueva84 · jgarciacentraal · Jul 26, 2021 · Jul 26, 2021 · Jul 27, 2021 · Aug 2, 2021
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_API_KEY=AIzaSyCruBQW1jnCJftpdNWkTEQOecAzlaBqad0
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# enviroment
+
 # dependencies
 /node_modules
 /.pnp

diff --git a/package.json b/package.json
@@ -5,12 +5,15 @@
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^12.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-feather": "^2.0.9",
     "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 +37,16 @@
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"
   },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/serviceWorker.js",
+      "/src/index.js"
+    ],
+    "coverageReporters": [
+      "text"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/public/index.html b/public/index.html
@@ -21,6 +21,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <title>React App</title>
   </head>
   <body>

diff --git a/src/__test__/components/LoginBtn.test.jsx b/src/__test__/components/LoginBtn.test.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import LoginBtn from '../../components/LoginBtn/index';
+
+describe('LoginBtn component', () => {
+  test('show Icon SVG', () => {
+    render(<LoginBtn />);
+
+    const iconEl = screen.getByTestId('icon-svg');
+    expect(iconEl).toBeInTheDocument();
+  });
+});
diff --git a/src/__test__/components/Search.test.jsx b/src/__test__/components/Search.test.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Search from '../../components/Search/Search';
+
+describe('Search component', () => {
+  test('renders Search component', () => {
+    render(<Search />);
+
+    const inputEl = screen.getByTestId('search-input');
+    expect(inputEl).toBeInTheDocument();
+  });
+});
diff --git a/src/__test__/hooks/useFetch.test.jsx b/src/__test__/hooks/useFetch.test.jsx
@@ -0,0 +1,53 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useFetch } from '../../utils/hooks/useFetch';
+
+// import { mockVideos } from '../../mockData';
+
+const promiseControl = () => {
+  let response;
+  const promise = new Promise((resolve, reject) => {
+    response = { resolve, reject };
+  });
+  return { response, promise };
+};
+
+describe('Testing useFetch hooks', () => {
+  it('Testing loading state', async () => {
+    const { response, promise } = promiseControl();
+    global.fetch = jest.fn(() => promise);
+
+    const { result, waitForNextUpdate } = renderHook(() => useFetch('CHzlSGRvWPs', true));
+
+    expect(result.current.loading).toBe(true);
+    response.resolve();
+
+    await waitForNextUpdate();
+    expect(result.current.loading).toBe(false);
+  });
+
+  // it('Getting data successfully', async () => {
+  //   const { response, promise } = promiseControl();
+  //   global.fetch = jest.fn(() => promise);
+
+  //   const { result, waitForNextUpdate } = renderHook(() => useFetch('CHzlSGRvWPs', true));
+  //   const videos = mockVideos;
+  //   response.resolve({ json: () => ({ data: videos }) });
+
+  //   await waitForNextUpdate();
+  //   expect(result.current.videosRelated).toEqual({ data: videos });
+  // });
+
+  it('Getting an error during request', async () => {
+    global.fetch = jest.fn(() => {
+      return new Promise(() => {
+        const err = 'Network error';
+        throw err;
+      });
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => useFetch('CHzlSGRvWPs', true));
+    await waitForNextUpdate();
+    expect(result.current.error).toBe(true);
+  });
+});
diff --git a/src/__test__/pages/Home.test.jsx b/src/__test__/pages/Home.test.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import HomePage from '../../pages/Home/Home.page';
+
+describe('Home page', () => {
+  test('renders a title', () => {
+    render(<HomePage />);
+
+    const titleElement = screen.getByTestId('text-loading-home');
+    expect(titleElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
@@ -1,42 +1,38 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useState } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import AuthProvider from '../../providers/Auth';
 import HomePage from '../../pages/Home';
+import VideoPage from '../../pages/Video';
 import LoginPage from '../../pages/Login';
 import NotFound from '../../pages/NotFound';
 import SecretPage from '../../pages/Secret';
-import Private from '../Private';
-import Fortune from '../Fortune';
+import Header from '../Header/Header';
 import Layout from '../Layout';
-import { random } from '../../utils/fns';
-
-function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
+import Private from '../Private';
 
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
+// own hook
+import { useFetch } from '../../utils/hooks/useFetch';
 
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
+function App() {
+  const [param, setParam] = useState('wizeline');
+  const { videos, loading, error } = useFetch(param, true);
 
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+  const handleChange = (value) => {
+    setParam(value);
+  };
 
   return (
     <BrowserRouter>
       <AuthProvider>
         <Layout>
+          <Header handleChange={handleChange} />
           <Switch>
             <Route exact path="/">
-              <HomePage />
+              <HomePage data={{ videos, loading, error }} />
+            </Route>
+            <Route exact path="/video/:id">
+              <VideoPage />
             </Route>
             <Route exact path="/login">
               <LoginPage />
@@ -48,7 +44,6 @@ function App() {
               <NotFound />
             </Route>
           </Switch>
-          <Fortune />
         </Layout>
       </AuthProvider>
     </BrowserRouter>

diff --git a/src/components/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx
diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css
diff --git a/src/components/Fortune/index.js b/src/components/Fortune/index.js
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { HeaderContainer } from './Styles';
+import Search from '../Search/index';
+import ThemeBtn from '../ThemeBtn/index';
+import LoginBtn from '../LoginBtn/index';
+
+export default function Header({ handleChange }) {
+  return (
+    <HeaderContainer>
+      <Search handleChange={handleChange} />
+      <ThemeBtn />
+      <LoginBtn />
+    </HeaderContainer>
+  );
+}
diff --git a/src/components/Header/Styles.js b/src/components/Header/Styles.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const HeaderContainer = styled.nav`
+  width: 100%;
+  padding: 5px;
+  font-size: 18px;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  height: 60px;
+  background-color: #282d30;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -0,0 +1 @@
+export { default } from './Header';
diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx
@@ -1,9 +1,15 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import './Layout.styles.css';
 
+const MainDiv = styled.main`
+  width: 100vw;
+  height: 95vh;
+`;
+
 function Layout({ children }) {
-  return <main className="container">{children}</main>;
+  return <MainDiv>{children}</MainDiv>;
 }
 
 export default Layout;
diff --git a/src/components/ListRelativeVideos/List.jsx b/src/components/ListRelativeVideos/List.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { ListContainer, ListImg, ListDetail } from './Styles';
+
+export default function List({ items }) {
+  console.log(items);
+
+  return (
+    <>
+      {items &&
+        items.map((video) => (
+          <ListContainer key={video.id.videoId}>
+            <ListImg src={video.snippet.thumbnails.medium.url} alt="wizeline.jpg" />
+            <ListDetail>
+              <h5>{video.snippet.title}</h5>
+            </ListDetail>
+          </ListContainer>
+        ))}
+    </>
+  );
+}
diff --git a/src/components/ListRelativeVideos/Styles.js b/src/components/ListRelativeVideos/Styles.js
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ListImg = styled.img`
+  justify-content: center;
+  width: 100px;
+  height: 60px;
+`;
+
+export const ListDetail = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 2 1 100%;
+  h5 {
+    font-size: 14px;
+    margin: 2px 5px 1px 5px;
+    padding: 0px;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+`;
diff --git a/src/components/ListRelativeVideos/index.js b/src/components/ListRelativeVideos/index.js
@@ -0,0 +1 @@
+export { default } from './List';
diff --git a/src/components/LoginBtn/LoginBtn.jsx b/src/components/LoginBtn/LoginBtn.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { User } from 'react-feather';
+
+import { ButtonLgn } from './Styles';
+
+export default function LoginBtn() {
+  return (
+    <ButtonLgn>
+      <User data-testid="icon-svg" width={24} />
+    </ButtonLgn>
+  );
+}
diff --git a/src/components/LoginBtn/Styles.js b/src/components/LoginBtn/Styles.js
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const ButtonLgn = styled.button`
+  border: 2px solid #e8eef3;
+  border-radius: 30px;
+  cursor: pointer;
+  font-size: 10px;
+  justify-content: space-between;
+  margin: 0px 10px;
+  overflow: hidden;
+  padding: 0px;
+  position: relative;
+  width: 80px;
+  height: 50%;
+  outline: none;
+  background: #e8eef3;
+  color: ${({ theme }) => theme.text};
+
+  @media (max-width: 800px) {
+    width: 60px;
+    font-size: 12px;
+    margin: 0px;
+  }
+`;
diff --git a/src/components/LoginBtn/index.js b/src/components/LoginBtn/index.js
@@ -0,0 +1 @@
+export { default } from './LoginBtn';