wizeline · marrossa86 · Sep 16, 2020 · Sep 16, 2020 · Sep 16, 2020 · Sep 16, 2020
diff --git a/.eslintrc b/.eslintrc
@@ -7,6 +7,7 @@
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
     "react/destructuring-assignment": "off",
     "react/jsx-props-no-spreading": "off",
     "react/prop-types": "off",

diff --git a/.prettierrc b/.prettierrc
@@ -1,9 +1,5 @@
 {
-  "trailingComma": "es5",
   "tabWidth": 2,
-  "printWidth": 90,
-  "semi": true,
-  "singleQuote": true,
-  "jsxSingleQuote": false,
-  "arrowParens": "always"
+  "useTabs": false,
+  "editor.formatOnSave": true
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,11 @@
     "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",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^1.2.0",
+    "styled-components": "5.2.0",
+    "axios": "0.20.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -21,6 +25,8 @@
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "babel-loader": "^8.1.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -31,8 +37,10 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.13",
+    "node-sass": "4.14.0",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "react-is": "^16.13.1"
   },
   "browserslist": {
     "production": [
@@ -47,7 +55,7 @@
     ]
   },
   "lint-staged": {
-    "*.{js, jsx, css, json}": [
+    "*.{js, jsx, css, scss, json}": [
       "yarn run lint:fix",
       "pretty-quick --staged",
       "git add"

diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -22,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="https://apis.google.com/js/client.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/apis/youtube.js b/src/apis/youtube.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const KEY = "AIzaSyDYJVu8aH3B6BcGJz3tJCCu-wgoTuQUE4k";
+
+export default axios.create({
+  baseURL: "https://www.googleapis.com/youtube/v3/",
+  params: {
+    part: "snippet",
+    maxResults: 20,
+    key: KEY,
+  },
+});
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
@@ -1,58 +1,43 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import React, { useState } 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 Layout from '../Layout';
-import { random } from '../../utils/fns';
+import AuthProvider from "../../providers/Auth";
+import HomePage from "../../pages/Home";
+import LoginPage from "../../pages/Login";
+import Video from "../../pages/Video";
+import NotFound from "../../pages/NotFound";
+import Favorites from "../../pages/Favorites";
+import Private from "../Private";
+import Layout from "../Layout";
 
-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 = () => {
+  const [activeVideo, setActiveVideo] = useState(null);
 
   return (
     <BrowserRouter>
       <AuthProvider>
         <Layout>
           <Switch>
             <Route exact path="/">
-              <HomePage />
+              <HomePage onSetActiveVideo={(video) => setActiveVideo(video)} />
             </Route>
             <Route exact path="/login">
               <LoginPage />
             </Route>
-            <Private exact path="/secret">
-              <SecretPage />
+            <Route path="/videos/:id">
+              <Video video={activeVideo} />
+            </Route>
+            <Private exact path="/favorites">
+              <Favorites onSetActiveVideo={(video) => setActiveVideo(video)} />
             </Private>
             <Route path="*">
               <NotFound />
             </Route>
           </Switch>
-          <Fortune />
         </Layout>
       </AuthProvider>
     </BrowserRouter>
   );
-}
+};
 
 export default App;
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -1 +1 @@
-export { default } from './App.component';
+export { default } from "./App.component";
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/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx
@@ -1,9 +1,88 @@
-import React from 'react';
+import React, { useContext, useMemo, useState } from "react";
+import { ThemeProvider, createGlobalStyle } from "styled-components";
 
-import './Layout.styles.css';
+import MainMenu from "../MainMenu";
 
-function Layout({ children }) {
-  return <main className="container">{children}</main>;
-}
+import "./Layout.styles.css";
+
+const commontheme = {
+  fontFam: "monospace",
+};
+
+const lightTheme = {
+  ...commontheme,
+  bg: "#e3dae7",
+  hover: "#d3b3b8",
+  link: "#714d69",
+  menuBg: "#a0849d",
+  text: "#aaa",
+};
+
+const darkTheme = {
+  ...commontheme,
+  bg: "#43b5a0",
+  hover: "#fa448c",
+  link: "#491d88",
+  menuBg: "#fec859",
+  text: "#fff",
+};
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    font-family: ${(props) => props.theme.fontFam};
+    color: ${(props) => props.theme.text};
+    background-color: ${(props) => props.theme.bg};
+
+    a {
+      color: ${(props) => props.theme.link};
+    }
+
+    a:hover {
+      color: ${(props) => props.theme.hover};
+    }
+
+    .component__main-menu {
+      background-color: ${(props) => props.theme.menuBg}
+    }
+  }
+`;
+
+const QueryContext = React.createContext([{}, () => {}]);
+
+export const useQueryContext = () => {
+  const context = useContext(QueryContext);
+
+  if (!context) {
+    throw new Error("useQueryContext is not present");
+  }
+
+  return context;
+};
+
+const Layout = ({ children }) => {
+  const [mode, setMode] = useState("light");
+  const [queryString, setQueryString] = useState("Wizeline");
+
+  const contextValue = useMemo(() => ({ queryString, setQueryString }), [
+    queryString,
+    setQueryString,
+  ]);
+
+  return (
+    <ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
+      <GlobalStyles />
+      <div>
+        <MainMenu
+          onSetMode={(theme) => setMode(theme)}
+          queryString={queryString}
+          onSearch={(qs) => setQueryString(qs)}
+        />
+        <QueryContext.Provider value={contextValue}>
+          <main className="container">{children}</main>
+        </QueryContext.Provider>
+      </div>
+    </ThemeProvider>
+  );
+};
 
 export default Layout;
diff --git a/src/components/Layout/Layout.styles.css b/src/components/Layout/Layout.styles.css
@@ -1,9 +1,6 @@
 .container {
-  width: 100vw;
-  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: -3rem;
 }
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
@@ -1 +1,4 @@
-export { default } from './Layout.component';
+import { useQueryContext } from "./Layout.component";
+
+export { default } from "./Layout.component";
+export { useQueryContext };
diff --git a/src/components/MainMenu/MainMenu.jsx b/src/components/MainMenu/MainMenu.jsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Link, useHistory } from "react-router-dom";
+import { Button, Dropdown, Icon } from "semantic-ui-react";
+
+import { useAuth } from "../../providers/Auth";
+
+import "./MainMenu.scss";
+
+const MainMenu = ({ queryString, onSearch, onSetMode }) => {
+  const history = useHistory();
+  const { authenticated, logout } = useAuth();
+
+  const deAuthenticate = (event) => {
+    event.preventDefault();
+    logout();
+    history.push("/");
+  };
+
+  return (
+    <div className="component__main-menu">
+      <div className="menu-options">
+        <Dropdown item icon="bars" simple>
+          <Dropdown.Menu>
+            <Dropdown.Item>
+              <Link to="/">Home</Link>
+            </Dropdown.Item>
+            {authenticated && (
+              <Dropdown.Item>
+                <Link to="/favorites">Favorites</Link>
+              </Dropdown.Item>
+            )}
+          </Dropdown.Menu>
+        </Dropdown>
+      </div>
+      <div className="component__search-bar">
+        <input
+          onChange={(event) => onSearch(event.target.value)}
+          name="video-search"
+          type="text"
+          value={queryString}
+        />
+        {console.log({ queryString })}
+      </div>
+      <div className="theme-options">
+        <Button.Group>
+          <Button
+            icon="sun"
+            content="Light mode"
+            onClick={() => onSetMode("light")}
+          />
+          <Button
+            icon="moon"
+            content="Dark mode"
+            onClick={() => onSetMode("dark")}
+          />
+        </Button.Group>
+      </div>
+      <div className="user-menu">
+        {authenticated ? (
+          <Link to="/" onClick={deAuthenticate}>
+            <Icon name="user" />
+          </Link>
+        ) : (
+          <Link to="/login">
+            <Icon name="user outline" />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MainMenu;
diff --git a/src/components/MainMenu/MainMenu.scss b/src/components/MainMenu/MainMenu.scss
@@ -0,0 +1,13 @@
+.component__main-menu {
+  display: flex;
+  padding: 10px;
+
+  .menu-options {
+    padding: 10px;
+  }
+
+  .user-menu {
+    padding: 10px;
+    margin-left: auto !important;
+  }
+}
diff --git a/src/components/MainMenu/index.js b/src/components/MainMenu/index.js
@@ -0,0 +1 @@
+export { default } from "./MainMenu";