cvillanueva84 · kleyla · Jul 23, 2021 · Jul 23, 2021 · Jul 24, 2021 · Jul 24, 2021
diff --git a/.env b/.env
@@ -0,0 +1,9 @@
+REACT_APP_YOUTUBE_API_KEY=AIzaSyB4emm7HLDp7mMWLbBDJyGnt0YtHcoUHE0
+REACT_APP_YOUTUBE_API_KEY_2=AIzaSyAhHNndvumwuvwgA9mcTqhd9l4wSHrH6F8
+
+REACT_APP_APIKEY=AIzaSyABVfKm6UztkaZaeQtI4szdNWsZoqj0eKM
+REACT_APP_AUTHDOMAIN=bootcamp-react-wizeline.firebaseapp.com
+REACT_APP_PROJECTID=bootcamp-react-wizeline
+REACT_APP_STORAGEBUCKET=bootcamp-react-wizeline.appspot.com
+REACT_APP_MESSAGINGSENDERID=276847939074
+REACT_APP_APPID=1:276847939074:web:16a57bbcf76ebba1aae11b
diff --git a/.eslintrc b/.eslintrc
@@ -3,7 +3,7 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,26 +1,33 @@
 {
   "name": "react-certification-2020",
+  "homepage": "https://kleyla.github.io/react-certification-2021",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "firebase": "^8.10.0",
     "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",
+    "styled-components": "^5.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test:coverage": "npm run test -- --coverage --watchAll=false",
     "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",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "devDependencies": {
+    "@testing-library/react": "^10.4.9",
+    "@testing-library/react-hooks": "^7.0.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -29,7 +36,9 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
+    "gh-pages": "^3.2.3",
     "husky": "^4.2.5",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"

diff --git a/public/index.html b/public/index.html
@@ -22,10 +22,15 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/ThemeProvider/GlobalStyles.styled.js b/src/ThemeProvider/GlobalStyles.styled.js
@@ -0,0 +1,53 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyles = createGlobalStyle`
+    body{
+        margin: 0;
+        padding: 0;
+        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    }
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        list-style: none;
+        text-decoration: none;
+    }
+    .title{
+        font-size: 3.75rem;
+    }
+    .mx-0{
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .my-0{
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .mt-1 {
+        margin-top: 8px;
+    }
+    .mb-1 {
+        margin-bottom: 8px;
+    }
+    .mt-2 {
+        margin-top: 16px;
+    }
+    .mb-2 {
+        margin-bottom: 16px;
+    }
+    .px-1{
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+    .py-1{
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+    .mr-1{
+        margin-right: 8px;
+    }
+    .text-error{
+        color: red;
+    }
+`;
diff --git a/src/ThemeProvider/Provider.jsx b/src/ThemeProvider/Provider.jsx
@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { AppContext } from '../context/appContext';
+import { GlobalStyles } from './GlobalStyles.styled';
+import { darkTheme, lightTheme } from './values';
+
+const Provider = ({ children }) => {
+  const { state } = useContext(AppContext);
+
+  return (
+    <ThemeProvider theme={state.theme ? lightTheme : darkTheme}>
+      <GlobalStyles />
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default Provider;
diff --git a/src/ThemeProvider/index.js b/src/ThemeProvider/index.js
@@ -0,0 +1,3 @@
+import ThemeProvider from './Provider';
+
+export { ThemeProvider };
diff --git a/src/ThemeProvider/values.js b/src/ThemeProvider/values.js
@@ -0,0 +1,43 @@
+const lightTheme = {
+  body: '#E5E5E5',
+  color: '#000',
+  headerBg: '#5e72e4',
+  textTiny: 'rgb(70, 70, 70)',
+  btn: {
+    primary: '#5e72e4',
+    info: '#11cdef',
+    success: '#2dce89',
+    warning: '#fb6340;',
+    darger: '#f5365c',
+  },
+  card: {
+    background: '#fff',
+    hover: 'rgb(240, 240, 240)',
+    headerBg: '##5e72e4',
+    headerHoverText: '#000',
+    btnShadow: '0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);',
+  },
+};
+
+const darkTheme = {
+  body: '#1e1e2f',
+  color: '#fff',
+  headerBg: '#7b1fa2',
+  textTiny: '#fff',
+  btn: {
+    primary: '#7b1fa2',
+    info: '#3358f4',
+    success: '#00f2c3',
+    warning: '#ff8d72',
+    darger: '#fd5d93',
+  },
+  card: {
+    background: '#27293d',
+    hover: 'hsla(0,0%,100%,.1)',
+    headerBg: '#7b1fa2',
+    headerHoverText: '#fff',
+    btnShadow: '2px 2px 6px rgba(0, 0, 0, 0.4)',
+  },
+};
+
+export { lightTheme, darkTheme };
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
@@ -1,57 +1,21 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import React from 'react';
+import { HashRouter } 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';
+import Header from '../Header';
+import { ThemeProvider } from '../../ThemeProvider';
+import { AppRouter } from '../../routers/AppRouter';
+import { ContextWrapper } from '../../context/ContextWrapper';
 
 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>
-    </BrowserRouter>
+    <ContextWrapper>
+      <ThemeProvider>
+        <HashRouter>
+          <Header />
+          <AppRouter />
+        </HashRouter>
+      </ThemeProvider>
+    </ContextWrapper>
   );
 }
 

diff --git a/src/components/App/__tests__/App.test.js b/src/components/App/__tests__/App.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
+
+import App from '../index';
+
+describe('Testing App component', () => {
+  let tree;
+
+  beforeAll(() => {
+    ReactDOM.createPortal = jest.fn((element) => {
+      return element;
+    });
+  });
+
+  afterEach(() => {
+    ReactDOM.createPortal.mockClear();
+  });
+
+  beforeEach(() => {
+    tree = render(<App />);
+  });
+
+  it('should to take snapshop', () => {
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render any JSX', () => {
+    expect(tree.getByText('Welcome to the Challenge!').tagName).toBe('H2');
+  });
+});