Mini challenge 3

.eslintrc

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

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.env

.vscode/launch.json

@@ -0,0 +1,32 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Chrome",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "command": "npm start",
+      "name": "Run npm start",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "type": "browser-preview",
+      "name": "Browser Preview: Attach",
+      "request": "attach"
+    },
+    {
+      "type": "browser-preview",
+      "request": "launch",
+      "name": "Browser Preview: Launch",
+      "url": "http://localhost:3000"
+    }
+  ]
+}

package.json

@@ -10,7 +10,9 @@
     "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",
+    "react-uuid": "^1.0.2",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

public/youtube-request.js

@@ -0,0 +1,41 @@
+/* global gapi */
+
+/**
+ * Sample JavaScript code for youtube.search.list
+ * See instructions for running APIs Explorer code samples locally:
+ * https://developers.google.com/explorer-help/guides/code_samples#javascript
+ */
+
+function loadClient(key) {
+  gapi.client.setApiKey(key);
+  return gapi.client
+    .load('https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest')
+    .then(
+      function () {
+        console.log('GAPI client loaded for API');
+      },
+      function (err) {
+        console.error('Error loading GAPI client for API', err);
+      }
+    );
+}
+// Make sure the client is loaded before calling this method.
+function execute(search) {
+  return gapi.client.youtube.search
+    .list({
+      part: ['snippet', 'id'],
+      maxResults: 25,
+      q: search,
+      type: ['video'],
+    })
+    .then(
+      function (response) {
+        // Handle the results here (response.result has the parsed body).
+        console.log('Response', response);
+        return response.result;
+      },
+      function (err) {
+        console.error('Execute error', err);
+      }
+    );
+}

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 VideoProvider from '../../state';
+import ViewerPage from '../../pages/Viewer';
 
 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>
+        <VideoProvider>
+          <Layout>
+            <Switch>
+              <Route exact path="/">
+                <HomePage />
+              </Route>
+              <Route exact path="/login">
+                <LoginPage />
+              </Route>
+              <Private exact path="/secret">
+                <SecretPage />
+              </Private>
+              <Route exact path="/viewer/:id">
+                <ViewerPage />
+              </Route>
+              <Route path="*">
+                <NotFound />
+              </Route>
+            </Switch>
+          </Layout>
+        </VideoProvider>
       </AuthProvider>
     </BrowserRouter>
   );

src/components/Header/Header.component.jsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useVideo } from '../../state';
+import useImportScript from '../../utils/hooks/useImportScrip';
+
+const Header = styled.header`
+  color: #fff;
+  background-color: #1c5476;
+  position: static;
+  width: 100%;
+  display: flex;
+  z-index: 1100;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  flex-direction: column;
+`;
+
+const NavBar = styled.div`
+  min-height: 64px;
+  color: white;
+  padding-left: 24px;
+  padding-right: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+const SvgIcon = styled.svg`
+  font-size: 1.5rem;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  user-select: none;
+`;
+
+const Button = styled.button`
+  padding: 12px;
+  font-size: 1.5rem;
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+  user-select: none;
+  margin-right: 16px;
+`;
+
+const SearchBox = styled.div`
+  width: auto;
+  margin-left: 24px;
+  position: relative;
+  margin-right: 16px;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.15);
+`;
+
+const SearchIconDiv = styled.div`
+  padding: 0px 16px;
+  position: absolute;
+  align-items: center;
+  pointer-events: none;
+  justify-content: center;
+`;
+
+const SearchInputDiv = styled.div`
+  cursor: text;
+  display: inline-flex;
+  position: relative;
+  font-size: 1rem;
+  box-sizing: border-box;
+  align-items: center;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 400;
+  line-height: 1.1876em;
+  letter-spacing: 0.00938em;
+`;
+
+const SearchInput = styled.input`
+  width: 20ch;
+  font-size: inherit;
+  padding: 8px 8px 8px 0px;
+  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  padding-left: calc(1em + 32px);
+  color: currentColor;
+  height: 1.1876em;
+  margin: 0;
+  display: block;
+  min-width: 0;
+  background: none;
+  box-sizing: content-box;
+  letter-spacing: inherit;
+  animation-duration: 10ms;
+  -webkit-tap-highlight-color: transparent;
+
+  &:focus {
+    outline: 0;
+  }
+`;
+
+const ToggleDiv = styled.div`
+  display: flex;
+`;
+
+const ToggleLabel = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+`;
+
+const ToggleButton = styled.span`
+  width: 20px;
+  height: 20px;
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+    0px 1px 3px 0px rgb(0 0 0 / 12%);
+  border-radius: 50%;
+  background-color: currentColor;
+`;
+
+const Client = () => {
+  useImportScript('https://apis.google.com/js/api.js');
+  useImportScript('youtube-request.js');
+  return null;
+};
+
+function HeaderComponent() {
+  const { state, dispatch } = useVideo();
+  const { search } = state;
+
+  async function submitHandler(event) {
+    event.preventDefault();
+    await window.loadClient(process.env.REACT_APP_KEY);
+    const result = await window.execute(search);
+    dispatch({ type: 'SUBMIT', payload: result.items });
+  }
+
+  return (
+    <Header>
+      <Client />
+      <NavBar>
+        <Button>
+          <span>
+            <SvgIcon viewBox="0 0 24 24">
+              <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+            </SvgIcon>
+          </span>
+        </Button>
+        <SearchBox>
+          <SearchIconDiv>
+            <SvgIcon>
+              <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+            </SvgIcon>
+          </SearchIconDiv>
+          <SearchInputDiv>
+            <form onSubmit={submitHandler}>
+              <SearchInput
+                type="text"
+                placeholder="Search..."
+                value={search}
+                onChange={(e) => dispatch({ type: 'EDIT', payload: e.target.value })}
+              />
+            </form>
+          </SearchInputDiv>
+        </SearchBox>
+        <ToggleDiv>
+          <ToggleLabel>
+            <ToggleButton />
+          </ToggleLabel>
+        </ToggleDiv>
+        <span>Dark mode</span>
+      </NavBar>
+    </Header>
+  );
+}
+
+export default HeaderComponent;

src/components/Header/index.js

@@ -0,0 +1 @@
+export { default } from './Header.component';

src/components/History/History.component.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import uuid from 'react-uuid';
+
+import { useVideo } from '../../state';
+
+function History() {
+  const { state } = useVideo();
+  const { history } = state;
+
+  return (
+    <div>
+      <h3>Search History</h3>
+      <ul>
+        {history.map((item) => (
+          <li key={uuid()}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default History;

src/components/History/index.js

@@ -0,0 +1 @@
+export { default } from './History.component';