diff --git a/package.json b/package.json index 5bc0e0d0d..4093397c1 100644 --- a/package.json +++ b/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.2.1" }, "scripts": { "start": "react-scripts start", @@ -57,5 +59,6 @@ "hooks": { "pre-commit": "lint-staged" } - } + }, + "coverage": "react-scripts test --env=jsdom --watchAll=false --coverage" } diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx index e372d6849..9ebdf8261 100644 --- a/src/components/App/App.component.jsx +++ b/src/components/App/App.component.jsx @@ -1,57 +1,16 @@ -import React, { useLayoutEffect } from 'react'; -import { BrowserRouter, Switch, Route } from 'react-router-dom'; +import React from 'react'; +import Header from '../Header/Header.component'; +import HomePage from '../../pages/Home/Home.page'; -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); - }; - }, []); + return ( - - - - - - - - - - - - - - - - - - - - - +
+
+ +
); } diff --git a/src/components/Header/Header.component.jsx b/src/components/Header/Header.component.jsx new file mode 100644 index 000000000..6af4d8b67 --- /dev/null +++ b/src/components/Header/Header.component.jsx @@ -0,0 +1,158 @@ +import React from 'react'; +import styled from 'styled-components'; +import {MdMenu, MdSearch, MdPersonOutline} from 'react-icons/md'; + +const ContainerHeader = styled.header` + display: flex; + align-items: center; + position: fixed; + top:0; + width: 100%; + height: 65px; + background-color: #ACDEDF; + +`; + +const MenuButton = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 55px; + height: 55px; + padding: 10px; + background-color: transparent; + border:none; + font-size: 1.3rem; +`; + +const InputSearch = styled.input` + align-items: center; + padding: 10px; + background-color: transparent; + box-sizing: content-box; + padding: 10px; + box-sizing: content-box; + border: 1px solid #bbc1bf; + font-size: 1.3rem; + background: #0000; + border-radius: 3px; + height: 1rem; + font-size: 1rem; + padding-left: 30px; +`; + +const DivSearch = styled.div` + cursor: text; + display: inline-flex; + position: relative; + font-size: 1rem; + align-items: center; + height: 100%; + justify-content: center; +`; + +const DivIcon = styled.div` + justify-content: center; + color: #fff; + position: relative; + left: 30px; + height: 100%; + align-items: center; + display: flex; + font-size: 1.3rem; +`; + + +const DivFlex = styled.div` + flex-grow: 1; +`; + +const ToggleSwitch = styled.label` + position: relative; + display: inline-block; + width: 60px; + height: 30px; +`; + +const Slider = styled.span` + position: absolute; + cursor: pointer; + border-radius: 30px; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + &::before { + position: absolute; + content: ""; + height: 24px; + width: 24px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + border-radius: 50%; + } +`; + +const CheckboxSwitch = styled.input` + background-color: #b39541; + opacity: 0; + width: 0px; + height: 0px; + &:checked + ${Slider} { + background: #b39541; + &::before { + transform: translateX(24px); + } + } +`; +const Span = styled.span` + color: #b39541; + font-size: 0.8rem; + padding: 10px; +`; + +const Avatar = styled.div` + background-color: #b39541; + border-radius: 999999px; + margin: 1%; + height: 45px; + width: 45px; + opacity: 0.5; + color: #fff; + display: inline-flex; + font-size: 1.6rem; + align-items: center; + justify-content: center; +`; + + +function Header() { + + return ( + + + + + + + + + Dark mode + + + + + + + + + ) +} + +export default Header; \ No newline at end of file diff --git a/src/components/Video/VideoCard.component.jsx b/src/components/Video/VideoCard.component.jsx new file mode 100644 index 000000000..43732ad9a --- /dev/null +++ b/src/components/Video/VideoCard.component.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` +width: 323px; + height: 400px; + margin: 10px; + max-width: 100%; + display: inline-grid; + overflow: hidden; + border: 1px solid #eee; + max-width: 100%; + padding: 10px; +`; + +const Description = styled.span` + font-size: .8rem; + line-height: 1.2rem; + display: inline-block; +`; + +const ContainerImg = styled.div` + text-align:center; + height: 180px; + overflow: hidden; +`; + +const Image = styled.img` + max-width:100%; + height: 100%; +`; + +const Title = styled.h3` + font-size: 1rem; + line-height: 1.2rem; + display: inline-block; +`; + +function VideoCard (data) { + return ( + + + {data.title} + + {data.title} + {data.description} + + + ); + +} + +export default VideoCard; \ No newline at end of file diff --git a/src/components/Video/VideoCards.component.jsx b/src/components/Video/VideoCards.component.jsx new file mode 100644 index 000000000..4fd4d12d8 --- /dev/null +++ b/src/components/Video/VideoCards.component.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import styled from 'styled-components'; + +import {mockVideosData} from '../../mock/youtube-videos-mock'; +import VideoCard from './VideoCard.component' + + + +const ContainerVideos = styled.div` + max-width: 100%; + margin: 0 5%; +`; + +function VideoCards () { + + return ( + + {mockVideosData.items + .filter((a) => (a.id.kind === "youtube#video")) + .map((data) => { + return ( + + ); + }) + } + + ); +} + +export default VideoCards; \ No newline at end of file diff --git a/src/global.css b/src/global.css index 4feb3c75e..2983e17b4 100644 --- a/src/global.css +++ b/src/global.css @@ -18,14 +18,6 @@ body { margin: 0; padding: 0; text-rendering: optimizeLegibility; - background-image: linear-gradient( - 120deg, - #eea2a2 0, - #bbc1bf 19%, - #57c6e1 42%, - #b49fda 79%, - #7ac5d8 100% - ); background-size: 400% 400%; background-position: var(--bg-position); transition: background-position 2s ease; @@ -49,5 +41,6 @@ a:active { color: blueviolet; } -hr { -} +h1 { + font-size: 2rem; +} \ No newline at end of file diff --git a/src/mock/youtube-videos-mock.jsx b/src/mock/youtube-videos-mock.jsx new file mode 100644 index 000000000..e23730200 --- /dev/null +++ b/src/mock/youtube-videos-mock.jsx @@ -0,0 +1,859 @@ + +export const mockVideosData = +{ + "kind": "youtube#searchListResponse", + "etag": "LRviZfd_p3HDDD2uBk5Qv7zaEQU", + "nextPageToken": "CBkQAA", + "regionCode": "MX", + "pageInfo": { + "totalResults": 2323, + "resultsPerPage": 25 + }, + "items": [ + { + "kind": "youtube#searchResult", + "etag": "_PVKwNJf_qw9nukFeRFOtQ837o0", + "id": { + "kind": "youtube#channel", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg" + }, + "snippet": { + "publishedAt": "2014-09-27T01:39:18Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline", + "description": "Wizeline transforms how teams build technology. Its customers accelerate the delivery of innovative products with proven solutions, which combine Wizeline's ...", + "thumbnails": { + "default": { + "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s88-c-k-c0xffffffff-no-rj-mo" + }, + "medium": { + "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s240-c-k-c0xffffffff-no-rj-mo" + }, + "high": { + "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo" + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "upcoming", + "publishTime": "2014-09-27T01:39:18Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "erqeM78PZDWIBe8qOGHGM2WdSE8", + "id": { + "kind": "youtube#video", + "videoId": "nmXMgqjQzls" + }, + "snippet": { + "publishedAt": "2019-09-30T23:54:32Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Video Tour | Welcome to Wizeline Guadalajara", + "description": "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, ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/nmXMgqjQzls/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/nmXMgqjQzls/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/nmXMgqjQzls/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-09-30T23:54:32Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "7VY0u60YdqamyHOCAufd7r6qTsQ", + "id": { + "kind": "youtube#video", + "videoId": "HYyRZiwBWc8" + }, + "snippet": { + "publishedAt": "2019-04-18T18:48:04Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Guadalajara | Bringing Silicon Valley to Mexico", + "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" + } + }, + { + "kind": "youtube#searchResult", + "etag": "by0t_nrT2TB-IQkQpgSWUVUwpKI", + "id": { + "kind": "youtube#video", + "videoId": "Po3VwR_NNGk" + }, + "snippet": { + "publishedAt": "2019-03-05T03:52:55Z", + "channelId": "UCXmAOGwFYxIq5qrScJeeV4g", + "title": "Wizeline hace sentir a empleados como en casa", + "description": "En el 2014, Bismarck fundó Wizeline, compañía tecnológica que trabaja con los corporativos ofreciendo una plataforma para que desarrollen software de forma ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "El Economista TV", + "liveBroadcastContent": "none", + "publishTime": "2019-03-05T03:52:55Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "9-Ag8hUNYBLTjuli6eECa5GXV1Y", + "id": { + "kind": "youtube#video", + "videoId": "7PtYNO6g7eI" + }, + "snippet": { + "publishedAt": "2019-04-12T20:00:45Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "We Are Wizeline", + "description": "Engineering a better tomorrow. Wizeline is a global software development company that helps its clients solve their biggest challenges with design and ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-04-12T20:00:45Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "pVQGVs72zHvpgl0ewNKX2DTOH6w", + "id": { + "kind": "youtube#video", + "videoId": "YuW0CE_8i1I" + }, + "snippet": { + "publishedAt": "2018-12-13T21:51:39Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Thrives in Mexico City", + "description": "Our vibrant Mexico City office is home to agile software engineers, talented UX designers, and brilliant data scientists. Learn about the rich history of Mexico City.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2018-12-13T21:51:39Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "HlSqzTYW4HGFDNAOPCs6nIRXdq8", + "id": { + "kind": "youtube#video", + "videoId": "CHzlSGRvWPs" + }, + "snippet": { + "publishedAt": "2017-03-08T22:41:43Z", + "channelId": "UCUsm-fannqOY02PNN67C0KA", + "title": "Wizeline", + "description": "El plan de Wizeline, una empresa de inteligencia artificial, para ayudar a crecer la comunidad de ciencia de datos en CDMX y todo el país, a través de cursos ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Noticieros Televisa", + "liveBroadcastContent": "none", + "publishTime": "2017-03-08T22:41:43Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "S1Ewc2IMjGC1VE5mH3AryZ43IPQ", + "id": { + "kind": "youtube#video", + "videoId": "cjO2fJy8asM" + }, + "snippet": { + "publishedAt": "2018-09-25T17:45:19Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "A Day in the Life of an Engineering Manager at Wizeline", + "description": "Fernando Espinoza shares his experience working as an engineering manager at Wizeline and mentoring other engineers. Learn about Fernando's passions ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/cjO2fJy8asM/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/cjO2fJy8asM/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/cjO2fJy8asM/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2018-09-25T17:45:19Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "jZZv6Ufu43kg1KzFlBOWDVKfPkY", + "id": { + "kind": "youtube#video", + "videoId": "zClI9OjgKXM" + }, + "snippet": { + "publishedAt": "2020-04-24T20:22:17Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Technical Writing Academy | Featuring Eduardo Ocejo", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/zClI9OjgKXM/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/zClI9OjgKXM/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/zClI9OjgKXM/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-04-24T20:22:17Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "z5o2tIUROuWNZU5-1pzMPjoqQC8", + "id": { + "kind": "youtube#video", + "videoId": "8bz9R61oY5o" + }, + "snippet": { + "publishedAt": "2019-09-26T15:28:46Z", + "channelId": "UCUP6qv-_EIL0hwTsJaKYnvw", + "title": "Silicon Valley en México", + "description": "Empresas de Silicon Valley buscan establecerse en México por el gran talento que hay en nuestro país. Es una investigación de Roberto Domínguez.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/8bz9R61oY5o/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/8bz9R61oY5o/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/8bz9R61oY5o/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Azteca Noticias", + "liveBroadcastContent": "none", + "publishTime": "2019-09-26T15:28:46Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "Q4bqsw7kAYe6PV1sh494TQ-UJ8c", + "id": { + "kind": "youtube#video", + "videoId": "7dJFraOqcoQ" + }, + "snippet": { + "publishedAt": "2019-07-02T17:40:20Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? featuring Juan Pablo Villa in Mexico City", + "description": "Juan Pablo, known as Gianpa at Wizeline, is a software engineer in our Mexico City office. Gianpa focuses on Android apps, is an integral part of our culture, ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-07-02T17:40:20Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "cXSMV8jX2lv1ue3UUnbW3xCmIU4", + "id": { + "kind": "youtube#video", + "videoId": "w-Qwc_XJrWc" + }, + "snippet": { + "publishedAt": "2020-12-31T16:26:44Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline's 2020 Year in Review", + "description": "There's no doubt that 2020 has been an unprecedented year. However, amidst all the chaos, we achieved remarkable growth in various areas of our business.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-12-31T16:26:44Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "j9q9-dcRhTRDr0MCkJUMKdYt7u8", + "id": { + "kind": "youtube#video", + "videoId": "rjir_cHTl5w" + }, + "snippet": { + "publishedAt": "2019-04-29T20:37:26Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? featuring Hugo Lopez in Mexico City", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/rjir_cHTl5w/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/rjir_cHTl5w/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/rjir_cHTl5w/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-04-29T20:37:26Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "MYfT5K8aZNvalrm2RR_HtylFffc", + "id": { + "kind": "youtube#video", + "videoId": "DcFK1x3NHGY" + }, + "snippet": { + "publishedAt": "2016-09-01T18:02:11Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? (We're Hiring in Mexico!)", + "description": "A quick look at why people join Wizeline, what motivates us as a team and what it's like to work in our Guadalajara office. Learn more and apply here: ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2016-09-01T18:02:11Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "8dssV5QkZWEMmoo4DIq0k27aoIg", + "id": { + "kind": "youtube#video", + "videoId": "3BzYWAqZgFw" + }, + "snippet": { + "publishedAt": "2019-07-02T17:45:28Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? featuring Oswaldo Herrera in Mexico City", + "description": "Oswaldo is a software engineering in Wizeline's Mexico City office. He joined Wizeline because of the camaraderie and deep sense of commitment of our teams.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-07-02T17:45:28Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "FMbfPlflDyPx4UgcA42igb97xlk", + "id": { + "kind": "youtube#video", + "videoId": "3KVFmT-Tp2w" + }, + "snippet": { + "publishedAt": "2019-02-11T17:55:19Z", + "channelId": "UCd6MoB9NC6uYN2grvUNT-Zg", + "title": "Caso de Éxito AWS: Wizeline [Spanish]", + "description": "Central de socios de APN - https://amzn.to/2S7tIXM Fundada en 2014, Wizeline es una compañía joven e innovadora que nació en la nube para ofrecer soporte ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Amazon Web Services", + "liveBroadcastContent": "none", + "publishTime": "2019-02-11T17:55:19Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "0ww3Jk-j4d4TMsFNL213EhE0gGg", + "id": { + "kind": "youtube#video", + "videoId": "aKuPmY2m1Ro" + }, + "snippet": { + "publishedAt": "2019-12-27T20:47:29Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline's 2019 Year in Review", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-12-27T20:47:29Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "8q-ajUMnXZm4gQzfSIiyrG2tA7A", + "id": { + "kind": "youtube#video", + "videoId": "24sTHUyWhRM" + }, + "snippet": { + "publishedAt": "2016-10-05T00:03:32Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "[1 of 2] Wizeline CEO shares career lessons from Google", + "description": "Founder & CEO Bismarck Lepe on growth opportunities at Wizeline and his career-path experience as an early Google employee. Join our team!", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/24sTHUyWhRM/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/24sTHUyWhRM/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/24sTHUyWhRM/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2016-10-05T00:03:32Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "4QA9Eisz9-HncD9EENUm0LV7hXI", + "id": { + "kind": "youtube#video", + "videoId": "IxGc1gSqB3A" + }, + "snippet": { + "publishedAt": "2021-02-04T17:45:11Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Data Engineering featuring Tania Reyes", + "description": "Tania discovered her interest in Big Data while working at Wizeline and took Wizeline Academy courses to skill up and join the data team. Now, she works on ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2021-02-04T17:45:11Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "5_OftJlDpcfykudIpO7nn92Pq6s", + "id": { + "kind": "youtube#video", + "videoId": "NP1gAnbeNno" + }, + "snippet": { + "publishedAt": "2019-11-12T20:45:18Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Querétaro | Mexico's New Knowledge Economy (We're hiring!)", + "description": "A small but mighty (and growing) team, the Queretaro crew has taken ownership of growing the office and brand, speaking at university events, hosting tech ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/NP1gAnbeNno/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/NP1gAnbeNno/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/NP1gAnbeNno/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-11-12T20:45:18Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "0XmhUGwmJNRilJR1S6VgOmdO9ho", + "id": { + "kind": "youtube#video", + "videoId": "F6Krwu6lUc8" + }, + "snippet": { + "publishedAt": "2020-10-23T04:15:31Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Miriam Godinez | Women in Leadership at Wizeline", + "description": "Science and technology always caught Miriam's attention. One of her ultimate goals as a Senior Engineer Manager and Lead from the Mobile Team at Wizeline ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-10-23T04:15:31Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "mM9qAwvNhFKGUv6mCIamuWVo0NE", + "id": { + "kind": "youtube#video", + "videoId": "RFq7gfvhtCk" + }, + "snippet": { + "publishedAt": "2020-05-23T00:11:23Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Welcome Back to Wizeline Vietnam | Extended Version", + "description": "Thanks to swift government action, the COVID-19 situation in Vietnam has reached a point where businesses are able to return to work and reopen offices.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-05-23T00:11:23Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "sVz5aNJZHehOf7qJCTLOLh1V40M", + "id": { + "kind": "youtube#video", + "videoId": "E1Vq_A3WKK8" + }, + "snippet": { + "publishedAt": "2017-12-09T18:46:07Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "How does Wizeline work?", + "description": "Wizeline builds teams with a mix of technical and non-technical talent to deliver better products, faster. Learn more about our consulting services: ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2017-12-09T18:46:07Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "kiG9Z-CXE-mbZVBeom4qLurWb4w", + "id": { + "kind": "youtube#video", + "videoId": "ZmkslANDz0Q" + }, + "snippet": { + "publishedAt": "2019-12-18T19:22:44Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "12 Wishes from Wizeline | Happy Holidays 2019", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-12-18T19:22:44Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "bzZZYb96wT_IQHNp5sXm3VDUbXA", + "id": { + "kind": "youtube#video", + "videoId": "Nss3EmTDD3s" + }, + "snippet": { + "publishedAt": "2017-12-08T18:13:27Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline?", + "description": "Hear from our employees directly about what excites them about their roles here at Wizeline. Wizeline wants to hire the best and the brightest to accelerate their ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2017-12-08T18:13:27Z" + } + } + ] + } + diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx index 08d1dd5c0..56f45c838 100644 --- a/src/pages/Home/Home.page.jsx +++ b/src/pages/Home/Home.page.jsx @@ -1,37 +1,13 @@ -import React, { useRef } from 'react'; -import { Link, useHistory } from 'react-router-dom'; - -import { useAuth } from '../../providers/Auth'; +import React from 'react'; +import VideoCards from '../../components/Video/VideoCards.component'; import './Home.styles.css'; function HomePage() { - const history = useHistory(); - const sectionRef = useRef(null); - const { authenticated, logout } = useAuth(); - - function deAuthenticate(event) { - event.preventDefault(); - logout(); - history.push('/'); - } return ( -
+

