wdonet · SharaGonzalez · Feb 20, 2021 · Feb 20, 2021 · Feb 23, 2021 · Feb 23, 2021
diff --git a/.gitignore b/.gitignore
@@ -13,10 +13,7 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,19 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "prop-types": "^15.7.2",
     "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.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:coverage": "react-scripts test --coverage",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
@@ -30,9 +36,12 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.2.5",
+    "jest": "^24.9.0",
+    "jest-styled-components": "^7.0.3",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "react-test-renderer": "^17.0.1"
   },
   "browserslist": {
     "production": [
@@ -58,4 +67,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -12,29 +12,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>React Bootcamp Project</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -6,20 +6,10 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"
-}
+}
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
diff --git a/src/components/App/index.js b/src/components/App/index.js
diff --git a/src/components/App/index.jsx b/src/components/App/index.jsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import { lightTheme, darkTheme } from '../../theme';
+import GlobalStyle from '../../theme/globalStyle';
+
+import AuthProvider from '../../providers/Auth';
+import YoutubeDataProvider from '../../providers/YoutubeData';
+import GlobalProvider from '../../providers/Global';
+
+import Header from '../Header';
+import ProtectedRoute from '../ProtectedRoute';
+import HomePage from '../../pages/Home';
+import VideoPage from '../../pages/Video';
+import FavoritesPage from '../../pages/Favorites';
+
+function App() {
+  const [theme, setTheme] = useState('light');
+  const [iframeAPIReady, setIframeAPIReady] = useState(false);
+  const handleThemeSwitch = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+  };
+
+  useEffect(() => {
+    const iframeScript = document.createElement('script');
+    iframeScript.src = 'https://www.youtube.com/iframe_api';
+    iframeScript.async = true;
+    iframeScript.addEventListener('load', () => {
+      window.onYouTubeIframeAPIReady = () => {
+        setIframeAPIReady(true);
+      };
+    });
+    document.body.appendChild(iframeScript);
+  }, []);
+
+  return (
+    <>
+      <GlobalStyle theme={theme === 'light' ? lightTheme : darkTheme} />
+      <BrowserRouter>
+        <AuthProvider>
+          <YoutubeDataProvider iframeAPIReady={iframeAPIReady}>
+            <GlobalProvider>
+              <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
+                <Header handleThemeSwitch={handleThemeSwitch} />
+                <Switch>
+                  <Route exact path="/">
+                    <HomePage />
+                  </Route>
+                  <Route exact path="/video/:videoId">
+                    <VideoPage />
+                  </Route>
+                  <ProtectedRoute exact path="/favorites">
+                    <FavoritesPage />
+                  </ProtectedRoute>
+                </Switch>
+              </ThemeProvider>
+            </GlobalProvider>
+          </YoutubeDataProvider>
+        </AuthProvider>
+      </BrowserRouter>
+    </>
+  );
+}
+
+export default App;
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/Grid/__tests__/__snapshots__/grid.test.jsx.snap b/src/components/Grid/__tests__/__snapshots__/grid.test.jsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid renders correctly 1`] = `
+.c1 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
+  grid-gap: 1rem;
+}
+
+.c0 {
+  padding: 2rem;
+}
+
+<div
+  className="c0"
+>
+  <ul
+    className="c1"
+  >
+
+    <div>
+      Hola
+    </div>
+    <div>
+      Adios
+    </div>
+  </ul>
+</div>
+`;
diff --git a/src/components/Grid/__tests__/grid.test.jsx b/src/components/Grid/__tests__/grid.test.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+import { ThemeProvider } from 'styled-components';
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';
+
+import Grid from '../index';
+import AuthProvider from '../../../providers/Auth';
+import YoutubeDataProvider from '../../../providers/YoutubeData';
+
+import { lightTheme } from '../../../theme';
+
+describe('Grid', () => {
+  test('renders correctly', () => {
+    const items = [<div key="1">Hola</div>, <div key="2">Adios</div>];
+    const tree = renderer
+      .create(
+        <BrowserRouter>
+          <AuthProvider>
+            <YoutubeDataProvider>
+              <ThemeProvider theme={lightTheme}>
+                <Grid gridItems={items} />
+              </ThemeProvider>
+            </YoutubeDataProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Grid/index.jsx b/src/components/Grid/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { GridContainer, List } from './styled';
+
+const Grid = ({ gridItems }) => {
+  return (
+    <GridContainer>
+      <List> {gridItems}</List>
+    </GridContainer>
+  );
+};
+
+export default Grid;
diff --git a/src/components/Grid/styled.js b/src/components/Grid/styled.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const List = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-gap: 1rem;
+`;
+
+const GridContainer = styled.div`
+  padding: 2rem;
+`;
+
+export { GridContainer, List };