Add top 100 streams to sidebar and code clean up

src/App.jsx

@@ -1,11 +1,7 @@
 import React, { useState, useEffect, lazy, Suspense } from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-
-// Fonts
-import '@fontsource/montserrat';
-
-// Context
 import { ThemeContext } from "./context/ThemeContext";
+import '@fontsource/montserrat';
 
 // Components
 import PageLayout from "./components/PageLayout";
@@ -19,6 +15,7 @@ const GamePage = lazy(() => import('./pages/games/GamePage'));
 const TopRatedGames = lazy(() => import('./pages/games/top'));
 const Streams = lazy(() => import('./pages/streams'));
 const ViewStreams = lazy(() => import('./pages/streams/ViewStreams'));
+const MostViewedStreams = lazy(() => import('./pages/streams/MostViewedStreams'));
 const ErrorPage = lazy(() => import('./pages/404'));
 
 // Page path
@@ -27,18 +24,19 @@ const routes = [
    { path: "/about", component: About },
    { path: "/Contact", component: Contact },
    { path: "/streams/", component: Streams },
+   { path: "/streams/most-views", component: MostViewedStreams },
    { path: "/games/top", component: TopRatedGames },
    { path: "/games/:gId", component: GamePage },
    { path: "/streams/:gameId", component: ViewStreams },
    { path: "*", component: ErrorPage },
 ];
 
