Feature/mini challenge/4

.gitignore

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

package.json

@@ -3,14 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@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",
+    "he": "^1.2.0",
     "react": "^16.13.1",
     "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",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App/App.component.jsx

@@ -1,15 +1,22 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
+import { createGlobalStyle } from 'styled-components';
 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 GlobalContext from '../../state/GlobalContext';
+
+const GlobalStyle = createGlobalStyle`
+body {
+  margin: 0;
+}
+`;
 
 function App() {
   useLayoutEffect(() => {
@@ -30,28 +37,32 @@ function App() {
     };
   }, []);
 
+  const [search, setSearch] = useState('');
+  const [theme, setTheme] = useState('light');
   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>
-      </AuthProvider>
-    </BrowserRouter>
+    <GlobalContext.Provider value={{ search, setSearch, theme, setTheme }}>
+      <BrowserRouter>
+        <AuthProvider>
+          <Layout>
+            <GlobalStyle />
+            <Switch>
+              <Route exact path="/">
+                <HomePage />
+              </Route>
+              <Route exact path="/login">
+                <LoginPage />
+              </Route>
+              <Private exact path="/secret">
+                <SecretPage />
+              </Private>
+              <Route path="*">
+                <NotFound />
+              </Route>
+            </Switch>
+          </Layout>
+        </AuthProvider>
+      </BrowserRouter>
+    </GlobalContext.Provider>
   );
 }
 

src/components/Header/Header.component.jsx

@@ -0,0 +1,72 @@
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Hidden from '@material-ui/core/Hidden';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import Button from '@material-ui/core/Button';
+import AppBar from '@material-ui/core/AppBar';
+import React, { useContext } from 'react';
+import Toolbar from '@material-ui/core/Toolbar';
+import styled from 'styled-components';
+import InputBase from '@material-ui/core/InputBase';
+import GlobalContext from '../../state/GlobalContext';
+
+const StyledToolbar = styled(Toolbar)`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledInputBase = styled(InputBase)`
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 100px;
+  color: white;
+  margin-left: 50px;
+  padding: 4px;
+`;
+
+const Header = () => {
+  const { search, setSearch, setTheme } = useContext(GlobalContext);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setSearch(search);
+  };
+
+  return (
+    <AppBar position="static">
+      <StyledToolbar>
+        <div>
+          <IconButton edge="start" color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+          <Hidden xsDown>
+            <form style={{ display: 'inline' }} onSubmit={handleSubmit}>
+              <StyledInputBase
+                placeholder="Search..."
+                value={search}
+                onChange={(event) => {
+                  setSearch(event.target.value);
+                }}
+              />
+            </form>
+          </Hidden>
+        </div>
+        <div>
+          <Hidden xsDown>
+            <FormControlLabel
+              label="Dark Mode"
+              control={<Switch />}
+              onChange={(event) => {
+                const currentTheme = event.target.checked ? 'dark' : 'light';
+                setTheme(currentTheme);
+              }}
+            />
+          </Hidden>
+          <Button color="inherit">Login</Button>
+        </div>
+      </StyledToolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

src/components/Header/index.js

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

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/RelatedVideos/RelatedVideos.component.jsx

@@ -0,0 +1,57 @@
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import styled from 'styled-components';
+import React from 'react';
+import useVideoList from '../../hooks/useVideoList';
+
+const RelatedVideos = ({ className, videoId, selectVideoId }) => {
+  const videos = useVideoList('', videoId);
+
+  return (
+    <List className={className}>
+      {videos.map((currentVideo) => {
+        return (
+          <ListItem
+            button
+            key={currentVideo.etag}
+            onClick={() => {
+              selectVideoId(currentVideo.id.videoId);
+            }}
+          >
+            <img
+              src={
+                currentVideo.snippet.thumbnails.high.url
+                  ? currentVideo.snippet.thumbnails.high.url
+                  : 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png'
+              }
+              alt="thumbnail"
+            />
+            <ListItemText
+              primary={currentVideo.snippet.title}
+              secondary={currentVideo.snippet.description}
+            />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+const StyledRelatedVideos = styled(RelatedVideos)`
+  height: calc(100vh - 80px);
+  overflow: auto;
+
+  img {
+    max-width: 100px;
+    margin-right: 10px;
+  }
+  p {
+    text-overflow: ellipsis;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+`;
+
+export default StyledRelatedVideos;

src/components/RelatedVideos/index.js

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

src/components/VideoCard/VideoCard.component.jsx

@@ -0,0 +1,53 @@
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import he from 'he';
+import Grid from '@material-ui/core/Grid';
+import React, { useContext } from 'react';
+import CardMedia from '@material-ui/core/CardMedia';
+import Card from '@material-ui/core/Card';
+import styled from 'styled-components';
+import GlobalContext from '../../state/GlobalContext';
+
+const StyledCardMedia = styled(CardMedia)`
+  height: 140px;
+`;
+
+const VideoCard = ({ video, selectVideo }) => {
+  const { theme } = useContext(GlobalContext);
+  const StyledCard = styled(Card)`
+    height: 350px;
+    ${() => theme === 'dark' && `background: gray; color: white;`}
+  `;
+
+  const {
+    etag,
+    id: { videoId },
+    snippet: {
+      title,
+      description,
+      thumbnails: { high: { url: thumbnailsHigh } = {} } = {},
+    } = {},
+  } = video;
+  return (
+    <Grid
+      item
+      xs={12}
+      sm={6}
+      md={3}
+      id={`video-${etag}`}
+      onClick={() => selectVideo(videoId)}
+    >
+      <StyledCard>
+        <CardActionArea>
+          <StyledCardMedia image={thumbnailsHigh} title="image" />
+          <CardContent>
+            <h2>{he.decode(title || '')}</h2>
+            <p>{he.decode(description || '')}</p>
+          </CardContent>
+        </CardActionArea>
+      </StyledCard>
+    </Grid>
+  );
+};
+
+export default VideoCard;

src/components/VideoCard/index.js

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

src/components/VideoDetailsView/VideoDetailsView.component.jsx

@@ -0,0 +1,31 @@
+import React, { useContext, useState } from 'react';
+import Grid from '@material-ui/core/Grid';
+import useVideoDetails from '../../hooks/useVideoDetails';
+import VideoPlayer from '../VideoPlayer';
+import RelatedVideos from '../RelatedVideos';
+import GlobalContext from '../../state/GlobalContext';
+
+const VideoDetailsView = ({ id }) => {
+  const [videoId, setVideoId] = useState(id);
+  const video = useVideoDetails(videoId);
+  const { theme } = useContext(GlobalContext);
+
+  return (
+    <Grid
+      container
+      style={{
+        backgroundColor: theme === 'dark' ? 'black' : 'white',
+        color: theme === 'dark' ? 'white' : 'black',
+      }}
+    >
+      <Grid item md={9}>
+        <VideoPlayer video={video} />
+      </Grid>
+      <Grid item md={3}>
+        <RelatedVideos videoId={video.id.videoId} selectVideoId={setVideoId} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default VideoDetailsView;

src/components/VideoDetailsView/index.js

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