From 284f223ef02923401cca96c77cab186e18297570 Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Sun, 2 Mar 2025 12:12:49 +0000 Subject: [PATCH] ADD: Following Page now Works --- .../src/components/Input/FollowUserButton.tsx | 54 ++++++ frontend/src/pages/FollowedCategories.tsx | 2 + frontend/src/pages/Following.tsx | 156 +++++++----------- 3 files changed, 113 insertions(+), 99 deletions(-) create mode 100644 frontend/src/components/Input/FollowUserButton.tsx diff --git a/frontend/src/components/Input/FollowUserButton.tsx b/frontend/src/components/Input/FollowUserButton.tsx new file mode 100644 index 0000000..1cfd461 --- /dev/null +++ b/frontend/src/components/Input/FollowUserButton.tsx @@ -0,0 +1,54 @@ +import React, { useEffect, useState } from "react"; +import { useFollow } from "../../hooks/useFollow"; + +interface FollowUserButtonProps { + user: { + user_id: number; + username: string; + isFollowing: boolean; + }; +} + +const FollowUserButton: React.FC = ({ user }) => { + const [isFollowing, setIsFollowing] = useState(user.isFollowing); + const [isLoading, setIsLoading] = useState(false); + + const { checkFollowStatus, followUser, unfollowUser } = useFollow(); + + useEffect(() => { + setIsFollowing(user.isFollowing); + }, [user.isFollowing]); + + const handleClick = async (e: React.MouseEvent) => { + e.stopPropagation(); + setIsLoading(true); + try { + if (isFollowing) { + await unfollowUser(user.user_id); + setIsFollowing(false); + } else { + await followUser(user.user_id); + setIsFollowing(true); + } + } catch (error) { + console.error("Error toggling follow state:", error); + } + setIsLoading(false); + }; + + return ( + + ); +}; + +export default FollowUserButton; diff --git a/frontend/src/pages/FollowedCategories.tsx b/frontend/src/pages/FollowedCategories.tsx index 430a84e..c71633d 100644 --- a/frontend/src/pages/FollowedCategories.tsx +++ b/frontend/src/pages/FollowedCategories.tsx @@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom"; import DynamicPageContent from "../components/Layout/DynamicPageContent"; import { useCategoryFollow } from "../hooks/useCategoryFollow"; import FollowButton from "../components/Input/FollowButton"; +import { useAuthModal } from "../hooks/useAuthModal"; interface Category { @@ -22,6 +23,7 @@ const FollowedCategories: React.FC = ({ extraClasses = "" const [followedCategories, setFollowedCategories] = useState([]); const { categoryName } = useParams<{ categoryName: string }>(); const { checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow(); + useEffect(() => { if (categoryName) checkCategoryFollowStatus(categoryName); diff --git a/frontend/src/pages/Following.tsx b/frontend/src/pages/Following.tsx index 0719523..445432d 100644 --- a/frontend/src/pages/Following.tsx +++ b/frontend/src/pages/Following.tsx @@ -1,35 +1,45 @@ import React, { useEffect, useState } from "react"; import { useAuth } from "../context/AuthContext"; -import { useSidebar } from "../context/SidebarContext"; -import { ToggleButton } from "../components/Input/Button"; -import { Sidebar as SidebarIcon } from "lucide-react"; -import { useNavigate } from "react-router-dom"; // Import useNavigate -import { CategoryType } from "../types/CategoryType"; +import { useNavigate } from "react-router-dom"; +import DynamicPageContent from "../components/Layout/DynamicPageContent"; +import { useFollow } from "../hooks/useFollow"; +import { useAuthModal } from "../hooks/useAuthModal"; +import FollowUserButton from "../components/Input/FollowUserButton"; -// Define TypeScript interfaces interface Streamer { user_id: number; username: string; } -interface FollowingProps { +interface FollowingStreamerProps { extraClasses?: string; } -const Following: React.FC = ({ extraClasses = "" }) => { - const { showSideBar, setShowSideBar } = useSidebar(); +const Following: React.FC = ({ extraClasses = "" }) => { const navigate = useNavigate(); - const { username, isLoggedIn } = useAuth(); + const { isLoggedIn } = useAuth(); const [followedStreamers, setFollowedStreamers] = useState([]); + const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({}); // Store follow status for each streamer + + const { isFollowing, checkFollowStatus, followUser, unfollowUser } = + useFollow(); - // Fetch followed streamers useEffect(() => { const fetchFollowedStreamers = async () => { try { const response = await fetch("/api/user/following"); if (!response.ok) throw new Error("Failed to fetch followed streamers"); const data = await response.json(); - setFollowedStreamers(data.streamers || []); + setFollowedStreamers(data); + + const updatedStatus: { [key: number]: boolean } = {}; + for (const streamer of data || []) { + const status = await checkFollowStatus(streamer.username); + updatedStatus[streamer.user_id] = Boolean(status); + } + setFollowingStatus(updatedStatus); + + console.log("Fetched Follow Status:", updatedStatus); // Log the status } catch (error) { console.error("Error fetching followed streamers:", error); } @@ -40,103 +50,51 @@ const Following: React.FC = ({ extraClasses = "" }) => { } }, [isLoggedIn]); - // Handle sidebar toggle - const handleSideBar = () => { - setShowSideBar(!showSideBar); + + const handleFollowToggle = async (userId: number) => { + const isCurrentlyFollowing = followingStatus[userId]; + + if (isCurrentlyFollowing) { + await unfollowUser(userId); + } else { + await followUser(userId); + } + + // Update local state for this specific streamer + setFollowingStatus((prev) => ({ + ...prev, + [userId]: !isCurrentlyFollowing, // Toggle based on previous state + })); }; return ( - <> - {/* Sidebar Toggle Button */} - - - - {showSideBar && ( - - Press S - - )} - - - {/* Sidebar Container */} +