wdonet · AndresBilliniWizeline · Feb 18, 2021 · Feb 19, 2021 · Mar 5, 2021 · Mar 5, 2021
diff --git a/.env.development b/.env.development
@@ -0,0 +1,2 @@
+REACT_APP_BASE_URL = https://www.googleapis.com/youtube/v3
+REACT_APP_API_KEY = AIzaSyDmDt_il76Hh7Big2gwbYM7IdUCqpyc88A
diff --git a/.env.production b/.env.production
@@ -0,0 +1,2 @@
+REACT_APP_BASE_URL = https://www.googleapis.com/youtube/v3
+REACT_APP_API_KEY = AIzaSyDmDt_il76Hh7Big2gwbYM7IdUCqpyc88A
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,24 +1,32 @@
 {
-  "name": "react-certification-2020",
+  "name": "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",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "4.0.3",
+    "styled-components": "^5.2.1",
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint ./src --ext .js,.jsx",
-    "lint:fix": "eslint ./src --ext .js,.jsx --fix"
+    "test": "react-scripts test --coverage",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "devDependencies": {
     "eslint-config-airbnb": "^18.2.0",
@@ -45,17 +53,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "lint-staged": {
-    "*.{js, jsx, css, json}": [
-      "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,11 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap"
+      rel="stylesheet"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -21,7 +26,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>React Challenge Andrés Billini</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/assets/account.svg b/src/assets/account.svg
diff --git a/src/assets/menu.svg b/src/assets/menu.svg
diff --git a/src/assets/search.svg b/src/assets/search.svg
diff --git a/src/components/App/App.component.copy.jsx b/src/components/App/App.component.copy.jsx
@@ -0,0 +1,62 @@
+import React, { useLayoutEffect } from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+
+import AuthProvider from '../../providers/Auth';
+import HomePage from '../../pages/Home';
+import VideoDetails from '../../pages/VideoDetails';
+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 AppCopy() {
+  useLayoutEffect(() => {
+    const { body } = document;
+
+    const 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="/video/:id">
+              <VideoDetails />
+            </Route>
+            <Route exact path="/login">
+              <LoginPage />
+            </Route>
+            <Private exact path="/secret">
+              <SecretPage />
+            </Private>
+            <Route path="*">
+              <NotFound />
+            </Route>
+          </Switch>
+          {/* <Fortune /> */}
+        </Layout>
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}
+
+export default AppCopy;
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';
@@ -7,49 +7,35 @@ 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 ThemeBaseProvider from '../../providers/theme';
+import VideoDetails from '../../pages/VideoDetails/VideoDetails';
 
 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>
+        <ThemeBaseProvider>
+          <Layout>
+            <Switch>
+              <Route exact path="/">
+                <HomePage />
+              </Route>
+              <Route exact path="/video/:id">
+                <VideoDetails />
+              </Route>
+              <Route exact path="/login">
+                <LoginPage />
+              </Route>
+              <Private exact path="/secret">
+                <SecretPage />
+              </Private>
+              <Route path="*">
+                <NotFound />
+              </Route>
+            </Switch>
+          </Layout>
+        </ThemeBaseProvider>
       </AuthProvider>
     </BrowserRouter>
   );

diff --git a/src/components/App/App.component.test.jsx b/src/components/App/App.component.test.jsx
@@ -0,0 +1,17 @@
+// React
+import React from 'react';
+// Testing
+import { render, screen } from '@testing-library/react';
+// Components
+import App from './App.component';
+
+describe('App', () => {
+  beforeEach(() => {
+    render(<App />);
+  });
+  it('renders app component', () => {
+    expect(screen.getAllByRole('button').length).toEqual(1);
+    expect(screen.getAllByRole('main').length).toEqual(1);
+    expect(screen.getByText('Welcome to the Challenge!')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { useFortune } from '../../utils/hooks/useFortune';
-import './Fortune.styles.css';
+import { FortuneContainer } from './styles';
 
 function Fortune() {
   const { fortune } = useFortune();
 
-  return <span className="fortune">{fortune} </span>;
+  return <FortuneContainer>{fortune}</FortuneContainer>;
 }
 
 export default Fortune;
diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css
diff --git a/src/components/Fortune/styles.jsx b/src/components/Fortune/styles.jsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const FortuneContainer = styled.span`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+`;
diff --git a/src/components/Home/HomeList.jsx b/src/components/Home/HomeList.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+// Components
+import Card from '../common/Card';
+import { useVideos } from '../../providers/Videos/Videos.provider';
+
+const HomeList = () => {
+  const { videos } = useVideos();
+  return (
+    <>
+      {videos.map((item) => (
+        <Card
+          key={`${item.snippet.title}-${item.snippet.description}`}
+          title={item.snippet.title}
+          description={item.snippet.description}
+          image={item.snippet.thumbnails.high.url}
+          url={`/video/${item.id.videoId}`}
+        />
+      ))}
+    </>
+  );
+};
+
+export default HomeList;
diff --git a/src/components/Home/index.js b/src/components/Home/index.js
@@ -0,0 +1 @@
+export { default } from './HomeList';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		REACT_APP_BASE_URL = https://www.googleapis.com/youtube/v3
		REACT_APP_API_KEY = AIzaSyDmDt_il76Hh7Big2gwbYM7IdUCqpyc88A