Feature/mini challenge/3

.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,16 +1,22 @@
 import React, { useLayoutEffect } 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';
 
+const GlobalStyle = createGlobalStyle`
+body {
+  margin: 0;
+}
+`;
+
 function App() {
   useLayoutEffect(() => {
     const { body } = document;
@@ -34,6 +40,7 @@ function App() {
     <BrowserRouter>
       <AuthProvider>
         <Layout>
+          <GlobalStyle />
           <Switch>
             <Route exact path="/">
               <HomePage />
@@ -48,7 +55,6 @@ function App() {
               <NotFound />
             </Route>
           </Switch>
-          <Fortune />
         </Layout>
       </AuthProvider>
     </BrowserRouter>

src/components/Header/Header.component.jsx

@@ -0,0 +1,66 @@
+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, { useState } from 'react';
+import Toolbar from '@material-ui/core/Toolbar';
+import styled from 'styled-components';
+import InputBase from '@material-ui/core/InputBase';
+
+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 = ({ searchVideos }) => {
+  const [search, setSearch] = useState('');
+
+  const handleChange = (event) => {
+    setSearch(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    searchVideos(search);
+    event.preventDefault();
+  };
+
+  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={handleChange}
+              />
+            </form>
+          </Hidden>
+        </div>
+        <div>
+          <Hidden xsDown>
+            <FormControlLabel label="Dark Mode" control={<Switch />} />
+          </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,50 @@
+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 from 'react';
+import CardMedia from '@material-ui/core/CardMedia';
+import Card from '@material-ui/core/Card';
+import styled from 'styled-components';
+
+const StyledCardMedia = styled(CardMedia)`
+  height: 140px;
+`;
+
+const StyledCard = styled(Card)`
+  height: 350px;
+`;
+
+const VideoCard = ({ video, selectVideo }) => {
+  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,23 @@
+import React, { useState } from 'react';
+import Grid from '@material-ui/core/Grid';
+import useVideoDetails from '../../hooks/useVideoDetails';
+import VideoPlayer from '../VideoPlayer';
+import RelatedVideos from '../RelatedVideos';
+
+const VideoDetailsView = ({ id }) => {
+  const [videoId, setVideoId] = useState(id);
+  const video = useVideoDetails(videoId);
+
+  return (
+    <Grid container>
+      <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';

src/components/VideoList/VideoList.component.jsx

@@ -0,0 +1,43 @@
+import Grid from '@material-ui/core/Grid';
+import React from 'react';
+import styled from 'styled-components';
+import VideoCard from '../VideoCard';
+import useVideoList from '../../hooks/useVideoList';
+
+const VideoList = ({ className, search, selectVideo }) => {
+  const videos = useVideoList(search);
+
+  return (
+    <div className={className}>
+      <h1>Youtube Video List</h1>
+      <Grid container spacing={3} id="video-list">
+        {videos.map((video) => (
+          <VideoCard
+            key={video.etag}
+            video={video}
+            selectVideo={(videoId) => selectVideo(videoId)}
+          />
+        ))}
+      </Grid>
+    </div>
+  );
+};
+
+const StyledVideoList = styled(VideoList)`
+  text-align: center;
+
+  @media (min-width: 1024px) {
+    padding: 20px 50px;
+  }
+
+  @media (min-width: 1440px) {
+    padding: 20px 200px;
+  }
+
+  p {
+    text-align: left;
+    color: rgba(169, 169, 169, 1);
+  }
+`;
+
+export default StyledVideoList;

src/components/VideoList/index.js

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

src/components/VideoPlayer/VideoPlayer.component.jsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import React from 'react';
+
+const VideoPlayer = ({ className, video }) => {
+  return (
+    <div className={className}>
+      <div dangerouslySetInnerHTML={{ __html: video.player.embedHtml }} />
+      <h1>{video.snippet.title}</h1>
+      <p>{video.snippet.description}</p>
+    </div>
+  );
+};
+
+const StyledVideoPlayer = styled(VideoPlayer)`
+  iframe {
+    width: 100%;
+    height: 60vh;
+  }
+
+  p {
+    color: rgba(169, 169, 169, 1);
+  }
+`;
+
+export default StyledVideoPlayer;

src/components/VideoPlayer/index.js

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

src/hooks/useVideoDetails/index.js

@@ -0,0 +1 @@
+export { default } from './useVideoDetails.hook';