Hcastillo br Mini-Challenge 3: Hooks

.env

@@ -0,0 +1 @@
+REACT_APP_API_KEY_YOUTUBE="AIzaSyBcmkEcOJFaLpBJWh-HrmCbJspCac0VsJs"

.eslintrc

@@ -2,8 +2,8 @@
   "extends": ["react-app", "airbnb", "prettier", "prettier/react"],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
+    "prettier/prettier":0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

.gitignore

@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.env
 # dependencies
 /node_modules
 /.pnp
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

README.md

@@ -1,3 +1,3 @@
 # Wizeline Academy - 2021 React Bootcamp
 
-Please refere to the following [GIST](https://gist.github.com/jparciga/83341911fbc8cd716be12af50c0e496a) for further instructions
+Please refere to the following [GIST](https://gist.github.com/villacoder/9f980254461fa8bfbe93067db2126872) for further instructions

package.json

@@ -3,14 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "bootstrap": "^5.0.2",
+    "dark-mode-toggle": "^0.8.0",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.6.1",
     "react-dom": "^16.13.1",
+    "react-dotenv": "^0.1.3",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^4.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "^4.0.3",
+    "react-simple-flex-grid": "^1.3.21",
+    "simple-youtube-api": "^5.2.1",
+    "styled-components": "^5.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/Principal.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import App from './components/App/App.component';
+import AppProvider from './providers/App/AppProvider';
+
+export const Principal = () => {
+  return (
+    <AppProvider>
+      <App />
+    </AppProvider>
+  );
+};

src/components/App/App.component.jsx

@@ -1,57 +1,38 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useContext } 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 Fortune from '../Fortune';
+import MainPage from '../../pages/Main';
 import Layout from '../Layout';
-import { random } from '../../utils/fns';
+import { AppContext } from '../../providers/App/AppProvider';
 
 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 { app } = useContext(AppContext);
+  const { darkMode } = app;
 
   return (
+    <div className="backgroundColor" data-theme={darkMode ? 'dark' : 'light'}>
     <BrowserRouter>
       <AuthProvider>
-        <Layout>
-          <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
-            <Route exact path="/login">
+        <Switch>
+          <Route exact path="/">
+            <MainPage />
+          </Route>
+          <Route exact path="/login">
+            <Layout>
               <LoginPage />
-            </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
-            <Route path="*">
+            </Layout>
+          </Route>
+          <Route path="*">
+            <Layout>
               <NotFound />
-            </Route>
-          </Switch>
-          <Fortune />
-        </Layout>
+            </Layout>
+          </Route>
+        </Switch>
       </AuthProvider>
     </BrowserRouter>
+    </div>
   );
 }
 

src/components/Layout/Layout.component.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import './Layout.styles.css';
-
 function Layout({ children }) {
   return <main className="container">{children}</main>;
 }

src/components/Layout/Layout.styles.css

@@ -1,9 +0,0 @@
-.container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: -3rem;
-}

src/components/NavSearchBar/NavSearchBar.jsx

