Video Details View - Mini Challenge 3

.gitignore

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

coverage.txt

@@ -0,0 +1,30 @@
+
+> react-certification-2020@0.1.0 test
+> react-scripts test "--coverage" "--watchAll"
+
+------------------------------|----------|----------|----------|----------|-------------------|
+File                          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
+------------------------------|----------|----------|----------|----------|-------------------|
+All files                     |    84.21 |       50 |    88.89 |    82.35 |                   |
+ src                          |        0 |      100 |      100 |        0 |                   |
+  index.js                    |        0 |      100 |      100 |        0 |                 7 |
+ src/components/App           |      100 |      100 |      100 |      100 |                   |
+  App.component.jsx           |      100 |      100 |      100 |      100 |                   |
+  index.js                    |        0 |        0 |        0 |        0 |                   |
+ src/components/Navbar        |    71.43 |       25 |    66.67 |    66.67 |                   |
+  Navbar.component.jsx        |       60 |       25 |       50 |       60 |             17,18 |
+  index.js                    |        0 |        0 |        0 |        0 |                   |
+  styles.js                   |      100 |      100 |      100 |      100 |                   |
+ src/components/VideoCard     |      100 |      100 |      100 |      100 |                   |
+  VideoCard.component.jsx     |      100 |      100 |      100 |      100 |                   |
+  index.js                    |        0 |        0 |        0 |        0 |                   |
+ src/components/VideosCatalog |      100 |      100 |      100 |      100 |                   |
+  VideosCatalog.component.jsx |      100 |      100 |      100 |      100 |                   |
+  index.js                    |        0 |        0 |        0 |        0 |                   |
+ src/views/Home               |      100 |      100 |      100 |      100 |                   |
+  Home.page.jsx               |      100 |      100 |      100 |      100 |                   |
+  index.js                    |        0 |        0 |        0 |        0 |                   |
+------------------------------|----------|----------|----------|----------|-------------------|
+
+
+

package.json

@@ -3,14 +3,19 @@
   "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",
+    "axios": "^0.21.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-player": "^2.9.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"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -21,6 +26,7 @@
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
   "devDependencies": {
+    "@testing-library/react": "^10.4.9",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",

src/components/App/App.component.jsx

@@ -1,56 +1,26 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useState } from 'react';
+import HomePage from '../../views/Home';
+import Header from '../Navbar';
 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 VideoDetails from '../../views/VideoDetails';
 
 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);
+  const [search, setSearch] = useState("");
 
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+  function handleSearch(searchValue) {
+    setSearch(searchValue);
+  }
 
   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>
+      <Header handleSearch={handleSearch} />
+      <Switch>
+        <Route path="/" exact render={(props) => (
+          <HomePage {...props} search={search}></HomePage>
+        )}/>
+        <Route path="/:videoId" component={VideoDetails} />
+      </Switch>
     </BrowserRouter>
   );
 }

src/components/App/App.test.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import App from './App.component';
+
+describe('App', () => {
+  it('renders App component', () => {
+    render(<App />);
+  });
+});

src/components/Navbar/Navbar.component.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import InputBase from '@material-ui/core/InputBase';
+import SearchIcon from '@material-ui/icons/Search';
+import MenuIcon from '@material-ui/icons/Menu';
+import { useStyles } from './styles';
+import { Link, useHistory } from 'react-router-dom';
+
+export default function Navbar(props){
+    const classes = useStyles();
+    const width = window.innerWidth;
+    const history = useHistory();
+
+    function handleSearch(event){
+        if(event.key === 'Enter'){
+            history.push('/');
+            props.handleSearch(event.target.value)
+        }
+    }
+
+    return (
+        <div className={classes.root}>
+            <AppBar position="sticky" color="default">
+                <Toolbar>
+                  <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+                    <MenuIcon />
+                  </IconButton>
+                  <Link to='/' className={classes.navbarTitle}>
+                    <Typography variant="h6" >
+                      { width < 480 ? "RB" : "React Bootcamp" }
+                    </Typography>
+                  </Link>
+                  <div className={classes.search}>
+                      <div className={classes.searchIcon}>
+                        <SearchIcon />
+                      </div>
+                      <InputBase
+                        laceholder="Search a Video…"
+                        onKeyPress={handleSearch}
+                        classes={{
+                          root: classes.inputRoot,
+                          input: classes.inputInput,
+                        }}
+                        inputProps={{ 'aria-label': 'search' }}
+                      />
+                  </div>
+                  <Button className={classes.loginBtn}>Login</Button>
+                </Toolbar>
+            </AppBar>
+        </div>
+    );
+}

src/components/Navbar/Navbar.test.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Navbar from './Navbar.component';
+
+describe('Navbar', () => {
+  it('renders Navbar component', () => {
+    render(<Navbar />);
+  });
+});

src/components/Navbar/index.js

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

src/components/Navbar/styles.js

@@ -0,0 +1,71 @@
+import { fade, makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+      flexGrow: 1,
+      marginBottom: "30px"
+    },
+    menuButton: {
+      marginRight: theme.spacing(2),
+    },
+    grow: {
+      flexGrow: 1,
+    },
+    search: {
+      position: 'relative',
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: fade(theme.palette.common.white, 0.40),
+      '&:hover': {
+        backgroundColor: fade(theme.palette.common.white, 1),
+      },
+      marginRight: theme.spacing(2),
+      marginLeft: 0,
+      width: '100%',
+      [theme.breakpoints.up('sm')]: {
+        marginLeft: theme.spacing(1),
+        width: 'auto',
+      },
+    },
+    searchIcon: {
+      padding: theme.spacing(0, 2),
+      height: '100%',
+      position: 'absolute',
+      pointerEvents: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inputRoot: {
+      color: 'inherit',
+    },
+    inputInput: {
+      padding: theme.spacing(1, 1, 1, 0),
+      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+      transition: theme.transitions.create('width'),
+      width: '100%',
+      [theme.breakpoints.up('sm')]: {
+        width: '20ch',
+        '&:focus': {
+          width: '20ch',
+        },
+      },
+    },
+    navbarTitle: {
+      textTransform: 'uppercase',
+      fontWeight: 'bold',
+      fontSize: '24px',
+      flexGrow: 1,
+      textDecoration: 'none',
+      color: '#fb5607'
+    },
+    loginBtn: {
+      background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+      color: 'white',
+      border: 0,
+      borderRadius: 3,
+      boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',
+      fontWeight: 800
+    },
+  }));
+
+  export { useStyles }

src/components/RelatedCard/RelatedCard.component.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Typography from '@material-ui/core/Typography';
+import { Link } from 'react-router-dom';
+import { useStyles } from './styles';
+
+export default function RelatedCard({videoInfo}) {
+
+    console.log(videoInfo);
+
+    const classes = useStyles();
+    const { title, channelTitle, thumbnails } = videoInfo.snippet;
+    const { videoId } = videoInfo.id;
+
+    return (
+        <Link to={`/${videoId}`} className={classes.link}>
+            <Card className={classes.root}>
+                <div className={classes.details}>
+                    <CardContent className={classes.content}>
+                    <Typography noWrap component="h5" variant="h5" className={classes.title}>
+                        { title }
+                    </Typography>
+                    <Typography variant="subtitle1" color="textSecondary" className={classes.channel}>
+                        { channelTitle }
+                    </Typography>
+                    </CardContent>
+                </div>
+                <CardMedia
+                    className={classes.cover}
+                    image={thumbnails.medium.url}
+                    title="Live from space album cover"
+                />
+            </Card>
+        </Link>
+
+  );
+}