From 5d6fa898055924716bd702b6584baa3055d8b08a Mon Sep 17 00:00:00 2001
From: whyageek <aryanawasthi2003@gmail.com>
Date: Tue, 23 Apr 2024 02:36:17 +0530
Subject: [PATCH] cleaned the channeldetail page code, optimised and added
 readability

---
 src/components/ChannelDetail.jsx | 28 ++++++++++++++++++++--------
 src/components/Loader.jsx        |  4 ++--
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/ChannelDetail.jsx b/src/components/ChannelDetail.jsx
index 3f162f5c9..86433fa8a 100644
--- a/src/components/ChannelDetail.jsx
+++ b/src/components/ChannelDetail.jsx
@@ -6,20 +6,27 @@ import { Videos, ChannelCard } from "./";
 import { fetchFromAPI } from "../utils/fetchFromAPI";
 
 const ChannelDetail = () => {
+  // State variables to store channel details and videos
   const [channelDetail, setChannelDetail] = useState();
   const [videos, setVideos] = useState(null);
 
+  // Get the channel id from the route parameters
   const { id } = useParams();
 
+  // Fetch channel details and videos when the id changes
   useEffect(() => {
     const fetchResults = async () => {
-      const data = await fetchFromAPI(`channels?part=snippet&id=${id}`);
-
-      setChannelDetail(data?.items[0]);
-
-      const videosData = await fetchFromAPI(`search?channelId=${id}&part=snippet%2Cid&order=date`);
-
-      setVideos(videosData?.items);
+      try {
+        // Fetch channel details
+        const channelData = await fetchFromAPI(`channels?part=snippet&id=${id}`);
+        setChannelDetail(channelData?.items[0]);
+
+        // Fetch videos for the channel
+        const videosData = await fetchFromAPI(`search?channelId=${id}&part=snippet%2Cid&order=date`);
+        setVideos(videosData?.items);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
     };
 
     fetchResults();
@@ -27,6 +34,7 @@ const ChannelDetail = () => {
 
   return (
     <Box minHeight="95vh">
+      {/* Channel header */}
       <Box>
         <div style={{
           height:'300px',
@@ -35,8 +43,12 @@ const ChannelDetail = () => {
         }} />
         <ChannelCard channelDetail={channelDetail} marginTop="-93px" />
       </Box>
+      
+      {/* Video list */}
       <Box p={2} display="flex">
-      <Box sx={{ mr: { sm: '100px' } }}/>
+        {/* Spacer */}
+        <Box sx={{ mr: { sm: '100px' } }}/>
+        {/* Display videos */}
         <Videos videos={videos} />
       </Box>
     </Box>
diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
index 7ed8e9bac..fb49a0e76 100644
--- a/src/components/Loader.jsx
+++ b/src/components/Loader.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Box, CircularProgress, Stack } from '@mui/material';
 
-const Loader = () =>  (
+const Loader = ({ size = 80, thickness = 4, color = "#3f51b5" }) => (
   <Box minHeight="95vh">
     <Stack direction='row' justifyContent='center' alignItems='center' height='80vh' >
-      <CircularProgress />
+      <CircularProgress size={size} thickness={thickness} color={color} />
     </Stack>
   </Box>
 );