From 2b325746f523597ec9581fdfd9a924cb723182fa Mon Sep 17 00:00:00 2001
From: Chris-1010 <122332721@umail.ucc.ie>
Date: Thu, 27 Feb 2025 21:32:51 +0000
Subject: [PATCH] FEAT: Navigate to category page of stream's category upon
 clicking it

---
 frontend/src/components/Stream/ChatPanel.tsx | 16 ++++++++++++++--
 frontend/src/pages/VideoPage.tsx             | 17 ++---------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Stream/ChatPanel.tsx b/frontend/src/components/Stream/ChatPanel.tsx
index 5697591..c9914eb 100644
--- a/frontend/src/components/Stream/ChatPanel.tsx
+++ b/frontend/src/components/Stream/ChatPanel.tsx
@@ -150,11 +150,23 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
       {/* Toggle Button for Chat */}
       <button
         onClick={toggleChat}
-        className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[4vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[20] duration-[0.3s] transition-all`}
+        className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${
+          showChat ? "" : "delay-[0.75s] -translate-x-[4vw]"
+        } text-[1rem] text-purple-500 flex items-center flex-nowrap z-[20] duration-[0.3s] transition-all`}
       >
         {showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
 
-        <small className={`absolute ${showChat ? justToggled ? "left-0 group-hover:-left-[5vw] group-hover:bg-white/10" : "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : justToggled ? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"} p-1 rounded-md w-fit text-nowrap font-bold opacity-0 group-hover:opacity-100 text-white transition-all`}>
+        <small
+          className={`absolute ${
+            showChat
+              ? justToggled
+                ? "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
+                : "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
+              : justToggled
+              ? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
+              : "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
+          } p-1 rounded-md w-fit text-nowrap font-bold opacity-0 group-hover:opacity-100 text-white transition-all`}
+        >
           Press C
         </small>
       </button>
diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx
index 11e91c2..32183af 100644
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -32,7 +32,6 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   const [showCheckout, setShowCheckout] = useState(false);
   const { showChat } = useChat();
   const navigate = useNavigate();
-  const [isSubscribed, setIsSubscribed] = useState(false);
   const [timeStarted, setTimeStarted] = useState("");
 
   useEffect(() => {
@@ -126,18 +125,6 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
     loadStripe();
   }, []);
 
-  // Checks if user is subscribed
-  useEffect(() => {
-    fetch(`/api/user/subscription/${streamerName}/expiration`)
-      .then((response) => response.json())
-      .then((data) => {
-        if (data.remaining_time > 0) {
-          setIsSubscribed(true);
-        }
-      })
-      .catch((error) => console.error("Error fetching subscription:", error));
-  }, [streamerName]);
-
   return (
     <SocketProvider>
       <DynamicPageContent className="w-full min-h-screen">
@@ -188,9 +175,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
               <h2 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">
                 {streamData ? streamData.title : "Loading..."}
               </h2>
-              <span className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
+              <a href={streamData ? `/category/${streamData.streamCategory}` : "#"} className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
                 {streamData ? streamData.streamCategory : "Loading..."}
-              </span>
+              </a>
             </div>
 
             {/* Streamer Info */}