Hello stranger!

- {authenticated ? ( - <> -

Good to have you back

- - - ← logout - - - show me something cool → - - - ) : ( - let me in → - )} +
); } diff --git a/src/pages/Home/Home.styles.css b/src/pages/Home/Home.styles.css index 5e0a702c3..01bc12f38 100644 --- a/src/pages/Home/Home.styles.css +++ b/src/pages/Home/Home.styles.css @@ -1,5 +1,6 @@ .homepage { text-align: center; + margin-top: 60px; } .homepage h1 { diff --git a/src/test/HomePage.test.js b/src/test/HomePage.test.js new file mode 100644 index 000000000..5c8b645fb --- /dev/null +++ b/src/test/HomePage.test.js @@ -0,0 +1,18 @@ +import React from 'react'; +import HomePage from '../pages/Home/Home.page'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; + +describe("App", () => { + it("Render the section homepage", () => { + render(); + expect(screen.getByTestId('homepage')); + }); + + it('renders headline', () => { + render(); + const linkElement = screen.getByText(/Hello stranger/i); + expect(linkElement).toBeInTheDocument(); + }); + +}); \ No newline at end of file diff --git a/src/test/VideoCard.component.test.js b/src/test/VideoCard.component.test.js new file mode 100644 index 000000000..e6234e3b6 --- /dev/null +++ b/src/test/VideoCard.component.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import VideoCard from '../components/Video/VideoCard.component'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; + +describe("Video Card", () => { + it("Render card Infi", () => { + render(); + expect(screen.getByTestId('video-title')); + expect(screen.getByTestId('video-description')); + }); + + it('Property src to img', () => { + render(); + const imgElement = screen.getByRole('img'); + expect(imgElement).toHaveProperty("src"); + }); + +});