From 90550838e5b6d76b42fdae7431288e1c0d473224 Mon Sep 17 00:00:00 2001 From: miriam-alvarezp Date: Fri, 2 Apr 2021 16:29:34 -0600 Subject: [PATCH 1/8] Mini-Challenge 3: Init Player page --- src/components/App/App.component.jsx | 31 +++++++------------- src/pages/Secret/Secret.page.jsx | 24 --------------- src/pages/Secret/index.js | 1 - src/pages/VideoPlayer/VideoPlayer.page.jsx | 13 ++++++++ src/pages/VideoPlayer/VideoPlayer.styles.css | 0 src/pages/VideoPlayer/index.js | 1 + 6 files changed, 24 insertions(+), 46 deletions(-) delete mode 100644 src/pages/Secret/Secret.page.jsx delete mode 100644 src/pages/Secret/index.js create mode 100644 src/pages/VideoPlayer/VideoPlayer.page.jsx create mode 100644 src/pages/VideoPlayer/VideoPlayer.styles.css create mode 100644 src/pages/VideoPlayer/index.js diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx index 89ab3e60c..6a1cc6463 100644 --- a/src/components/App/App.component.jsx +++ b/src/components/App/App.component.jsx @@ -1,39 +1,25 @@ -import React, { useLayoutEffect } from 'react'; +import React from 'react'; import { BrowserRouter, Switch, Route } 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 Layout from '../Layout'; +import VideoPlayer from '../VideoPlayer'; import HeaderMenu from '../Header'; import { random } from '../../utils/fns'; 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 doSearch = (keyword) => { + console.log('DOSEARCH: ', keyword); + }; return ( - + @@ -43,8 +29,11 @@ function App() { + + + - + HELLO diff --git a/src/pages/Secret/Secret.page.jsx b/src/pages/Secret/Secret.page.jsx deleted file mode 100644 index bb9df9b2d..000000000 --- a/src/pages/Secret/Secret.page.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function SecretPage() { - return ( -
-
-        welcome, voyager...
-         ← go back
-      
-