Merge pull request #1 from adrianhajdin/ui-changes

UI changes
adecoker · Aug 7, 2022 · db9f374 · db9f374
2 parents 18d26f3 + 5ac8745
commit db9f374
Show file tree

Hide file tree

Showing 21 changed files with 946 additions and 837 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-REACT_APP_RAPID_API_KEY=iFUdxubHsQmshe51vbzzowIsXzBrp1zQDPGjsnlyuFeYlDeBLs
+REACT_APP_RAPID_API_KEY=KJwZZIJSFimshuivMSVGaiYzkRomp15f2vKjsnK4bKzuUzVLzA
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -5,39 +5,15 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>YT</title>
+    <title>JSM Media</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,22 +1,11 @@
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { Box } from '@mui/material';
 
-import {
-  ChannelDetail,
-  VideoDetail,
-  SearchFeed,
-  Navbar,
-  Feed,
-} from './components';
+import { ChannelDetail, VideoDetail, SearchFeed, Navbar, Feed } from './components';
 
 const App = () => (
   <Router>
-    <Box
-      sx={{
-        p: 1,
-        bgcolor: '#000',
-      }}
-    >
+    <Box sx={{ backgroundColor: '#000' }}>
       <Navbar />
       <Switch>
         <Route exact path='/' component={Feed} />

diff --git a/src/components/Categories.jsx b/src/components/Categories.jsx
diff --git a/src/components/ChannelCard.jsx b/src/components/ChannelCard.jsx
@@ -1,49 +1,42 @@
 import React from 'react';
-import { Card, CardContent, CardMedia, Typography } from '@mui/material';
+import { Box, CardContent, CardMedia, Typography } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { Link } from 'react-router-dom';
 
-const ChannelCard = ({ channelDetail, mt }) => (
-  <Card
+const ChannelCard = ({ channelDetail, marginTop }) => (
+  <Box
     sx={{
       boxShadow: 'none',
       borderRadius: '20px',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      flexDirection: 'column',
-      width: { xs: '350px', md: '320px' },
+      width: { xs: '356px', md: '320px' },
+      height: '326px',
       margin: 'auto',
-      mt,
-      background: '#000',
+      marginTop,
     }}
   >
-    <CardMedia
-      component='img'
-      height='160'
-      image={channelDetail?.snippet?.thumbnails?.high.url}
-      alt='channel-img'
-      sx={{
-        borderRadius: '50%',
-        width: '160px',
-        border: '1px solid #e3e3e3',
-      }}
-    />
-    <CardContent sx={{ textAlign: 'center', color: '#fff' }}>
-      <Typography sx={{ fontSize: '18px', fontWeight: 700 }}>
-        {channelDetail?.snippet?.title}{' '}
-        <CheckCircleIcon sx={{ fontSize: '14px', color: 'gray', ml: '5px' }} />
-      </Typography>
-      {channelDetail?.statistics?.subscriberCount && (
-        <Typography sx={{ fontSize: '15px', fontWeight: 500, color: 'gray' }}>
-          {channelDetail?.statistics?.subscriberCount &&
-            parseInt(channelDetail?.statistics?.subscriberCount).toLocaleString(
-              'en-US'
-            )}{' '}
-          Subscribers
+    <Link to={`/channel/${channelDetail?.id?.channelId}`}>
+      <CardContent sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', color: '#fff' }}>
+        <CardMedia
+          image={channelDetail?.snippet?.thumbnails?.high?.url}
+          alt={channelDetail?.snippet?.title}
+          sx={{ borderRadius: '50%', height: '180px', width: '180px', mb: 2, border: '1px solid #e3e3e3' }}
+        />
+        <Typography variant="h6">
+          {channelDetail?.snippet?.title}{' '}
+          <CheckCircleIcon sx={{ fontSize: '14px', color: 'gray', ml: '5px' }} />
         </Typography>
-      )}
-    </CardContent>
-  </Card>
+        {console.log(channelDetail)}
+        {channelDetail?.statistics?.subscriberCount && (
+          <Typography sx={{ fontSize: '15px', fontWeight: 500, color: 'gray' }}>
+            {parseInt(channelDetail?.statistics?.subscriberCount).toLocaleString('en-US')} Subscribers
+          </Typography>
+        )}
+      </CardContent>
+    </Link>
+  </Box>
 );
 
 export default ChannelCard;
diff --git a/src/components/ChannelDetail.jsx b/src/components/ChannelDetail.jsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Box } from '@mui/material';
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Box } from "@mui/material";
 