-
-
 function App() {
-   const [theme, setTheme] = useState(() => localStorage.getItem("theme") || "dark");
+   const [theme, setTheme] = useState(() =>
+      localStorage.getItem("theme") || "dark");
 
-   const getThemeClassName = () => `${theme} ${theme === "dark" ? "bg-background" : "bg-background"}`;
+   const getThemeClassName = () =>
+      `${theme} ${theme === "dark" ? "bg-background" : "bg-background"}`;
 
    // Update document root class when theme changes
    useEffect(() => {
@@ -49,8 +47,10 @@ function App() {
       <Router>
          <Routes>
             {routes.map(({ path, component: Component }, index) => (
-               <Route key={path} path={path} element=
-                  {
+               <Route
+                  key={path}
+                  path={path}
+                  element={
                      <ThemeContext.Provider value={{ theme, setTheme }}>
                         <div className={getThemeClassName()}>
                            <PageLayout>

src/components/CollapsibleSection.jsx

@@ -1,10 +1,6 @@
 import React, { useState } from 'react'
-
-// Icons
 import { FaPlus, FaMinus } from 'react-icons/fa';
 
-
-
 const CollapsibleSection = ({ title, children }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
 

src/components/Footer.jsx

@@ -1,7 +1,7 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
+import { ThemeContext } from "../context/ThemeContext";
 import whiteLogo from "./../assets/images/zog-logo-white.png";
 import blackLogo from "./../assets/images/zog-logo-black.png";
-import { ThemeContext } from "../context/ThemeContext";
 
 const Footer = () => {
    const { theme, setTheme } = useContext(ThemeContext);

src/components/GameBanner.jsx

@@ -1,11 +1,11 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/effect-cube";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 import { EffectCube, Pagination, Autoplay } from "swiper/modules";
-import { Link } from "react-router-dom";
 
 const GameBanner = ({ randomGames }) => {
    return (

src/components/GamePageStreams.jsx

@@ -1,14 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import ReactPlayer from 'react-player';
-
-// Style
-import "../assets/styles/twitch.css";
-
-// Components
 import Loading from "../components/Loading";
-
-// Api
 import twitchApi from "../services/twitchApi";
+import "../assets/styles/twitch.css";
 
 const ViewStreams = ({ gameName }) => {
     const [streamsByGameId, setStreamsByGameId] = useState([]);

src/components/Header.jsx

@@ -1,27 +1,26 @@
 import React, { useContext, useState, useEffect } from "react";
-import { useLocation, Link } from "react-router-dom";
-import { IoSearchSharp, IoCloseOutline } from "react-icons/io5";
-import { MdLightMode, MdDarkMode } from "react-icons/md";
-import { FaHome, FaInfoCircle, FaAddressBook } from "react-icons/fa";
+import { useLocation } from "react-router-dom";
 import { ThemeContext } from "../context/ThemeContext";
 import whiteLogo from "./../assets/images/zog-logo-white.png";
 import blackLogo from "./../assets/images/zog-logo-black.png";
-// API
+import { IoSearchSharp, IoCloseOutline } from "react-icons/io5";
+import { MdLightMode, MdDarkMode } from "react-icons/md";
+import { FaHome, FaInfoCircle, FaAddressBook } from "react-icons/fa";
 import rawgApi from "../services/rawgApi";
 
 const Header = () => {
-   const [gameList, setGameList] = useState([]);
    const { theme, setTheme } = useContext(ThemeContext);
-   const [openMenu, setOpenMenu] = useState(false);
    const logoSrc = theme === "dark" ? whiteLogo : blackLogo;
-   const [activeIndex, setActiveIndex] = useState(0);
+   const [gameList, setGameList] = useState([]);
+   const [openMenu, setOpenMenu] = useState(false);
    const location = useLocation();
+   const [activeIndex, setActiveIndex] = useState(0);
    const [searchQuery, setSearchQuery] = useState("");
    const [filteredGames, setFilteredGames] = useState([]);
-   const [showSuggestions, setShowSuggestions] = useState(false); // State to control visibility of suggestions
+   const [showSuggestions, setShowSuggestions] = useState(false);
 
    useEffect(() => {
-      // Define a function to determine the active index based on the pathname
+      // Determine the active index based on the pathname
       const getActiveIndex = () => {
          switch (location.pathname) {
             case "/":
@@ -41,7 +40,7 @@ const Header = () => {
    useEffect(() => {
       const fetchGameList = async () => {
          try {
-            const response = await rawgApi.getGamesList; // Adjust this according to your API service
+            const response = await rawgApi.getGamesList;
             setGameList(response?.data?.results || []);
          } catch (error) {
             console.error("Error fetching game list:", error);
@@ -55,16 +54,20 @@ const Header = () => {
       // Filter games based on search query
       const filtered = gameList.filter((game) => game.name.toLowerCase().includes(searchQuery.toLowerCase()));
       setFilteredGames(filtered);
-      setShowSuggestions(searchQuery !== "" && filtered.length > 0); // Show suggestions only if there are filtered games and search query is not empty
+      // Show suggestions only if there are filtered games
+      // and search query is not empty
+      setShowSuggestions(searchQuery !== "" && filtered.length > 0);
    }, [searchQuery, gameList]);
 
    const handleSearchChange = (event) => {
       setSearchQuery(event.target.value);
    };
 
    const handleSuggestionClick = (gameName) => {
-      setSearchQuery(gameName); // Set search query to the clicked game name
-      setShowSuggestions(false); // Hide suggestions
+      // Set search query to the clicked game name
+      setSearchQuery(gameName);
+      // Hide suggestions
+      setShowSuggestions(false);
    };
 
    const handleEnterPress = (event, gameId) => {

src/components/NavigationSidebar.jsx

@@ -20,13 +20,19 @@ const NavigationSidebar = ({
         <div className="bg-secondary text-text hidden md:block">
             <Link to="/streams/">
                 <div className="p-5 hover:bg-accent hover:text-white ">
-                    <h2 className="text-2xl font-bold">Top Streaming</h2>
+                    <h2 className="text-2xl font-bold">Top Games Streaming</h2>
+                </div>
+            </Link>
+
+            <Link to="/streams/most-views">
+                <div className="p-5 hover:bg-accent hover:text-white ">
+                    <h2 className="text-2xl font-bold">Top 100 Streams</h2>
                 </div>
             </Link>
 
             <Link to="/games/top">
                 <div className="p-5 hover:bg-accent hover:text-white">
-                    <h2 className="text-2xl font-bold ">Top Rated</h2>
+                    <h2 className="text-2xl font-bold ">Top Rated Games</h2>
                 </div>
             </Link>
 
@@ -36,23 +42,25 @@ const NavigationSidebar = ({
                     {genreList.slice(0, displayedGenres).map((item, index) => (
                         <div
                             key={item.id}
-                            onClick={() => {
-                                onGenreSelect(item.id);
-                            }}
-                            className={`flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${genreActiveIndex === item.id ? "bg-accent" : ""
-                                }`}
+                            onClick={() => { onGenreSelect(item.id) }}
+                            className={
+                                `flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${genreActiveIndex === item.id ? "bg-accent" : ""}`
+                            }
                         >
                             {/* Genre image */}
                             <img
                                 src={item.image_background}
                                 alt={`Genre ${item.name} background`}
-                                className={`w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${genreActiveIndex === index ? "scale-110" : ""
-                                    }`}
+                                className={
+                                    `w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${genreActiveIndex === index ? "scale-110" : ""}`
+                                }
                             />
-
                             {/* Genre name */}
-                            <h3 className={`text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${genreActiveIndex === index ? "font-bold text-white" : ""
-                                }`}>{item.name}</h3>
+                            <h3 className={
+                                `text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${genreActiveIndex === index ? "font-bold text-white" : ""}`
+                            }>
+                                {item.name}
+                            </h3>
                         </div>
                     ))}
 
@@ -76,20 +84,23 @@ const NavigationSidebar = ({
                     {platformList.slice(0, displayedPlatforms).map((item, index) => (
                         <div
                             key={item.id}
-                            onClick={() => {
-                                onPlatformSelect(item.id);
-                            }}
-                            className={`flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${platformActiveIndex === item.id ? "bg-accent" : ""
-                                }`}
+                            onClick={() => { onPlatformSelect(item.id); }}
+                            className={
+                                `flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${platformActiveIndex === item.id ? "bg-accent" : ""}`
+                            }
                         >
                             <img
                                 src={item.image_background}
                                 alt={`Platform ${item.name} background`}
-                                className={`w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${platformActiveIndex === index ? "scale-110" : ""
-                                    }`}
+                                className={
+                                    `w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${platformActiveIndex === index ? "scale-110" : ""}`
+                                }
                             />
-                            <h3 className={`text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${platformActiveIndex === index ? "font-bold text-white" : ""
-                                }`}>{item.name}</h3>
+                            <h3 className={
+                                `text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${platformActiveIndex === index ? "font-bold text-white" : ""}`
+                            }>
+                                {item.name}
+                            </h3>
                         </div>
                     ))}
 

src/components/PageLayout.jsx

@@ -4,8 +4,6 @@ import Footer from "./Footer";
 
 document.documentElement.style.setProperty('--font-montserrat', 'montserrat, sans-serif');
 
-
-
 const PageLayout = ({ children }) => {
     return (
         <div className={`font-montserrat relative`}>

src/components/RawgGamesByGenreAndPlatformId.jsx

@@ -5,7 +5,11 @@ import { MdRateReview } from "react-icons/md";
 import { FaGripfire } from "react-icons/fa6";
 import { FaStarHalfAlt } from "react-icons/fa";
 
-const RawgGamesByGenreAndPlatformId = ({ gamesByGenreAndPlatformList, genreName, platformName }) => {
+const RawgGamesByGenreAndPlatformId = ({
+   gamesByGenreAndPlatformList,
+   genreName,
+   platformName }) => {
+
    const [gamesList, setGamesList] = useState([]);
 
    useEffect(() => {

src/components/RawgTopRatedGames.jsx

@@ -13,35 +13,33 @@ const RawgTopRatedGames = ({ gamesList }) => {
             <div className="flex flex-wrap w-full justify-center">
                {gamesList
                   .sort((a, b) => b.rating - a.rating)
-                  .map(
-                     (game, index) =>
-                        index < 24 && (
-                           <div
-                              key={game.id}
-                              className="relative w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 bg-secondary rounded overflow-hidden shadow-lg m-4 group hover:scale-110 transition-all duration-300 ease cursor-pointer"
-                           >
-                              <Link to={`/games/${game.id}`}>
-                                 <img className="w-full h-40 object-cover" src={game.short_screenshots[0].image} alt={game.name} />
-                              </Link>
-                              <div className="absolute top-0 right-0 p-2 bg-gray-800 text-white rounded-bl">
-                                 <FcRating alt="MetaCritic Rating" /> {game.metacritic}
-                              </div>
-                              <div className="px-6 py-4">
-                                 <div className="font-bold text-base mb-2">{`${game.name}`}</div>
-                                 <div className="flex items-center gap-3 justify-center">
-                                    <p className="text-gray-400 text-sm flex items-center">
-                                       <FaStarHalfAlt alt="The number of ratings" /> {game.rating}{" "}
-                                    </p>
-                                    <p className="text-gray-400 text-sm flex items-center">
-                                       <MdRateReview alt="The number of reviews" /> {game.reviews_count}{" "}
-                                    </p>
-                                    <p className="text-gray-400 text-sm flex items-center">
-                                       <FaGripfire alt="Suggestions" /> {game.suggestions_count}
-                                    </p>
-                                 </div>
-                              </div>
+                  .map((game, index) => index < 24 && (
+                     <div
+                        key={game.id}
+                        className="relative w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 bg-secondary rounded overflow-hidden shadow-lg m-4 group hover:scale-110 transition-all duration-300 ease cursor-pointer"
+                     >
+                        <Link to={`/games/${game.id}`}>
+                           <img className="w-full h-40 object-cover" src={game.short_screenshots[0].image} alt={game.name} />
+                        </Link>
+                        <div className="absolute top-0 right-0 p-2 bg-gray-800 text-white rounded-bl">
+                           <FcRating alt="MetaCritic Rating" /> {game.metacritic}
+                        </div>
+                        <div className="px-6 py-4">
+                           <div className="font-bold text-base mb-2">{`${game.name}`}</div>
+                           <div className="flex items-center gap-3 justify-center">
+                              <p className="text-gray-400 text-sm flex items-center">
+                                 <FaStarHalfAlt alt="The number of ratings" /> {game.rating}{" "}
+                              </p>
+                              <p className="text-gray-400 text-sm flex items-center">
+                                 <MdRateReview alt="The number of reviews" /> {game.reviews_count}{" "}
+                              </p>
+                              <p className="text-gray-400 text-sm flex items-center">
+                                 <FaGripfire alt="Suggestions" /> {game.suggestions_count}
+                              </p>
                            </div>
-                        )
+                        </div>
+                     </div>
+                  )
                   )}
             </div>
          </div>

src/components/TwitchTopGames.jsx

@@ -1,13 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { Link } from 'react-router-dom';
-
-// API
 import twitchApi from "../services/twitchApi";
 
-
-
 function TwitchTopGames() {
-   // State for top games list from Twitch Api
    const [twitchTopGames, setTwitchTopGames] = useState([]);
 
    useEffect(() => {