cvillanueva84 · lisvsz · Aug 19, 2021
diff --git a/.prettierrc b/.prettierrc
@@ -5,5 +5,6 @@
   "semi": true,
   "singleQuote": true,
   "jsxSingleQuote": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "endOfLine": "auto"
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}\\start"
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # Wizeline Academy - 2021 React Bootcamp
 
-Please refere to the following [GIST](https://gist.github.com/villacoder/9f980254461fa8bfbe93067db2126872) for further instructions
+Please refere to the following [GIST](https://gist.github.com/erickwize/d7311bfc972080c162c43cbb7dc80587) for further instructions
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["@babel/plugin-transform-react-jsx"],
+  "presets": ["@babel/env", "@babel/react"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,24 +3,37 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest-cli": "^26.6.3",
     "react": "^16.13.1",
     "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.3",
+    "react-transition-group": "^4.4.2",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
-    "lint:fix": "eslint ./src --ext .js,.jsx --fix"
+    "lint:fix": "eslint ./src --ext .js,.jsx --fix",
+    "format-staged": "pretty-quick --staged"
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.12.17",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -29,8 +42,8 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.13",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"
   },
@@ -55,7 +68,24 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "npm run format-staged"
     }
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/index.js"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 60,
+        "branches": 60,
+        "lines": 60,
+        "functions": 60
+      }
+    },
+    "coverageReporters": [
+      "json"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -21,10 +21,13 @@
       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>wizeline youtube</title>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="backdrop-hook"></div>
+    <div id="drawer-hook"></div>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
@@ -1,56 +1,15 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 
-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 (
     <BrowserRouter>
-      <AuthProvider>
-        <Layout>
-          <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
-            <Route exact path="/login">
-              <LoginPage />
-            </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
-            <Route path="*">
-              <NotFound />
-            </Route>
-          </Switch>
-          <Fortune />
-        </Layout>
-      </AuthProvider>
+      <Layout>
+        <HomePage />
+      </Layout>
     </BrowserRouter>
   );
 }

diff --git a/src/components/CardHomePreview/CardHomePreview.component.jsx b/src/components/CardHomePreview/CardHomePreview.component.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Card } from './CardHomePreview.styled';
+
+const CardHomePreview = (props) => {
+  return (
+    <Card>
+      <div className="card-home-review__image">
+        <img src={`${props.image}`} alt={props.title} />
+      </div>
+      <div className="card-home-review__info">
+        <h2>{props.title}</h2>
+        <p>{props.description}</p>
+      </div>
+    </Card>
+  );
+};
+
+export default CardHomePreview;
diff --git a/src/components/CardHomePreview/CardHomePreview.styled.js b/src/components/CardHomePreview/CardHomePreview.styled.js
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export const Card = styled.div`
+  position: relative;
+  margin: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  border-radius: 6px;
+  padding-bottom: 1rem;
+  overflow: hidden;
+  background: white;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  .card-home-review__image {
+    width: 100%;
+    height: 9.5rem;
+
+    img {
+      width: 100%;
+      height: 90%;
+      object-fit: cover;
+    }
+  }
+
+  .card-home-review__info {
+    padding: 1rem;
+    text-align: flex-start;
+
+    h2,
+    p {
+      margin: 0 0 0.5rem 0;
+    }
+
+    h2 {
+      font-size: 19px;
+    }
+
+    p {
+      font-size: 15px;
+      color: grey;
+    }
+  }
+`;
diff --git a/src/components/CardHomePreview/index.js b/src/components/CardHomePreview/index.js
@@ -0,0 +1 @@
+export { default } from './CardHomePreview.component';
diff --git a/src/components/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx
diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css
diff --git a/src/components/Fortune/index.js b/src/components/Fortune/index.js
diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx
@@ -1,9 +1,15 @@
 import React from 'react';
 
-import './Layout.styles.css';
+import MainNavigation from '../Navigation/MainNavigation';
+import { Main } from './Layout.styled';
 
 function Layout({ children }) {
-  return <main className="container">{children}</main>;
+  return (
+    <>
+      <MainNavigation />
+      <Main className="container">{children}</Main>
+    </>
+  );
 }
 
 export default Layout;
diff --git a/src/components/Layout/Layout.styled.js b/src/components/Layout/Layout.styled.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Main = styled.main`
+  width: 100%;
+  height: fit-content;
+  margin-top: 48px;
+
+  @media (min-width: 600px) {
+    margin-top: 88px;
+  }
+`;
diff --git a/src/components/Layout/Layout.styles.css b/src/components/Layout/Layout.styles.css
diff --git a/src/components/Navigation/MainHeader/MainHeader.component.jsx b/src/components/Navigation/MainHeader/MainHeader.component.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Header } from './MainHeader.styled';
+
+const MainHeader = ({ children }) => {
+  return <Header>{children}</Header>;
+};
+
+export default MainHeader;
diff --git a/src/components/Navigation/MainHeader/MainHeader.styled.js b/src/components/Navigation/MainHeader/MainHeader.styled.js
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const Header = styled.header`
+  background-color: #1c5476;
+  display: flex;
+  width: 100%;
+  height: 48px;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26);
+  padding: 0 1rem;
+  z-index: 5;
+
+  main {
+    margin-top: 5rem;
+  }
+
+  .MainNavigation__firstWrapper--alignment {
+    display: flex;
+    align-self: baseline;
+  }
+
+  @media (min-width: 600px) {
+    height: 64px;
+  }
+`;
diff --git a/src/components/Navigation/MainHeader/index.js b/src/components/Navigation/MainHeader/index.js
@@ -0,0 +1 @@
+export { default } from './MainHeader.component';