j-polanco · j-polanco · Mar 18, 2021
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_YOUTUBE_API_KEY=AIzaSyCJDk0qSH8AeWBxdSnIFdjw9kOiblAiHI4
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-player": "^2.9.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",

diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import HomePage from '../../pages/Home';
+import HeaderSection from '../../pages/Header/Header.page';
+import DataProvider from '../../states/provider';
 import Button from '../Button';
+import useFetchData from '../../states/useFetchData';
+import VideoPage from '../../pages/Video/Video.page';
 
 const lightTheme = {
     bg: '#fff',
@@ -21,20 +25,32 @@ const GlobalStyles = createGlobalStyle`body{
 
 function App() {
     const [mode, setMode] = useState('light');
-
+    const [videoDetails, setVideoDetails] = useState();
+    const { setSearch, response } = useFetchData();
     return (
-        <ThemeProvider theme={mode === 'light' ? lightTheme : darkTheme}>
-            <GlobalStyles />
-            <Button
-                size="10px"
-                onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-            >
-                Change Theme
-            </Button>
-            <div id="home-section">
-                <HomePage />
-            </div>
-        </ThemeProvider>
+        <DataProvider response={response}>
+            <ThemeProvider theme={mode === 'light' ? lightTheme : darkTheme}>
+                <GlobalStyles />
+                <Button
+                    id="change-theme"
+                    size="10px"
+                    onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+                >
+                    Change Theme
+                </Button>
+                <div id="home-section">
+                    <HeaderSection
+                        globalSetSearch={setSearch}
+                        videoDetails={setVideoDetails}
+                    />
+                    {videoDetails ? (
+                        <VideoPage video={videoDetails} selectVideo={setVideoDetails} />
+                    ) : (
+                        <HomePage selectVideo={setVideoDetails} />
+                    )}
+                </div>
+            </ThemeProvider>
+        </DataProvider>
     );
 }
 

diff --git a/src/components/App/App.component.test.jsx b/src/components/App/App.component.test.jsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { render, screen, queryByAttribute } from '@testing-library/react';
+import {
+    render,
+    screen,
+    queryByAttribute,
+    cleanup,
+    fireEvent,
+} from '@testing-library/react';
+
 import App from '.';
 
 describe('App Component tests', () => {

diff --git a/src/components/Emoji/Emoji.jsx b/src/components/Emoji/Emoji.jsx
@@ -4,8 +4,8 @@ const Emoji = (props) => (
     <span
         className="emoji"
         role="img"
-        aria-label={props.label ? props.label : ''}
-        aria-hidden={props.label ? 'false' : 'true'}
+        aria-label={props.label || ''}
+        aria-hidden={props.label || 'true'}
     >
         {props.symbol}
     </span>

diff --git a/src/pages/Card/Card.page.jsx b/src/pages/Card/Card.page.jsx
@@ -3,27 +3,37 @@ import styled from 'styled-components';
 
 const Container = styled.div`
     width: 22%;
+    height: 20em;
     border-style: solid;
     margin: 1em;
     border-radius: 1em;
     display: flex;
     justify-content: space-between;
     float: left;
     background-color: #d47b7b;
-    word-wrap: break-word;
+    text-overflow: ellipsis;
+    overflow: hidden;
 `;
 
-function Card({ title, description, image, width, height }) {
+function Card({ videoId, title, description, image, width, height, selectVideo }) {
     return (
-        <div>
-            <Container>
-                <center>
-                    <h2> {title} </h2>
-                    <img src={image} alt={title} width={width} height={height} />
-                    <p> {description}</p>
-                </center>
-            </Container>
-        </div>
+        <Container
+            onClick={() => {
+                const val = {
+                    videoId,
+                    title,
+                    description,
+                };
+
+                selectVideo(val);
+            }}
+        >
+            <center>
+                <h3> {title} </h3>
+                <img src={image} alt={title} width={width} height={height} />
+                <p> {description}</p>
+            </center>
+        </Container>
     );
 }
 

diff --git a/src/pages/Card/Card.page.test.jsx b/src/pages/Card/Card.page.test.jsx
@@ -39,7 +39,7 @@ describe('Card Component tests', () => {
                 height="90"
             />
         );
-        expect(screen.getByText('testTitle').tagName).toBe('H2');
+        expect(screen.getByText('testTitle').tagName).toBe('H3');
     });
 
     it('Card Description type', () => {

diff --git a/src/pages/Header/Header.page.jsx b/src/pages/Header/Header.page.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import Emoji from '../../components/Emoji';
 import Button from '../../components/Button';
@@ -15,16 +15,50 @@ const CurrentDiv = styled.div`
     background-color: #2183d3;
 `;
 
-function HeaderSection() {
+function HeaderSection({ globalSetSearch, videoDetails }) {
+    const [search, setSearch] = useState(undefined);
+
+    function dispatchEvent() {
+        if (!search) {
+            alert('please enter a valid search term');
+        } else {
+            globalSetSearch(search);
+            videoDetails(undefined);
+        }
+    }
+
+    function eventHandler(event) {
+        if (event.charCode === 13) {
+            dispatchEvent('onEnter');
+        }
+    }
+
+    function onSearchClick() {
+        dispatchEvent('onClick');
+    }
+
     return (
         <CurrentDiv>
             <Button size="2em">
                 <Emoji symbol="☰" />
             </Button>
-
             <Button size="1em">
-                <input type="search" id="site-search" placeholder="Search the site..." />
-                <Emoji symbol="🔍" />
+                <input
+                    type="search"
+                    id="site-search"
+                    placeholder="Search the site..."
+                    onKeyPress={eventHandler}
+                    onChange={(event) => setSearch(event.target.value)}
+                />
+                <span
+                    size="1em"
+                    onClick={onSearchClick}
+                    onKeyPress={onSearchClick}
+                    role="button"
+                    tabIndex="-1"
+                >
+                    <Emoji symbol="🔍" />
+                </span>
             </Button>
         </CurrentDiv>
     );

diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
@@ -1,22 +1,27 @@
 import React from 'react';
-import HeaderSection from '../Header/Header.page';
 import Card from '../Card/Card.page';
-import mockedData from '../../data/mockItems.json';
+import { useData } from '../../states/provider';
+
+function HomePage({ selectVideo }) {
+    const { data } = useData();
+    const elements = data.data;
 
-function HomePage() {
     return (
         <div>
-            <HeaderSection />
-            {mockedData.items.map((item) => (
-                <Card
-                    key={item.etag}
-                    title={item.snippet.title}
-                    description={item.snippet.description}
-                    image={item.snippet.thumbnails.default.url}
-                    width={item.snippet.thumbnails.default?.width ?? 120}
-                    height={item.snippet.thumbnails.default?.height ?? 90}
-                />
-            ))}
+            {elements &&
+                elements.items &&
+                elements.items.map((item) => (
+                    <Card
+                        key={item.etag}
+                        videoId={item.id.videoId}
+                        title={item.snippet.title}
+                        description={item.snippet.description}
+                        image={item.snippet.thumbnails.default.url}
+                        width={item.snippet.thumbnails.default?.width ?? 120}
+                        height={item.snippet.thumbnails.default?.height ?? 90}
+                        selectVideo={selectVideo}
+                    />
+                ))}
         </div>
     );
 }

diff --git a/src/pages/Home/Home.page.test.jsx b/src/pages/Home/Home.page.test.jsx
@@ -1,52 +1,59 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import HomePage from '.';
+import DataProvider from '../../states/provider';
+import mockedData from '../../data/mockItems.json';
 
 describe('Home Component tests', () => {
-    it('Header Section Contains search button defined', () => {
-        render(<HomePage />);
-        expect(screen.getByText('🔍')).toBeDefined();
-    });
-
-    it('Header Section Contains search button defined', () => {
-        render(<HomePage />);
-        expect(screen.getByText('☰')).toBeDefined();
-    });
-
-    it('Header Section Contains search input defined', () => {
-        render(<HomePage />);
-        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
-    });
-
     it('Card Section Contain title', () => {
-        render(<HomePage />);
+        render(
+            <DataProvider response={mockedData}>
+                <HomePage />
+            </DataProvider>
+        );
         expect(
             screen.getByText('Video Tour | Welcome to Wizeline Guadalajara').tagName
-        ).toBe('H2');
+        ).toBe('H3');
     });
     it('Card Section Contain Description', () => {
-        render(<HomePage />);
+        render(
+            <DataProvider response={mockedData}>
+                <HomePage />
+            </DataProvider>
+        );
         expect(
             screen.getByText(
                 'Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...'
             ).tagName
         ).toBe('P');
     });
     it('Card Section Contain image', () => {
-        render(<HomePage />);
+        render(
+            <DataProvider response={mockedData}>
+                <HomePage />
+            </DataProvider>
+        );
         expect(
             screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara').tagName
         ).toBe('IMG');
     });
     it('Card Section image size width', () => {
-        render(<HomePage />);
+        render(
+            <DataProvider response={mockedData}>
+                <HomePage />
+            </DataProvider>
+        );
 
         const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
 
         expect(image.width).toEqual(120);
     });
     it('Card Section image size height', () => {
-        render(<HomePage />);
+        render(
+            <DataProvider response={mockedData}>
+                <HomePage />
+            </DataProvider>
+        );
         const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
         expect(image.height).toEqual(90);
     });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_YOUTUBE_API_KEY=AIzaSyCJDk0qSH8AeWBxdSnIFdjw9kOiblAiHI4