@@ -0,0 +1,133 @@
+import React, { useState, useContext } from 'react';
+import { Navbar, Nav, Form, FormControl, Button } from 'react-bootstrap';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { Link } from 'react-router-dom';
+import { BiSearchAlt2 } from 'react-icons/bi';
+import { FaRegUserCircle } from 'react-icons/fa';
+import { AppContext } from '../../providers/App/AppProvider';
+import { types } from '../../providers/App/types';
+
+export const NavSearchBar = () => {
+  const { dispatch } = useContext(AppContext);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [checked, setChecked] = React.useState(false);
+
+  const toggleChecked = () => {
+    setChecked((prev) => !prev);
+    dispatch({
+      type: types.setDarkMode,
+    });
+  };
+
+  const onSubmit = (event) => {
+    dispatch({
+      type: types.setPlayVideo,
+      payload: false,
+    });
+    dispatch({
+      type: types.setSearchButton,
+      payload: true,
+    });
+    dispatch({
+      type: types.setPassToChild,
+      payload: searchTerm,
+    });
+    event.preventDefault();
+  };
+
+  return (
+    <Navbar style={{ backgroundColor: '#1C5476' }} expand="lg">
+      <Navbar.Brand
+        style={{
+          color: '#FFFFFF',
+          padding: '10px 10px',
+          justifyContent: 'space-around',
+        }}
+        href="/"
+      >
+        WizeTube
+      </Navbar.Brand>
+      <Navbar.Toggle aria-controls="navbarScroll" />
+      <Navbar.Collapse id="navbarScroll" style={{ justifyContent: 'space-around' }}>
+        <Nav
+          className="mr-auto my-2 my-lg-0"
+          style={{
+            maxHeight: '100px',
+            backgroundColor: '#1C5476',
+            justifyContent: 'space-around',
+          }}
+          navbarScroll
+        >
+          {' '}
+        </Nav>
+        <div style={{ justifyContent: 'space-around' }}>
+          <Form
+            className="d-flex"
+            onSubmit={onSubmit}
+            style={{
+              backgroundColor: '#3E6D8A',
+              border: 'none',
+              overflow: 'hidden',
+              borderRadius: '5px',
+              outline: 'none',
+            }}
+          >
+            <Button
+              style={{
+                backgroundColor: '#3E6D8A',
+                border: 'none',
+                overflow: 'hidden',
+                outline: 'none',
+              }}
+              onClick={() => {
+                dispatch({
+                  type: types.setSearchButton,
+                  payload: true,
+                });
+                dispatch({
+                  type: types.setPlayVideo,
+                  payload: false,
+                });
+                dispatch({
+                  type: types.setPassToChild,
+                  payload: searchTerm,
+                });
+              }}
+            >
+              <BiSearchAlt2 color="white" size="30px" />
+            </Button>
+            <FormControl
+              type="search"
+              placeholder="Search.."
+              aria-label="Search"
+              style={{
+                backgroundColor: '#3E6D8A',
+                border: 'none',
+                color: 'white',
+                outline: 'none',
+                boxShadow: 'none',
+              }}
+              onChange={(event) => setSearchTerm(event.target.value)}
+            />
+          </Form>{' '}
+        </div>
+        <FormControlLabel
+          control={<Switch checked={checked} onChange={toggleChecked} />}
+          label="Dark mode"
+          style={{
+            color: 'white',
+          }}
+        />
+        <div style={{ justifyContent: 'space-around' }}>
+          <Nav>
+            <Link to="/login">
+              {' '}
+              <FaRegUserCircle color="white" size="35px" />
+            </Link>
+          </Nav>
+        </div>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+};

src/components/VideoCard/VideoCard.js

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import Grid from '@material-ui/core/Grid';
+import { AppContext } from '../../providers/App/AppProvider';
+
+const VideoCard = ({ changeSelection, videoList, selectedVideoId }) => {
+  const { app } = useContext(AppContext);
+  const { darkMode } = app;
+  const changeSelectedVideo = (data) => {
+    changeSelection(data);
+  };
+
+  return (
+    <>
+      {videoList.length > 0 &&
+        videoList.map((data) => {
+          if (data?.id !== selectedVideoId) {
+            return (
+              <Grid
+                item
+                xs={8}
+                sm={10}
+                md={4}
+                lg={3}
+                xl={3}
+                key={data?.id}
+                onClick={() => {
+                  changeSelectedVideo(data);
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                <div className="backgroundColor" data-theme={darkMode ? 'dark' : 'light'}>
+                  <div className="card" data-theme={darkMode ? 'dark' : 'light'}>
+                    <div className="card-cover-image">
+                      <img src={data?.thumbnails.medium.url} alt="thumbnail" />
+                    </div>
+                    <div className="card-box" data-theme={darkMode ? 'dark' : 'light'}>
+                      <div className="card-title" data-theme={darkMode ? 'dark' : 'light'}>
+                        <span>{data?.title}</span>
+                      </div>
+                      <div className="card-subtitle" data-theme={darkMode ? 'dark' : 'light'}>{data?.channel.title}</div>
+                      <div className="card-content" data-theme={darkMode ? 'dark' : 'light'}>
+                        <p>{data?.description}</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Grid>
+            );
+          }
+        })}
+    </>
+  );
+};
+
+export default VideoCard;