cvillanueva84 · kleyla · Jul 23, 2021 · Jul 23, 2021 · Jul 24, 2021 · Jul 24, 2021
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_YOUTUBE_API_KEY=AIzaSyB4emm7HLDp7mMWLbBDJyGnt0YtHcoUHE0
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,32 @@
 {
   "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",
     "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 +35,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,6 +22,10 @@
       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>

diff --git a/src/GlobalStyles.styled.js b/src/GlobalStyles.styled.js
@@ -0,0 +1,15 @@
+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;
+    }
+`;
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
@@ -1,57 +1,31 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import React, { useReducer } from 'react';
+import { ThemeProvider } from 'styled-components';
 
-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 { AppContext } from '../../context/appContext';
+import { appReducer } from '../../context/appReducer';
+import { GlobalStyles } from '../../GlobalStyles.styled';
+import CardsContainer from '../CardsContainer';
+import Header from '../Header';
+import { lightTheme, darkTheme } from '../../theming';
 
 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);
+  const init = () => {
+    return {
+      search: 'wizeline',
+      showVideoDetails: false,
+      theme: true,
     };
-  }, []);
+  };
+  const [state, dispatch] = useReducer(appReducer, {}, init);
 
   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>
+    <AppContext.Provider value={{ state, dispatch }}>
+      <ThemeProvider theme={state.theme ? lightTheme : darkTheme}>
+        <GlobalStyles />
+        <Header />
+        <CardsContainer />
+      </ThemeProvider>
+    </AppContext.Provider>
   );
 }
 

diff --git a/src/components/App/__tests__/App.test.js b/src/components/App/__tests__/App.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from '..';
+
+describe('Testing App component', () => {
+  const tree = render(<App />);
+
+  it('should to take snapshop', () => {
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render any JSX', () => {
+    render(<App />);
+    expect(screen.getByText('Welcome to the Challenge!').tagName).toBe('H2');
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_YOUTUBE_API_KEY=AIzaSyB4emm7HLDp7mMWLbBDJyGnt0YtHcoUHE0