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

Merge branch 'main' of https://github.com/john-david3/cs3305-team11

Browse Source
This commit is contained in:
white
2025-03-03 15:33:16 +00:00
parent 0969177a42 2494e40ffd
commit 4d9afb77f1
4 changed files with 110 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@@ -15,9 +15,12 @@ import DashboardPage from "./pages/DashboardPage";
import { Brightness } from "./context/BrightnessContext"; import { Brightness } from "./context/BrightnessContext";
import LoadingScreen from "./components/Layout/LoadingScreen"; import LoadingScreen from "./components/Layout/LoadingScreen";
import Following from "./pages/Following"; import Following from "./pages/Following";
<<<<<<< HEAD
import FollowedCategories from "./pages/FollowedCategories"; import FollowedCategories from "./pages/FollowedCategories";
import UnsubscribeForm from "./components/Auth/UnsubscribeForm"; import UnsubscribeForm from "./components/Auth/UnsubscribeForm";
import UnsubscribePage from "./pages/UnsubscribePage"; import UnsubscribePage from "./pages/UnsubscribePage";
=======
>>>>>>> 2494e40ffd09ee704397c812f63d03bb7ec156f1
function App() { function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -79,7 +82,6 @@ function App() {
<Route path="/results" element={<ResultsPage />}></Route> <Route path="/results" element={<ResultsPage />}></Route>
<Route path="/404" element={<NotFoundPage />} /> <Route path="/404" element={<NotFoundPage />} />
<Route path="/user/:username/following" element={<Following />} /> <Route path="/user/:username/following" element={<Following />} />
<Route path="/user/:username/yourCategories" element={<FollowedCategories />} />
<Route path="*" element={<Navigate to="/404" replace />} /> <Route path="*" element={<Navigate to="/404" replace />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

84
frontend/src/pages/FollowedCategories.tsx
View File

@@ -1,84 +0,0 @@
import React, { useState, useEffect, useRef } from "react";
import { useAuth } from "../context/AuthContext";
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 {
isFollowing: boolean;
category_id: number;
category_name: string;
}
interface FollowedCategoryProps {
extraClasses?: string;
}
const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = "" }) => {
const navigate = useNavigate();
const { username, isLoggedIn } = useAuth();
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
const { categoryName } = useParams<{ categoryName: string }>();
const { checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow();
useEffect(() => {
if (categoryName) checkCategoryFollowStatus(categoryName);
}, [categoryName]);
useEffect(() => {
if (!isLoggedIn) return;
const fetchFollowedCategories = async () => {
try {
const response = await fetch("/api/categories/your_categories");
if (!response.ok) throw new Error("Failed to fetch followed categories");
const data = await response.json();
setFollowedCategories(data);
} catch (error) {
console.error("Error fetching followed categories:", error);
}
};
fetchFollowedCategories();
}, [isLoggedIn]);
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}`}
>
{/* Followed Categories */}
<div id="categories-followed" className="grid grid-cols-4 gap-4 p-4 w-full">
{followedCategories.map((category) => {
return (
<div
key={category.category_id}
className="relative flex flex-col items-center justify-center border border-[--text-color] 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-28 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>
</div>
</DynamicPageContent>
);
};
export default FollowedCategories;

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

@@ -1,71 +1,81 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useAuth } from "../context/AuthContext"; 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 DynamicPageContent from "../components/Layout/DynamicPageContent";
import { useFollow } from "../hooks/useFollow"; import { useFollow } from "../hooks/useFollow";
import { useAuthModal } from "../hooks/useAuthModal";
import FollowUserButton from "../components/Input/FollowUserButton"; import FollowUserButton from "../components/Input/FollowUserButton";
import FollowButton from "../components/Input/FollowButton";
interface Streamer { interface Streamer {
user_id: number; user_id: number;
username: string; username: string;
} }
interface FollowingStreamerProps { interface Category {
isFollowing: boolean;
category_id: number;
category_name: string;
}
interface FollowingProps {
extraClasses?: string; extraClasses?: string;
} }
const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => { const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const { isLoggedIn } = useAuth(); const { isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]); 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 } = const { checkFollowStatus, followUser, unfollowUser } = useFollow();
useFollow();
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const initialTab = queryParams.get("tab") === "streamers" ? "categories" : "categories";
const [activeTab, setActiveTab] = useState<"categories" | "streamers">(initialTab);
//const [followingStatus, setFollowingStatus] = useState<Record<number, boolean>>({});
useEffect(() => { useEffect(() => {
const fetchFollowedStreamers = async () => { const newTab = queryParams.get("tab") as "categories" | "streamers";
if (newTab) {
setActiveTab(newTab);
}
}, [location.search]);
useEffect(() => {
const fetchFollowedContent = async () => {
try { try {
const response = await fetch("/api/user/following"); const response = await fetch("/api/user/following");
if (!response.ok) throw new Error("Failed to fetch followed streamers"); if (!response.ok) throw new Error("Failed to fetch followed content");
const data = await response.json();
setFollowedStreamers(data);
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 } = {}; const updatedStatus: { [key: number]: boolean } = {};
for (const streamer of data || []) { for (const streamer of data.streams) {
const status = await checkFollowStatus(streamer.username); const status = await checkFollowStatus(streamer.username);
updatedStatus[streamer.user_id] = Boolean(status); updatedStatus[streamer.user_id] = Boolean(status);
} }
setFollowingStatus(updatedStatus); setFollowingStatus(updatedStatus);
console.log("Fetched Follow Status:", updatedStatus); // Log the status
} catch (error) { } catch (error) {
console.error("Error fetching followed streamers:", error); console.error("Error fetching followed content:", error);
setFollowedStreamers([]);
setFollowedCategories([]);
} }
}; };
if (isLoggedIn) { if (isLoggedIn) {
fetchFollowedStreamers(); fetchFollowedContent();
}
}, [isLoggedIn]);
const handleFollowToggle = async (userId: number) => {
const isCurrentlyFollowing = followingStatus[userId];
if (isCurrentlyFollowing) {
await unfollowUser(userId);
} else {
await followUser(userId);
} }
}, [isLoggedIn]);
// Update local state for this specific streamer
setFollowingStatus((prev) => ({
...prev,
[userId]: !isCurrentlyFollowing, // Toggle based on previous state
}));
};
return ( return (
<DynamicPageContent> <DynamicPageContent>
@@ -73,28 +83,59 @@ const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
id="sidebar" 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}`} 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 {activeTab === "streamers" && (
id="followed-users" <div
className={`grid grid-cols-2 gap-4 p-4 w-full`}> id="followed-users"
{followedStreamers.map((streamer: any) => ( className={`grid grid-cols-2 gap-4 p-4 w-full`}>
<div {followedStreamers.map((streamer: any) => (
key={`streamer-${streamer.username}`} <div
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" key={`streamer-${streamer.username}`}
/*onClick={() => navigate(`/user/${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 {streamer.username}
user={{ <FollowUserButton
user_id: streamer.user_id, user={{
username: streamer.username, user_id: streamer.user_id,
isFollowing: followingStatus[streamer.user_id] || true, username: streamer.username,
}} isFollowing: followingStatus[streamer.user_id] || true,
/> }}
</div> />
))} </div>
</div> ))}
</div>
)}
{activeTab === "categories" && (
<div id="categories-followed" className="grid grid-cols-4 gap-4 p-4 w-full">
{followedCategories.map((category) => {
return (
<div
key={category.category_id}
className="relative flex flex-col items-center justify-center border border-[--text-color] 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-28 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>
)};
</div> </div>
</DynamicPageContent>
</DynamicPageContent >
); );
}; };

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

@@ -82,13 +82,13 @@ const UserPage: React.FC = () => {
const handleNavigation = (path: string) => { const handleNavigation = (path: string) => {
if (profilePicture === initialProfilePicture.current) { if (profilePicture === initialProfilePicture.current) {
// Variable hasn't changed - use React Router navigation // Variable hasn't changed - use React Router navigation
navigate(path); navigate(path);
} else { } else {
// Variable has changed - use full page reload // Variable has changed - use full page reload
window.location.href = path; window.location.href = path;
} }
}; };
// Store initial profile picture to know if it changes later // Store initial profile picture to know if it changes later
useEffect(() => { useEffect(() => {
@@ -138,8 +138,7 @@ const UserPage: React.FC = () => {
{/* Profile Picture */} {/* Profile Picture */}
<div <div
className={`relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em] 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 ${ rounded-full flex-shrink-0 border-4 ${profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
} inset-0 z-20`} } inset-0 z-20`}
style={{ boxShadow: "var(--user-pfp-border-shadow)" }} style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
> >
@@ -269,7 +268,7 @@ const UserPage: React.FC = () => {
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")} onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} 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 Following
</button> </button>
</div> </div>
@@ -289,7 +288,7 @@ const UserPage: React.FC = () => {
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")} onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} 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> </div>
</div> </div>