dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Following Page now Works

Browse Source
This commit is contained in:
EvanLin3141
2025-03-03 13:24:37 +00:00
parent a4812e6222
commit 653fbb7352
4 changed files with 180 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.tsx
View File

@@ -76,7 +76,6 @@ function App() {
<Route path="/results" element={<ResultsPage />}></Route>
<Route path="/404" element={<NotFoundPage />} />
<Route path="/user/:username/following" element={<Following />} />
<Route path="/user/:username/yourCategories" element={<FollowedCategories />} />
<Route path="*" element={<Navigate to="/404" replace />} />
</Routes>
</BrowserRouter>

101
frontend/src/pages/FollowUsers.tsx Normal file
View File

@@ -0,0 +1,101 @@
import React, { useEffect, useState } from "react";
import { useAuth } from "../context/AuthContext";
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";
interface Streamer {
user_id: number;
username: string;
}
interface FollowingStreamerProps {
extraClasses?: string;
}
const FollowUsers: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
const navigate = useNavigate();
const { isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({}); // Store follow status for each streamer
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
useFollow();
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);
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);
}
};
if (isLoggedIn) {
fetchFollowedStreamers();
}
}, [isLoggedIn]);
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 (
<DynamicPageContent>
<div
id="sidebar"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
>
<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="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
/*onClick={() => navigate(`/user/${streamer.username}`)}*/
>
{streamer.username}
<FollowUserButton
user={{
user_id: streamer.user_id,
username: streamer.username,
isFollowing: followingStatus[streamer.user_id] || true,
}}
/>
</div>
))}
</div>
</div>
</DynamicPageContent>
);
};
export default FollowUsers;

79
frontend/src/pages/Following.tsx
View File

@@ -1,9 +1,8 @@
import React, { useEffect, useState } from "react";
import { useAuth } from "../context/AuthContext";
import { useNavigate } from "react-router-dom";
import { useLocation, 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";
interface Streamer {
@@ -11,68 +10,78 @@ interface Streamer {
username: string;
}
interface FollowingStreamerProps {
interface Category {
category_id: number;
category_name: string;
}
interface FollowingProps {
extraClasses?: string;
}
const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
const navigate = useNavigate();
const { isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({}); // Store follow status for each streamer
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({});
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
useFollow();
const { checkFollowStatus, followUser, unfollowUser } = useFollow();
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const initialTab = queryParams.get("tab") === "streamers" ? "streamers" : "categories";
const [activeTab, setActiveTab] = useState<"categories" | "streamers">(initialTab);
//const [followingStatus, setFollowingStatus] = useState<Record<number, boolean>>({});
useEffect(() => {
const fetchFollowedStreamers = async () => {
const newTab = queryParams.get("tab") as "categories" | "streamers";
if (newTab) {
setActiveTab(newTab);
}
}, [location.search]);
useEffect(() => {
const fetchFollowedContent = 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);
if (!response.ok) throw new Error("Failed to fetch followed content");
const data = await response.json();
if (!Array.isArray(data.streams) || !Array.isArray(data.categories)) {
throw new Error("API response structure is incorrect");
}
setFollowedStreamers(data.streams);
setFollowedCategories(data.categories);
// Fetch follow status for streamers
const updatedStatus: { [key: number]: boolean } = {};
for (const streamer of data || []) {
for (const streamer of data.streams) {
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);
console.error("Error fetching followed content:", error);
setFollowedStreamers([]);
setFollowedCategories([]);
}
};
if (isLoggedIn) {
fetchFollowedStreamers();
fetchFollowedContent();
}
}, [isLoggedIn]);
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 (
<DynamicPageContent>
<div
id="sidebar"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto 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`}>
@@ -93,7 +102,11 @@ const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
</div>
))}
</div>
)}
</div>
</DynamicPageContent >
);
};

7
frontend/src/pages/UserPage.tsx
View File

@@ -138,8 +138,7 @@ const UserPage: React.FC = () => {
{/* Profile Picture */}
<div
className={`relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
rounded-full flex-shrink-0 border-4 ${
profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
rounded-full flex-shrink-0 border-4 ${profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
} inset-0 z-20`}
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
>
@@ -269,7 +268,7 @@ const UserPage: React.FC = () => {
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => handleNavigation(`/user/${username}/following`)}>
<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => handleNavigation(`/user/${username}/following?tab=streamers`)}>
Following
</button>
</div>
@@ -289,7 +288,7 @@ const UserPage: React.FC = () => {
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<button onClick={() => handleNavigation(`/user/${username}/followedCategories`)}>Categories</button>
<button onClick={() => handleNavigation(`/user/${username}/following?tab=categories`)}>Categories</button>
</div>
</div>
</div>