Feat/mini challenge 5

coverage.txt

@@ -0,0 +1,29 @@
+--------------------------------|----------|----------|----------|----------|-------------------|
+File                            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
+--------------------------------|----------|----------|----------|----------|-------------------|
+All files                       |    69.81 |    27.27 |       50 |    69.23 |                   |
+ components/App                 |       75 |      100 |       75 |       75 |                   |
+  App.component.jsx             |       75 |      100 |       75 |       75 |          21,22,23 |
+ components/Layout              |      100 |      100 |      100 |      100 |                   |
+  Layout.component.jsx          |      100 |      100 |      100 |      100 |                   |
+ components/Navabar             |    70.37 |        0 |       25 |    69.23 |                   |
+  Navbar.component.jsx          |    70.37 |        0 |       25 |    69.23 |... 03,106,107,108 |
+  index.js                      |        0 |        0 |        0 |        0 |                   |
+ components/Switch              |      100 |      100 |      100 |      100 |                   |
+  ColoredSwitch.component.jsx   |      100 |      100 |      100 |      100 |                   |
+  index.js                      |        0 |        0 |        0 |        0 |                   |
+ components/VideoCard           |      100 |      100 |      100 |      100 |                   |
+  VideoCard.component.jsx       |      100 |      100 |      100 |      100 |                   |
+  index.js                      |        0 |        0 |        0 |        0 |                   |
+ components/VideosContainer     |       80 |       50 |       50 |       80 |                   |
+  VideosContainer.component.jsx |       80 |       50 |       50 |       80 |                35 |
+  index.js                      |        0 |        0 |        0 |        0 |                   |
+ pages/Home                     |      100 |      100 |      100 |      100 |                   |
+  Home.page.jsx                 |      100 |      100 |      100 |      100 |                   |
+ pages/VideoTemplate            |       90 |       50 |    66.67 |       90 |                   |
+  Video.page.jsx                |       90 |       50 |    66.67 |       90 |                32 |
+ utils                          |    69.23 |      100 |    33.33 |    69.23 |                   |
+  AppContext.js                 |    69.23 |      100 |    33.33 |    69.23 |       14,17,22,25 |
+ utils/hooks                    |     37.5 |        0 |    33.33 |     37.5 |                   |
+  useYouTube.js                 |     37.5 |        0 |    33.33 |     37.5 |... 34,35,37,38,42 |
+--------------------------------|----------|----------|----------|----------|-------------------|

package.json

@@ -3,14 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "axios": "^0.21.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.2",
+    "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.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -31,6 +40,7 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.13",
+    "msw": "^0.35.0",
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"
   },
@@ -45,17 +55,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"
-    }
   }
 }

src/components/App/App.component.jsx

@@ -1,57 +1,38 @@
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
+import PrivateRoute from '../Routes/Private/PrivateRoute.component';
 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 VideoDetails from '../../pages/VideoDetails';
+import FavoriteVideos from '../../pages/VideoTemplate/Favorite';
+import FavoriteVideoDetails from '../../pages/VideoDetails/Favorite/FavoriteVideoDetailes.page';
+import Navbar from '../Navabar';
 import Layout from '../Layout';
-import { random } from '../../utils/fns';
+import { AppProvider } from '../../utils/AppContext.provider';
 
 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>
+    <AppProvider>
+      <BrowserRouter>
+        <AuthProvider>
+          <Layout>
+            <Navbar />
+            <Switch>
+              <Route exact path="/">
+                <HomePage />
+              </Route>
+              <Route path="/video/:id" component={VideoDetails} />
+              <PrivateRoute path="/favorites" component={FavoriteVideos} exact />
+              <PrivateRoute path="/favorite/:id" component={FavoriteVideoDetails} />
+              <Route path="*">
+                <NotFound />
+              </Route>
+            </Switch>
+          </Layout>
+        </AuthProvider>
+      </BrowserRouter>
+    </AppProvider>
   );
 }
 

src/components/App/App.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App.component';
+import { AppProvider } from '../../utils/AppContext.provider';
+
+describe('Testing App component', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = render(
+      <AppProvider>
+        <App />
+      </AppProvider>
+    );
+  });
+
+  it('should to take snapshop', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});