diff --git a/coverage_report.txt b/coverage_report.txt new file mode 100644 index 000000000..fa84a25b1 --- /dev/null +++ b/coverage_report.txt @@ -0,0 +1,42 @@ +$ npm test -- --coverage + +> react-certification-2021@0.1.0 test D:\Orlando\react +> react-scripts test "--coverage" + +PASS src/utils/tests/videos.spec.js (6.207s) + Video Utilities + √ validates undefined filter (3ms) + √ validates no filter + √ validates videos filter + √ validates channels filter (1ms) + √ validates unknown filter + √ validates exception on invalid data (2ms) + +--------------------------|----------|----------|----------|----------|-------------------| +File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | +--------------------------|----------|----------|----------|----------|-------------------| +All files | 20.45 | 75 | 20 | 20.45 | | + src | 0 | 100 | 100 | 0 | | + index.js | 0 | 100 | 100 | 0 | 6 | + src/components/App | 0 | 100 | 0 | 0 | | + App.component.jsx | 0 | 100 | 0 | 0 | 14 | + src/components/Header | 0 | 100 | 0 | 0 | | + Header.component.jsx | 0 | 100 | 0 | 0 | 4,5 | + Header.styles.js | 0 | 100 | 100 | 0 | 3,5,7,11,16,21,50 | + src/components/VideoCard | 0 | 100 | 0 | 0 | | + VideoCard.component.jsx | 0 | 100 | 0 | 0 | 4,5 | + VideoCard.styles.js | 0 | 100 | 100 | 0 | 3,12,14,16,20 | + src/components/VideoList | 0 | 100 | 0 | 0 | | + VideoList.component.jsx | 0 | 100 | 0 | 0 | 7,8,10,16,18 | + VideoList.styles.js | 0 | 100 | 100 | 0 | 3,5,9,15 | + index.js | 0 | 0 | 0 | 0 | | + src/pages/Home | 0 | 0 | 0 | 0 | | + Home.page.jsx | 0 | 0 | 0 | 0 |... 14,15,16,19,21 | + src/utils | 100 | 100 | 100 | 100 | | + videos.js | 100 | 100 | 100 | 100 | | +--------------------------|----------|----------|----------|----------|-------------------| +Test Suites: 1 passed, 1 total +Tests: 6 passed, 6 total +Snapshots: 0 total +Time: 11.049s +Ran all test suites related to changed files. diff --git a/package.json b/package.json index 5bc0e0d0d..0b7d1fbda 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-certification-2020", + "name": "react-certification-2021", "version": "0.1.0", "private": true, "dependencies": { @@ -10,7 +10,8 @@ "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.4", + "styled-components": "^5.2.1" }, "scripts": { "start": "react-scripts start", @@ -48,7 +49,6 @@ }, "lint-staged": { "*.{js, jsx, css, json}": [ - "yarn run lint:fix", "pretty-quick --staged", "git add" ] diff --git a/public/index.html b/public/index.html index 6a9f8c26b..8ada26ce0 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,7 @@ 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`. --> - React App + Orlando YouTube's Client diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx index e372d6849..a444e5b5a 100644 --- a/src/components/App/App.component.jsx +++ b/src/components/App/App.component.jsx @@ -1,4 +1,4 @@ -import React, { useLayoutEffect } from 'react'; +import React from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; import AuthProvider from '../../providers/Auth'; @@ -9,27 +9,8 @@ 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..d986755e3 --- /dev/null +++ b/src/components/Header/Header.component.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { + Container, + BurgerButton, + Search, + RightHolder, + ToggleButton, + ProfileButton, +} from './Header.styles'; + +const Header = () => ( + + + + + + Dark Mode + + + +); + +export default Header; diff --git a/src/components/Header/Header.styles.js b/src/components/Header/Header.styles.js new file mode 100644 index 000000000..3c65c0101 --- /dev/null +++ b/src/components/Header/Header.styles.js @@ -0,0 +1,48 @@ +import styled from 'styled-components'; + +export const Container = styled.div``; + +export const Search = styled.input``; + +export const RightHolder = styled.span` + float: right; +`; + +export const BurgerButton = styled.input` + width: 30px; + height: 30px; +`; + +export const ProfileButton = styled.input` + width: 50px; + height: 30px; +`; + +export const ToggleButton = styled.input` + -webkit-appearance: none; + position: relative; + outline: none; + width: 50px; + height: 25px; + background-color: blue; + border-radius: 12px; + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 25px; + height: 25px; + background-color: lightgray; + border-radius: 12px; + } + + &:checked { + background-color: blue; + } + + &:checked:before { + transform: translate(100%); + } +`; diff --git a/src/components/Header/index.js b/src/components/Header/index.js new file mode 100644 index 000000000..4ee6d6404 --- /dev/null +++ b/src/components/Header/index.js @@ -0,0 +1 @@ +export { default } from './Header.component'; diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx index b82ea3517..e69bf9cad 100644 --- a/src/components/Layout/Layout.component.jsx +++ b/src/components/Layout/Layout.component.jsx @@ -3,7 +3,7 @@ import React from 'react'; import './Layout.styles.css'; function Layout({ children }) { - return
{children}
; + return
{children}
; } export default Layout; diff --git a/src/components/VideoCard/VideoCard.component.jsx b/src/components/VideoCard/VideoCard.component.jsx new file mode 100644 index 000000000..3d5f4e920 --- /dev/null +++ b/src/components/VideoCard/VideoCard.component.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Container, Preview, Title, Body } from './VideoCard.styles'; + +const VideoCard = ({ thumbnail, title, body }) => ( + + + {title} + {body} + +); + +export default VideoCard; diff --git a/src/components/VideoCard/VideoCard.styles.js b/src/components/VideoCard/VideoCard.styles.js new file mode 100644 index 000000000..fb0647977 --- /dev/null +++ b/src/components/VideoCard/VideoCard.styles.js @@ -0,0 +1,18 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + border: 10px solid #cccccc; + border-radius: 15px; + padding: 20px; + width: 300px; + margin-bottom: 20px; + margin: 10px auto; +`; + +export const Title = styled.h1``; + +export const Body = styled.p``; + +export const Preview = styled.img` + width: 100%; +`; diff --git a/src/components/VideoCard/index.js b/src/components/VideoCard/index.js new file mode 100644 index 000000000..a10e0c5e4 --- /dev/null +++ b/src/components/VideoCard/index.js @@ -0,0 +1 @@ +export { default } from './VideoCard.component'; diff --git a/src/components/VideoList/VideoList.component.jsx b/src/components/VideoList/VideoList.component.jsx new file mode 100644 index 000000000..3a80d77c7 --- /dev/null +++ b/src/components/VideoList/VideoList.component.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Container, Title, List } from './VideoList.styles'; +import Header from '../Header'; +import VideoCard from '../VideoCard'; +import { getVisibleVideos } from '../../utils/videos'; + +const VideoList = ({ title, items, filter }) => { + const visibleItems = getVisibleVideos(items, filter); + + return ( + +
+ {title} + + {visibleItems + .filter((item) => item.id.kind !== 'youtube#channel') + .map(({ id, snippet }) => ( + + ))} + + + ); +}; + +export default VideoList; diff --git a/src/components/VideoList/VideoList.styles.js b/src/components/VideoList/VideoList.styles.js new file mode 100644 index 000000000..4522f63f0 --- /dev/null +++ b/src/components/VideoList/VideoList.styles.js @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +export const Container = styled.div``; + +export const Title = styled.h1` + text-align: center; +`; + +export const List = styled.div` + padding: 0 15px; + display: flex; + flex-flow: row wrap; +`; diff --git a/src/components/VideoList/index.js b/src/components/VideoList/index.js new file mode 100644 index 000000000..5080dc3f4 --- /dev/null +++ b/src/components/VideoList/index.js @@ -0,0 +1 @@ +export { default } from './VideoList.component'; diff --git a/src/global.css b/src/global.css deleted file mode 100644 index 4feb3c75e..000000000 --- a/src/global.css +++ /dev/null @@ -1,53 +0,0 @@ -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); -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -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; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.separator::before { - content: '•'; - color: white; - padding: 0.4rem; -} - -a { - text-decoration: none; - font-weight: bold; - color: white; -} - -a:active { - color: blueviolet; -} - -hr { -} diff --git a/src/index.js b/src/index.js index b93eaa337..1d527be7d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; -import './global.css'; ReactDOM.render( diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx index 08d1dd5c0..c0b208e34 100644 --- a/src/pages/Home/Home.page.jsx +++ b/src/pages/Home/Home.page.jsx @@ -1,38 +1,16 @@ -import React, { useRef } from 'react'; -import { Link, useHistory } from 'react-router-dom'; - -import { useAuth } from '../../providers/Auth'; -import './Home.styles.css'; +import React from 'react'; +import mockedData from '../../utils/mocked-youtube.json'; +import VideoList from '../../components/VideoList'; function HomePage() { - const history = useHistory(); - const sectionRef = useRef(null); - const { authenticated, logout } = useAuth(); - - function deAuthenticate(event) { - event.preventDefault(); - logout(); - history.push('/'); - } + const { items } = mockedData; 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 deleted file mode 100644 index 5e0a702c3..000000000 --- a/src/pages/Home/Home.styles.css +++ /dev/null @@ -1,8 +0,0 @@ -.homepage { - text-align: center; -} - -.homepage h1 { - font-size: 3rem; - letter-spacing: -2px; -} diff --git a/src/utils/mocked-youtube.json b/src/utils/mocked-youtube.json new file mode 100644 index 000000000..123b407f8 --- /dev/null +++ b/src/utils/mocked-youtube.json @@ -0,0 +1,856 @@ +{ + "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" + } + } + ] + } \ No newline at end of file diff --git a/src/utils/tests/videos.spec.js b/src/utils/tests/videos.spec.js new file mode 100644 index 000000000..237805a8b --- /dev/null +++ b/src/utils/tests/videos.spec.js @@ -0,0 +1,35 @@ +import { getVisibleVideos } from '../videos'; +import mockedData from '../mocked-youtube.json'; + +const { items } = mockedData; + +describe('Video Utilities', () => { + it('validates undefined filter', () => { + const result = getVisibleVideos(items); + expect(result.length).toBe(25); + }); + + it('validates no filter', () => { + const result = getVisibleVideos(items, 'none'); + expect(result.length).toBe(25); + }); + + it('validates videos filter', () => { + const result = getVisibleVideos(items, 'videos'); + expect(result.length).toBe(24); + }); + + it('validates channels filter', () => { + const result = getVisibleVideos(items, 'channels'); + expect(result.length).toBe(1); + }); + + it('validates unknown filter', () => { + const result = getVisibleVideos(items, 'unknown'); + expect(result.length).toBe(0); + }); + + it('validates exception on invalid data', () => { + expect(() => getVisibleVideos(undefined, 'unknown')).toThrowError(); + }); +}); diff --git a/src/utils/videos.js b/src/utils/videos.js new file mode 100644 index 000000000..e5abc4824 --- /dev/null +++ b/src/utils/videos.js @@ -0,0 +1,16 @@ +export const getVisibleVideos = (videos, filter) => + videos.filter((video) => { + if (filter === 'videos' && video.id.kind === 'youtube#video') { + return true; + } + + if (filter === 'channels' && video.id.kind === 'youtube#channel') { + return true; + } + + if (!filter || filter === 'none') { + return true; + } + + return false; + });