From 4a27f69776a0ceee0ece8f0eae20e3797ab795ec Mon Sep 17 00:00:00 2001
From: JustIceO7 <oscarcao777@gmail.com>
Date: Thu, 6 Mar 2025 18:49:51 +0000
Subject: [PATCH] UPDATE: Added navigation to streamers page on sidebar

UPDATE: Added text to following page for no search results
---
 .../src/components/Navigation/Sidebar.tsx     |   5 +-
 frontend/src/pages/Following.tsx              | 111 +++++++++---------
 2 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx
index a718700..7542015 100644
--- a/frontend/src/components/Navigation/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar.tsx
@@ -111,11 +111,12 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
 
                 <div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
                     <div
-                        className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
+                        className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 cursor-pointer"
                         onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
                         onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
+                        onClick={() => (window.location.href = `/user/${username}/following?tab=streamers`)}
                     >
-                        <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
+                        <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem]">Following</h1>
                     </div>
                     <div id="streamers-followed" className="flex flex-col flex-grow items-center">
                         <h2 className="border-b-2 border-t-2 w-[125%] text-2xl cursor-default mb-5">Streamers</h2>
diff --git a/frontend/src/pages/Following.tsx b/frontend/src/pages/Following.tsx
index 08b7999..60bac8b 100644
--- a/frontend/src/pages/Following.tsx
+++ b/frontend/src/pages/Following.tsx
@@ -89,67 +89,68 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
           className={`w-[96vw] h-full bg-slate-50/35 rounded-lg overflow-x-hidden flex flex-col text-center scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
         >
           {activeTab === "streamers" && (
-            <div
-              id="followed-users"
-              className={`grid grid-cols-2 gap-4 p-4 w-full`}>
-              {followedStreamers.map((streamer: any) => (
-
-                <div
-                  key={`streamer-${streamer.username}`}
-                  className="h-full cursor-pointer bg-black w-full py-2 rounded-lg text-white hover:text-purple-500 font-bold transition-colors flex items-center space-x-3 p-4"
-                >
-                  
-                  {/* Profile Picture */}
-                  <img
-                    src={`/user/${streamer.username}/profile_picture`}
-                    alt={`${streamer.username}'s profile`}
-                    className="w-10 h-10 rounded-full object-cover"
-                    onError={(e) => {
-                      e.currentTarget.onerror = null;
-                      e.currentTarget.src = "/default-profile.png"; // Fallback if image fails to load
-                    }}
-                  />
-
-                  {/* Username */}
-                  <p className="text-lg">{streamer.username}</p>
-
-                  {/* Follow/Unfollow Button */}
-                  <FollowUserButton
-                    user={{
-                      user_id: streamer.user_id,
-                      username: streamer.username,
-                      isFollowing: followingStatus[streamer.user_id] || true,
-                    }}
-                  />
+            <div className="p-4 w-full">
+              {followedStreamers.length > 0 ? (
+                <div id="followed-users" className="grid grid-cols-2 gap-4">
+                  {followedStreamers.map((streamer: any) => (
+                    <div
+                      key={`streamer-${streamer.username}`}
+                      className="h-full cursor-pointer bg-black w-full py-2 rounded-lg text-white hover:text-purple-500 font-bold transition-colors flex items-center space-x-3 p-4"
+                    >
+                      <img
+                        src={`/user/${streamer.username}/profile_picture`}
+                        alt={`${streamer.username}'s profile`}
+                        className="w-10 h-10 rounded-full object-cover"
+                        onError={(e) => {
+                          e.currentTarget.onerror = null;
+                          e.currentTarget.src = "/default-profile.png";
+                        }}
+                      />
+                      <p className="text-lg">{streamer.username}</p>
+                      <FollowUserButton
+                        user={{
+                          user_id: streamer.user_id,
+                          username: streamer.username,
+                          isFollowing: followingStatus[streamer.user_id] || true,
+                        }}
+                      />
+                    </div>
+                  ))}
                 </div>
-              ))}
+              ) : (
+                <p className="text-center text-white">No followed streamers.</p>
+              )}
             </div>
           )}
 
-          {activeTab === "categories" && (
-            <div id="categories-followed" className="grid grid-cols-3 gap-4 p-10 w-full">
-              {followedCategories.map((category) => {
-                return (
-                  <div
-                    key={category.category_id}
-                    className="relative flex flex-col items-center justify-center rounded-lg overflow-hidden hover:shadow-lg transition-all"
-                    onClick={() => navigate(`/category/${category.category_name}`)}
-                  >
-                    <FollowButton category={category} />
-                    <img
-                      src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
-                      alt={category.category_name}
-                      className="w-full h-[200px] object-cover"
-                    />
-                    <div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
-                      {category.category_name}
-                    </div>
-                  </div>
-                )
-              })}
 
+          {activeTab === "categories" && (
+            <div className="p-4 w-full">
+              {followedCategories.length > 0 ? (
+                <div id="categories-followed" className="grid grid-cols-3 gap-4">
+                  {followedCategories.map((category) => (
+                    <div
+                      key={category.category_id}
+                      className="relative flex flex-col items-center justify-center rounded-lg overflow-hidden hover:shadow-lg transition-all"
+                      onClick={() => navigate(`/category/${category.category_name}`)}
+                    >
+                      <FollowButton category={category} />
+                      <img
+                        src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
+                        alt={category.category_name}
+                        className="w-full h-[200px] object-cover"
+                      />
+                      <div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
+                        {category.category_name}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-center text-white">No followed categories.</p>
+              )}
             </div>
-          )};
+          )}
         </div>
       </div>
     </DynamicPageContent >