-import { Videos, ChannelCard, Loader } from './';
-import { axiosGetReq } from '../utils';
+import { Videos, ChannelCard } from "./";
+import { fetchFromAPI } from "../utils/fetchFromAPI";
 
 const ChannelDetail = () => {
   const [channelDetail, setChannelDetail] = useState();
@@ -13,34 +13,33 @@ const ChannelDetail = () => {
 
   useEffect(() => {
     const fetchResults = async () => {
-      const data = await axiosGetReq(`channels?part=snippet&id=${id}`);
+      const data = await fetchFromAPI(`channels?part=snippet&id=${id}`);
+
       setChannelDetail(data?.items[0]);
 
-      const videosData = await axiosGetReq(`search?channelId=${id}&part=snippet%2Cid&order=date`);
+      const videosData = await fetchFromAPI(`search?channelId=${id}&part=snippet%2Cid&order=date`);
+
       setVideos(videosData?.items);
     };
 
     fetchResults();
-  }, []);
-
-  if (!videos) <Loader />;
+  }, [id]);
 
   return (
-    <>
+    <Box minHeight="95vh">
       <Box>
-        <img
-          src={channelDetail?.brandingSettings?.image?.bannerExternalUrl}
-          alt='channel-art'
-          style={{
-            height: '300px',
-            width: '100%',
-            borderRadius: '8px',
-          }}
-        />
-        <ChannelCard channelDetail={channelDetail} mt='-93px' />
+        <div style={{
+          height:'300px',
+          background: 'linear-gradient(90deg, rgba(0,238,247,1) 0%, rgba(206,3,184,1) 100%, rgba(0,212,255,1) 100%)',
+          zIndex: 10,
+        }} />
+        <ChannelCard channelDetail={channelDetail} marginTop="-93px" />
+      </Box>
+      <Box p={2} display="flex">
+      <Box sx={{ mr: { sm: '100px' } }}/>
+        <Videos videos={videos} />
       </Box>
-      <Videos videos={videos} />
-    </>
+    </Box>
   );
 };
 

diff --git a/src/components/Feed.jsx b/src/components/Feed.jsx
@@ -1,75 +1,35 @@
-import React, { useEffect, useState } from 'react';
-import { Box, Stack, Typography } from '@mui/material';
+import React, { useEffect, useState } from "react";
+import { Box, Stack, Typography } from "@mui/material";
 
-import { Videos, Categories } from './';
-import { axiosGetReq } from '../utils';
+import { fetchFromAPI } from "../utils/fetchFromAPI";
+import { Videos, Sidebar } from "./";
 
 const Feed = () => {
-  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [selectedCategory, setSelectedCategory] = useState("New");
   const [videos, setVideos] = useState(null);
 
   useEffect(() => {
     setVideos(null);
-    const fetchVideos = async () => {
-      const data = await axiosGetReq(
-        `search?part=snippet&q=${selectedCategory}`
-      );
-      setVideos(data.items);
-    };
 
-    fetchVideos();
-  }, [selectedCategory]);
+    fetchFromAPI(`search?part=snippet&q=${selectedCategory}`)
+      .then((data) => setVideos(data.items))
+    }, [selectedCategory]);
 
   return (
-    <Stack sx={{ flexDirection: { sx: 'column', md: 'row' } }}>
-      <Box sx={{ position: 'relative' }}>
-        <Categories
-          selectedCategory={selectedCategory}
-          setSelectedCategory={setSelectedCategory}
-        />
-        <p
-          className='copyright'
-          style={{
-            position: 'absolute',
-            bottom: '15px',
-            color: '#fff',
-            fontSize: '15px',
-            left: '30px',
-            opacity: '0.8',
-          }}
-        >
-          Copyright © 2022 YT, Inc.
-        </p>
+    <Stack sx={{ flexDirection: { sx: "column", md: "row" } }}>
+      <Box sx={{ height: { sx: "auto", md: "92vh" }, borderRight: "1px solid #3d3d3d", px: { sx: 0, md: 2 } }}>
+        <Sidebar selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
+
+        <Typography className="copyright" variant="body2" sx={{ mt: 1.5, color: "#fff", }}>
+          Copyright © 2022 JSM Media
+        </Typography>
       </Box>
 
-      <Box
-        sx={{
-          overflow: 'auto',
-          height: '90vh',
-          flex: 2,
-        }}
-      >
-        <Typography
-          fontSize={25}
-          fontWeight={900}
-          textAlign='center'
-          pt={1}
-          pb={2}
-          sx={{ textTransform: 'capitalize', color: 'white' }}
-        >
-          {selectedCategory || 'Recommended'} Videos
+      <Box p={2} sx={{ overflowY: "auto", height: "90vh", flex: 2 }}>
+        <Typography variant="h4" fontWeight="bold" mb={2} sx={{ color: "white" }}>
+          {selectedCategory} <span style={{ color: "#FC1503" }}>videos</span>
         </Typography>
-        {/* <Stack direction='row' gap='20px' sx={{ width: '80%', margin: 'auto' }}>
-          <Link to='/video/jfKfPfyJRdk' style={{width:'100%'}}>
-            <img
-              style={{ height: '400px', width: '100%' }}
-              src={
-                'https://media.npr.org/assets/img/2022/07/14/lofi-girl-picture_custom-27a34c6d0ca36f828940156e7bd3c964140cff9c.jpg'
-              }
-              alt='recommended video'
-            />
-          </Link>
-        </Stack> */}
+
         <Videos videos={videos} />
       </Box>
     </Stack>

diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import { CircularProgress, Stack } from '@mui/material';
+import { Box, CircularProgress, Stack } from '@mui/material';
 
 const Loader = () =>  (
-  <Stack direction='row' justifyContent='center' alignItems='center' height='80vh' >
-    <CircularProgress />
-  </Stack>
+  <Box minHeight="95vh">
+    <Stack direction='row' justifyContent='center' alignItems='center' height='80vh' >
+      <CircularProgress />
+    </Stack>
+  </Box>
 );
 
 export default Loader;