wdonet · rincon-orlando · Feb 19, 2021 · Feb 22, 2021 · Feb 22, 2021 · Feb 28, 2021
diff --git a/coverage_report.txt 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
@@ -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
@@ -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`.
     -->
-    <title>React App</title>
+    <title>Orlando YouTube's Client</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git 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 (
     <BrowserRouter>
       <AuthProvider>

diff --git a/src/components/Header/Header.component.jsx 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 = () => (
+  <Container>
+    <BurgerButton
+      type="image"
+      src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"
+      alt=""
+    />
+    <Search placeholder="Type something cool" />
+    <RightHolder>
+      <ToggleButton id="darkMode" type="checkbox" />
+      <span>Dark Mode</span>
+      <ProfileButton
+        type="image"
+        src="https://img2.freepng.es/20180422/wee/kisspng-computer-icons-user-profile-login-clip-art-my-account-icon-5adc5dd8d9ca10.9425519815243913848921.jpg"
+        alt=""
+      />
+    </RightHolder>
+  </Container>
+);
+
+export default Header;
diff --git a/src/components/Header/Header.styles.js 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
@@ -0,0 +1 @@
+export { default } from './Header.component';
diff --git 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 <main className="container">{children}</main>;
+  return <main>{children}</main>;
 }
 
 export default Layout;
diff --git a/src/components/VideoCard/VideoCard.component.jsx 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 }) => (
+  <Container>
+    <Preview src={thumbnail} />
+    <Title>{title}</Title>
+    <Body>{body}</Body>
+  </Container>
+);
+
+export default VideoCard;
diff --git a/src/components/VideoCard/VideoCard.styles.js 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
@@ -0,0 +1 @@
+export { default } from './VideoCard.component';
diff --git a/src/components/VideoList/VideoList.component.jsx 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 (
+    <Container>
+      <Header />
+      <Title>{title}</Title>
+      <List>
+        {visibleItems
+          .filter((item) => item.id.kind !== 'youtube#channel')
+          .map(({ id, snippet }) => (
+            <VideoCard
+              thumbnail={snippet.thumbnails.medium.url}
+              key={id.videoId}
+              title={snippet.title}
+              body={snippet.description}
+            />
+          ))}
+      </List>
+    </Container>
+  );
+};
+
+export default VideoList;
diff --git a/src/components/VideoList/VideoList.styles.js 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
@@ -0,0 +1 @@
+export { default } from './VideoList.component';
diff --git a/src/global.css b/src/global.css
diff --git 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(
   <React.StrictMode>

diff --git 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 (
-    <section className="homepage" ref={sectionRef}>
-      <h1>Hello stranger!</h1>
-      {authenticated ? (
-        <>
-          <h2>Good to have you back</h2>
-          <span>
-            <Link to="/" onClick={deAuthenticate}>
-              ← logout
-            </Link>
-            <span className="separator" />
-            <Link to="/secret">show me something cool →</Link>
-          </span>
-        </>
-      ) : (
-        <Link to="/login">let me in →</Link>
-      )}
-    </section>
+    <VideoList
+      title="Welcome to Orlando's YouTube Client"
+      items={items}
+      filter="videos"
+    />
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from './VideoCard.component';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from './VideoList.component';