Add nav link to other pages and files rename

group14-aaa · Feb 16, 2024 · 7aa9dd4 · 7aa9dd4
1 parent 98a91d8
commit 7aa9dd4
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 47 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -11,23 +11,33 @@ import Loading from "./components/Loading";
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
 const Contact = lazy(() => import('./pages/Contact'));
-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 DisplayGameInfo = lazy(() => import('./pages/games/DisplayGameInfo'));
+
+const TopGamesStreaming = lazy(() => import(
+   './pages/streams'
+));
+const DisplayMostViewedStreams = lazy(() => import(
+   './pages/streams/DisplayMostViewedStreams'
+));
+const DisplayStreamsByGame = lazy(() => import(
+   './pages/streams/DisplayStreamsByGame'
+));
 const ErrorPage = lazy(() => import('./pages/404'));
 
 // Page path
 const routes = [
    { path: "/", component: Home },
    { 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: "/games/:gId", component: DisplayGameInfo },
+   { path: "/streams/", component: TopGamesStreaming },
+   { path: "/streams/most-viewed", component: DisplayMostViewedStreams },
+   { path: "/streams/:gameId", component: DisplayStreamsByGame },
+
+
    { path: "*", component: ErrorPage },
 ];
 

diff --git a/src/components/NavigationSidebar.jsx b/src/components/NavigationSidebar.jsx
@@ -24,7 +24,7 @@ const NavigationSidebar = ({
                 </div>
             </Link>
 
-            <Link to="/streams/most-views">
+            <Link to="/streams/most-viewed">
                 <div className="p-5 hover:bg-accent hover:text-white ">
                     <h2 className="text-2xl font-bold">Top 100 Streams</h2>
                 </div>

diff --git a/src/components/TwitchTopStreams.jsx b/src/components/TwitchTopStreams.jsx
@@ -30,7 +30,7 @@ const TwitchTopStreams = ({ gameId, limit }) => {
         }
     };
 
-    // Function to handle thumbnail click and start playing the stream
+    // Handle thumbnail click and start playing the stream
     const handleThumbnailClick = (stream) => {
         setSelectedStream(stream);
     };

diff --git a/src/pages/games/GamePage.jsx → src/pages/games/DisplayGameInfo.jsx b/src/pages/games/GamePage.jsx → src/pages/games/DisplayGameInfo.jsx
@@ -16,7 +16,7 @@ import GamePageStreams from "../../components/GamePageStreams";
 import rawgApi from "../../services/rawgApi";
 import youtubeAPI from "../../services/youtubeAPI";
 
-const GamePage = () => {
+const DisplayGameInfo = () => {
    const { gId } = useParams();
    const [gameData, setGameData] = useState(null);
    const [error, setError] = useState(null);
@@ -273,4 +273,4 @@ const GamePage = () => {
    );
 };
 
-export default GamePage;
+export default DisplayGameInfo;
diff --git a/src/pages/games/top/index.jsx b/src/pages/games/top/index.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, lazy } from 'react';
+import { Link } from 'react-router-dom';
 
 // Components
 const RawgTopRatedGames = lazy(() => import(
@@ -30,10 +31,26 @@ const TopRatedGames = () => {
 
     return (
         <div className="grid grid-cols-4">
-            {/* <div className="bg-primary text-text h-full hidden md:block">
-                Streams Sidebar
-            </div> */}
-            <div className="col-span-4 bg-primary text-text">
+            <div className="bg-secondary text-text h-full hidden md:block">
+                <Link to="/streams/">
+                    <div className="p-5 hover:bg-accent hover:text-white ">
+                        <h2 className="text-2xl font-bold">Top Games Streaming</h2>
+                    </div>
+                </Link>
+
+                <Link to="/streams/most-viewed">
+                    <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 Games</h2>
+                    </div>
+                </Link>
+            </div>
+            <div className="col-span-4 md:col-span-3 bg-primary text-text">
                 {allGamesList?.length > 0 && (
                     <RawgTopRatedGames gamesList={allGamesList} />
                 )}

diff --git a/src/pages/streams/DisplayMostViewedStreams.jsx b/src/pages/streams/DisplayMostViewedStreams.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import TwitchTopStreams from '../../components/TwitchTopStreams';
+
+const DisplayMostViewedStreams = () => {
+    return (
+        <div className="grid grid-cols-4">
+            <div className="bg-secondary text-text h-full hidden md:block">
+                <Link to="/streams/">
+                    <div className="p-5 hover:bg-accent hover:text-white ">
+                        <h2 className="text-2xl font-bold">Top Games Streaming</h2>
+                    </div>
+                </Link>
+
+                <Link to="/streams/most-viewed">
+                    <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 Games</h2>
+                    </div>
+                </Link>
+            </div>
+            <div className="col-span-4 md:col-span-3 bg-primary text-text">
+                <TwitchTopStreams />
+            </div>
+        </div>
+    )
+}
+export default DisplayMostViewedStreams;
diff --git a/src/pages/streams/ViewStreams.jsx → src/pages/streams/DisplayStreamsByGame.jsx b/src/pages/streams/ViewStreams.jsx → src/pages/streams/DisplayStreamsByGame.jsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import ReactPlayer from 'react-player';
 import twitchApi from '../../services/twitchApi';
 import '../../assets/styles/twitch.css';
 
-const ViewStreams = ({ limit }) => {
+const DisplayStreamsByGame = ({ limit }) => {
     const { gameId } = useParams();
     const [twitchTopStreams, setTwitchTopStreams] = useState([]);
     const [selectedStream, setSelectedStream] = useState(null);
@@ -40,10 +40,26 @@ const ViewStreams = ({ limit }) => {
 
     return (
         <div className="grid grid-cols-4">
-            {/* <div className="bg-primary text-text h-full hidden md:block">
-                View Streams Sidebar
-            </div> */}
-            <div className="col-span-4 bg-primary text-text">
+            <div className="bg-secondary text-text h-full hidden md:block">
+                <Link to="/streams/">
+                    <div className="p-5 hover:bg-accent hover:text-white ">
+                        <h2 className="text-2xl font-bold">Top Games Streaming</h2>
+                    </div>
+                </Link>
+
+                <Link to="/streams/most-viewed">
+                    <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 Games</h2>
+                    </div>
+                </Link>
+            </div>
+            <div className="col-span-4 md:col-span-3 bg-primary text-text">
                 <h2 className="text-3xl font-bold text-gray-400 mb-4 mt-6 text-center">
                     Most viewed Live Streams on Twitch - {gameName}
                 </h2>
@@ -110,4 +126,4 @@ const ViewStreams = ({ limit }) => {
     );
 }
 
-export default ViewStreams;
+export default DisplayStreamsByGame;
diff --git a/src/pages/streams/MostViewedStreams.jsx b/src/pages/streams/MostViewedStreams.jsx
diff --git a/src/pages/streams/index.jsx b/src/pages/streams/index.jsx
@@ -1,18 +1,36 @@
 import React, { lazy } from 'react';
+import { Link } from 'react-router-dom';
 
 // Components
 const TwitchTopGames = lazy(() => import('../../components/TwitchTopGames'));
 
-const Streams = () => {
+const TopGamesStreaming = () => {
     return (
         <div className="grid grid-cols-4">
-            {/* <div className="bg-primary text-text h-full hidden md:block">
-                Streams Sidebar
-            </div> */}
-            <div className="col-span-4 bg-primary text-text">
+            <div className="bg-secondary text-text h-full hidden md:block">
+                <Link to="/streams/">
+                    <div className="p-5 hover:bg-accent hover:text-white ">
+                        <h2 className="text-2xl font-bold">Top Games Streaming</h2>
+                    </div>
+                </Link>
+
+                <Link to="/streams/most-viewed">
+                    <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 Games</h2>
+                    </div>
+                </Link>
+            </div>
+            <div className="col-span-4 md:col-span-3 bg-primary text-text">
                 <TwitchTopGames />
             </div>
         </div>
     )
 }
-export default Streams;
+
+export default TopGamesStreaming;