Fix search feed component bug and card size

package.json

@@ -3,16 +3,17 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.3",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
     "axios": "^0.27.2",
+    "html-react-parser": "^3.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "^2.10.1",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -21,17 +22,10 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": ["react-app", "react-app/jest"]
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

src/App.js

@@ -1,20 +1,21 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
 import { Box } from '@mui/material';
 
 import { ChannelDetail, VideoDetail, SearchFeed, Navbar, Feed } from './components';
 
 const App = () => (
-  <BrowserRouter>
-    <Box sx={{ backgroundColor: '#000' }}>
-      <Navbar />
-      <Routes>
-        <Route exact path='/' element={<Feed />} />
-        <Route path='/video/:id' element={<VideoDetail />} />
-        <Route path='/channel/:id' element={<ChannelDetail />} />
-        <Route path='/search/:searchTerm' element={<SearchFeed />} />
-      </Routes>
-    </Box>
-  </BrowserRouter>
+  <Box sx={{ backgroundColor: '#000' }}>
+    <Navbar />
+    <Routes>
+      {/* fix logo link by adding "exact" perimeter */}
+      <Route exact path="/" element={<Feed />} />
+      <Route path="/video/:id" element={<VideoDetail />} />
+      <Route path="/channel/:id" element={<ChannelDetail />} />
+      <Route path="/search/:searchTerm" element={<SearchFeed />} />
+    </Routes>
+
+  </Box>
 );
 
 export default App;

src/components/ChannelCard.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable radix */
 import React from 'react';
 import { Box, CardContent, CardMedia, Typography } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -31,7 +32,8 @@ const ChannelCard = ({ channelDetail, marginTop }) => (
         </Typography>
         {channelDetail?.statistics?.subscriberCount && (
           <Typography sx={{ fontSize: '15px', fontWeight: 500, color: 'gray' }}>
-            {parseInt(channelDetail?.statistics?.subscriberCount).toLocaleString('en-US')} Subscribers
+            {parseInt(channelDetail?.statistics?.subscriberCount).toLocaleString('en-US')}{' '}
+            Subscribers
           </Typography>
         )}
       </CardContent>

src/components/ChannelDetail.jsx

@@ -1,10 +1,11 @@
-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 } from "./";
-import { fetchFromAPI } from "../utils/fetchFromAPI";
+import { Videos, ChannelCard } from '.';
+import { fetchFromAPI } from '../utils/fetchFromAPI';
 
