Challenge3 - Hooks

.env.example

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=https://www.googleapis.com/youtube/v3/
+REACT_APP_API_KEY=API_KEY

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -3,14 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "dotenv": "^8.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.1",
+    "styled-icons": "^10.29.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -48,9 +53,7 @@
   },
   "lint-staged": {
     "*.{js, jsx, css, json}": [
-      "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
+      "pretty-quick --staged"
     ]
   },
   "husky": {

src/components/App/App.component.jsx

@@ -1,15 +1,15 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
+import AppProvider from '../../providers/App/AppProvider';
 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 Header from '../Header';
 
 function App() {
   useLayoutEffect(() => {
@@ -33,23 +33,25 @@ function App() {
   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>
+        <AppProvider>
+          <Header />
+          <Layout>
+            <Switch>
+              <Route exact path="/">
+                <HomePage />
+              </Route>
+              <Route exact path="/login">
+                <LoginPage />
+              </Route>
+              <Private exact path="/secret">
+                <SecretPage />
+              </Private>
+              <Route path="*">
+                <NotFound />
+              </Route>
+            </Switch>
+          </Layout>
+        </AppProvider>
       </AuthProvider>
     </BrowserRouter>
   );

src/components/Avatar/Avatar.component.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+
+const AvatarIcon = () => <Avatar/>;
+
+export default AvatarIcon;

src/components/Avatar/Avatar.styles.js

@@ -0,0 +1 @@
+import styled from 'styled-components';

src/components/Avatar/index.js

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

src/components/Header/Header.component.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Search from '../Search';
+import Menu from '../Menu';
+import Theme from '../Theme';
+import AvatarIcon from '../Avatar';
+import { HeaderStyle, Alignment } from './Header.styles';
+import { useApp } from '../../providers/App/AppProvider';
+
+function Header() {
+  const context = useApp();
+  const { isDark } = context;
+
+  return (
+    <HeaderStyle isDark={isDark}>
+      <Alignment float="left">
+        <Menu />
+        <Search />
+      </Alignment>
+      <Alignment float="right">
+        <Theme />
+        <AvatarIcon />
+      </Alignment>
+    </HeaderStyle>
+  );
+}
+
+export default Header;

src/components/Header/Header.styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const HeaderStyle = styled.header`
+  width: 100%;
+  height: 64px;
+  justify-content: space-between;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  color: #fff;
+  background-color: ${(props) => (props.isDark ? '#4a0039' : '#ff6868')};
+  box-sizing: border-box;
+  align-items: center;
+  padding: 1em;
+  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%),
+    0px 1px 10px 0px rgb(0 0 0 / 12%);
+`;
+
+export const Alignment = styled.div`
+  float: ${(props) => props.float};
+  display: flex;
+  align-items: center;
+`;
+
+export const MenuButton = styled.div`
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+`;

src/components/Header/index.js

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

src/components/Layout/Layout.styles.css

@@ -3,7 +3,5 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  margin-top: -3rem;
 }

src/components/Menu/Menu.component.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MenuButton, MenuContainer } from './Menu.styles';
+
+const Menu = () => (
+  <MenuContainer>
+    <MenuButton />
+  </MenuContainer>
+);
+
+export default Menu;

src/components/Menu/Menu.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { MenuOutline } from '@styled-icons/evaicons-outline/MenuOutline';
+
+export const MenuButton = styled(MenuOutline)`
+  color: #fff;
+`;
+
+export const MenuContainer = styled.svg`
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+`;

src/components/Menu/index.js

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

src/components/Search/Search.component.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import useInput from './../../utils/hooks/useInput';
+import { Input, InputContainer, Icon } from './Search.styles';
+import { useApp } from '../../providers/App/AppProvider';
+
+function Search() {
+  const context = useApp();
+  const { isDark } = context;
+
+  const submit = () => {
+    context.setSearch(value);
+  };
+
+  const [value, handleInputChange, handleSubmit] = useInput(submit);
+
+  return (
+    <InputContainer onSubmit={handleSubmit} isDark={isDark}>
+      <Icon />
+      <Input value={value} onChange={handleInputChange} type="text" />
+    </InputContainer>
+  );
+}
+
+export default Search;

src/components/Search/Search.styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { SearchAlt } from '@styled-icons/boxicons-regular/SearchAlt';
+
+export const InputContainer = styled.form`
+  background-color: ${(props) => (props.isDark ? '#8c6599' : '#ff8f8f')};
+  padding: 3px;
+  border-radius: 3px;
+  margin-left: 16px;
+`;
+
+export const Icon = styled(SearchAlt)`
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  margin-left: 5px;
+`;
+
+export const Input = styled.input`
+  background-color: transparent;
+  border: 0;
+  padding: 0.5em;
+  color: #fff;
+  &:focus {
+    outline: none;
+    box-shadow: 0px 0px 0px;
+  }
+`;

src/components/Search/index.js

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

src/components/Theme/Theme.component.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IconDark, IconContainer, IconLight } from './Theme.styles';
+import { useApp } from '../../providers/App/AppProvider';
+
+function Theme() {
+  const context = useApp();
+  const { isDark } = context;
+
+  const onClick = () => {
+    context.setDark((isDark) => !isDark);
+  };
+
+  return (
+    <IconContainer onClick={onClick}>
+      {isDark ? <IconDark /> : <IconLight />}
+      <p> {isDark ? 'Light Mode' : 'Dark Mode'} </p>
+    </IconContainer>
+  );
+}
+
+export default Theme;

src/components/Theme/Theme.styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { DarkMode } from '@styled-icons/material-outlined/DarkMode';
+import { DarkMode as DarkModeFilled } from '@styled-icons/material/DarkMode';
+
+export const IconContainer = styled.div`
+  color: #fff;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+  float: right;
+  margin-right: 16px;
+`;
+
+export const IconLight = styled(DarkMode)`
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+`;
+
+export const IconDark = styled(DarkModeFilled)`
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+`;

src/components/Theme/index.js

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

src/components/VideoCard/VideoCard.component.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Image, Title, Container, Description } from './VideoCard.styles';
+
+const VideoCard = ({ title, description, image, width, height }) => {
+  return (
+    <Container>
+      <Image image={image} width={width} height={height} />
+      <Title>{title}</Title>
+      <Description>{description}</Description>
+    </Container>
+  );
+};
+
+export default VideoCard;