+// create a component that will render the Channel detail page
 const ChannelDetail = () => {
   const [channelDetail, setChannelDetail] = useState();
   const [videos, setVideos] = useState(null);
@@ -29,14 +30,15 @@ const ChannelDetail = () => {
     <Box minHeight="95vh">
       <Box>
         <div style={{
-          height:'300px',
+          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' } }}/>
+        <Box sx={{ mr: { sm: '100px' } }} />
         <Videos videos={videos} />
       </Box>
     </Box>

src/components/Feed.jsx

@@ -1,33 +1,33 @@
-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 { fetchFromAPI } from "../utils/fetchFromAPI";
-import { Videos, Sidebar } from "./";
+import { fetchFromAPI } from '../utils/fetchFromAPI';
+import { Videos, Sidebar } from '.';
 
 const Feed = () => {
-  const [selectedCategory, setSelectedCategory] = useState("New");
+  const [selectedCategory, setSelectedCategory] = useState('New');
   const [videos, setVideos] = useState(null);
 
   useEffect(() => {
     setVideos(null);
 
     fetchFromAPI(`search?part=snippet&q=${selectedCategory}`)
-      .then((data) => setVideos(data.items))
-    }, [selectedCategory]);
+      .then((data) => setVideos(data.items));
+  }, [selectedCategory]);
 
   return (
-    <Stack sx={{ flexDirection: { sx: "column", md: "row" } }}>
-      <Box sx={{ height: { sx: "auto", md: "92vh" }, borderRight: "1px solid #3d3d3d", px: { sx: 0, md: 2 } }}>
+    <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", }}>
+
+        <Typography className="copyright" variant="body2" sx={{ mt: 1.5, color: '#fff' }}>
           Copyright © 2022 JSM Media
         </Typography>
       </Box>
 
-      <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>
+      <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>
 
         <Videos videos={videos} />

src/components/Loader.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Box, CircularProgress, Stack } from '@mui/material';
 
-const Loader = () =>  (
+const Loader = () => (
   <Box minHeight="95vh">
-    <Stack direction='row' justifyContent='center' alignItems='center' height='80vh' >
+    <Stack direction="row" justifyContent="center" alignItems="center" height="80vh">
       <CircularProgress />
     </Stack>
   </Box>

src/components/Navbar.jsx

@@ -1,12 +1,13 @@
-import { Stack } from "@mui/material";
-import { Link } from "react-router-dom";
+import React from 'react';
+import { Stack } from '@mui/material';
+import { Link } from 'react-router-dom';
 
-import { logo } from "../utils/constants";
-import { SearchBar } from "./";
+import { logo } from '../utils/constants';
+import { SearchBar } from '.';
 
 const Navbar = () => (
-  <Stack direction="row" alignItems="center" p={2} sx={{ position:  "sticky", background: '#000', top: 0, justifyContent: "space-between" }}>
-    <Link to="/" style={{ display: "flex", alignItems: "center" }}>
+  <Stack direction="row" alignItems="center" p={2} sx={{ position: 'sticky', background: '#000', top: 0, justifyContent: 'space-between' }}>
+    <Link to="/" reloadDocument style={{ display: 'flex', alignItems: 'center' }}>
       <img src={logo} alt="logo" height={45} />
     </Link>
     <SearchBar />

src/components/SearchBar.jsx

@@ -1,41 +1,42 @@
 import React, { useState } from 'react';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 import { Paper, IconButton } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
+// search bar component
 const SearchBar = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const navigate = useNavigate();
 
+  // handle search submit
   const onhandleSubmit = (e) => {
     e.preventDefault();
 
     if (searchTerm) {
       navigate(`/search/${searchTerm}`);
-
-      setSearchTerm('');
     }
   };
 
   return (
     <Paper
-      component='form'
+      component="form"
       onSubmit={onhandleSubmit}
-      sx={{
-        borderRadius: 20,
+      sx={{ borderRadius: 20,
         border: '1px solid #e3e3e3',
         pl: 2,
         boxShadow: 'none',
         mr: { sm: 5 },
       }}
     >
+      {/* input for search bar */}
       <input
-        className='search-bar'
-        placeholder='Search...'
+        className="search-bar"
+        type="text"
+        placeholder="Search..."
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
       />
-      <IconButton type='submit' sx={{ p: '10px', color: 'red' }} aria-label='search'>
+      <IconButton type="submit" sx={{ p: '10px', color: 'red' }} aria-label="search">
         <SearchIcon />
       </IconButton>
     </Paper>

src/components/SearchFeed.jsx

@@ -1,27 +1,27 @@
-import { useState, useEffect } from "react";
-import { Typography, Box } from "@mui/material";
-import { useParams } from "react-router-dom";
+import React, { useState, useEffect } from 'react';
+import { Typography, Box } from '@mui/material';
+import { useParams } from 'react-router-dom';
 
-import { fetchFromAPI } from "../utils/fetchFromAPI";
-import { Videos } from "./";
+import { fetchFromAPI } from '../utils/fetchFromAPI';
+import { Videos } from '.';
 
 const SearchFeed = () => {
-  const [videos, setVideos] = useState(null);
+  const [videos, setVideos] = useState('');
   const { searchTerm } = useParams();
 
   useEffect(() => {
     fetchFromAPI(`search?part=snippet&q=${searchTerm}`)
-      .then((data) => setVideos(data.items))
+      .then((data) => setVideos(data.items));
   }, [searchTerm]);
 
   return (
     <Box p={2} minHeight="95vh">
-      <Typography variant="h4" fontWeight={900}  color="white" mb={3} ml={{ sm: "100px"}}>
-        Search Results for <span style={{ color: "#FC1503" }}>{searchTerm}</span> videos
+      <Typography variant="h4" fontWeight={900} color="white" mb={3} ml={{ sm: '100px' }}>
+        Search Results for <span style={{ color: '#FC1503' }}>{searchTerm}</span> videos
       </Typography>
       <Box display="flex">
-        <Box sx={{ mr: { sm: '100px' } }}/>
-        {<Videos videos={videos} />}
+        <Box sx={{ mr: { sm: '100px' } }} />
+        <Videos videos={videos} />
       </Box>
     </Box>
   );

src/components/Sidebar.jsx

@@ -1,36 +1,37 @@
-import React from "react";
-import { Stack } from "@mui/material";
+import React from 'react';
+import { Stack } from '@mui/material';
 
-import { categories } from "../utils/constants";
+import { categories } from '../utils/constants';
 
-const Categories = ({ selectedCategory, setSelectedCategory }) => (
+const Sidebar = ({ selectedCategory, setSelectedCategory }) => (
   <Stack
     direction="row"
     sx={{
-      overflowY: "auto",
-      height: { sx: "auto", md: "95%" },
-      flexDirection: { md: "column" },
+      overflowY: 'auto',
+      height: { sx: 'auto', md: '95%' },
+      flexDirection: { md: 'column' },
     }}
   >
     {categories.map((category) => (
       <button
         className="category-btn"
+        type="button"
+        key={category.name}
         onClick={() => setSelectedCategory(category.name)}
         style={{
-          background: category.name === selectedCategory && "#FC1503",
-          color: "white",
+          background: category.name === selectedCategory && '#FC1503',
+          color: 'white',
         }}
-        key={category.name}
       >
-        <span style={{ color: category.name === selectedCategory ? "white" : "red", marginRight: "15px" }}>
+        <span style={{ color: category.name === selectedCategory ? 'white' : 'red', marginRight: '15px' }}>
           {category.icon}
         </span>
-        <span style={{ opacity: category.name === selectedCategory ? "1" : "0.8" }}>
+        <span style={{ opacity: category.name === selectedCategory ? '1' : '0.8' }}>
           {category.name}
         </span>
       </button>
     ))}
   </Stack>
 );
 
-export default Categories;
+export default Sidebar;