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

FIX: Navigation from ListItems;

Browse Source 
REFACTOR: Format all files;
This commit is contained in:
Chris-1010
2025-02-23 22:57:00 +00:00
parent 5c81f58e66
commit a27ee52de1
34 changed files with 387 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/pages/AllCategoriesPage.tsx
View File

@@ -17,29 +17,31 @@ const AllCategoriesPage: React.FC = () => {
const [categoryOffset, setCategoryOffset] = useState(0);
const [noCategories, setNoCategories] = useState(12);
const [hasMoreData, setHasMoreData] = useState(true);
const listRowRef = useRef<any>(null);
const isLoading = useRef(false);
const fetchCategories = async () => {
// If already loading, skip this fetch
if (isLoading.current) return;
isLoading.current = true;
try {
const response = await fetch(`/api/categories/popular/${noCategories}/${categoryOffset}`);
const response = await fetch(
`/api/categories/popular/${noCategories}/${categoryOffset}`
);
if (!response.ok) {
throw new Error("Failed to fetch categories");
}
const data = await response.json();
if (data.length === 0) {
setHasMoreData(false);
return [];
}
setCategoryOffset(prev => prev + data.length);
setCategoryOffset((prev) => prev + data.length);
const processedCategories = data.map((category: any) => ({
type: "category" as const,
@@ -51,7 +53,7 @@ const AllCategoriesPage: React.FC = () => {
.replace(/ /g, "_")}.webp`,
}));
setCategories(prev => [...prev, ...processedCategories]);
setCategories((prev) => [...prev, ...processedCategories]);
return processedCategories;
} catch (error) {
console.error("Error fetching categories:", error);
@@ -99,7 +101,7 @@ const AllCategoriesPage: React.FC = () => {
type="category"
title="All Categories"
items={categories}
onClick={handleCategoryClick}
onItemClick={handleCategoryClick}
extraClasses="bg-[var(--recommend)] text-center"
wrap={true}
/>
@@ -107,4 +109,4 @@ const AllCategoriesPage: React.FC = () => {
);
};
export default AllCategoriesPage;
export default AllCategoriesPage;

41
frontend/src/pages/CategoryPage.tsx
View File

@@ -6,16 +6,7 @@ import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
import Button from "../components/Input/Button";
import { useAuth } from "../context/AuthContext";
import { useCategoryFollow } from "../hooks/useCategoryFollow";
interface StreamData {
type: "stream";
id: number;
title: string;
streamer: string;
streamCategory: string;
viewers: number;
thumbnail?: string;
}
import { ListItemProps as StreamData } from "../components/Layout/ListItem";
const CategoryPage: React.FC = () => {
const { categoryName } = useParams<{ categoryName: string }>();
@@ -26,10 +17,15 @@ const CategoryPage: React.FC = () => {
const [noStreams, setNoStreams] = useState(12);
const [hasMoreData, setHasMoreData] = useState(true);
const { isLoggedIn } = useAuth();
const { isCategoryFollowing, checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow()
const {
isCategoryFollowing,
checkCategoryFollowStatus,
followCategory,
unfollowCategory,
} = useCategoryFollow();
useEffect(() => {
checkCategoryFollowStatus(categoryName);
if (categoryName) checkCategoryFollowStatus(categoryName);
}, [categoryName]);
const fetchCategoryStreams = async () => {
@@ -38,7 +34,9 @@ const CategoryPage: React.FC = () => {
isLoading.current = true;
try {
const response = await fetch(`/api/streams/popular/${categoryName}/${noStreams}/${streamOffset}`);
const response = await fetch(
`/api/streams/popular/${categoryName}/${noStreams}/${streamOffset}`
);
if (!response.ok) {
throw new Error("Failed to fetch category streams");
}
@@ -49,13 +47,13 @@ const CategoryPage: React.FC = () => {
return [];
}
setStreamOffset(prev => prev + data.length);
setStreamOffset((prev) => prev + data.length);
const processedStreams = data.map((stream: any) => ({
type: "stream",
id: stream.user_id,
title: stream.title,
streamer: stream.username,
username: stream.username,
streamCategory: categoryName,
viewers: stream.num_viewers,
thumbnail:
@@ -66,8 +64,8 @@ const CategoryPage: React.FC = () => {
.replace(/ /g, "_")}.webp`),
}));
setStreams(prev => [...prev, ...processedStreams]);
return processedStreams
setStreams((prev) => [...prev, ...processedStreams]);
return processedStreams;
} catch (error) {
console.error("Error fetching category streams:", error);
} finally {
@@ -90,7 +88,6 @@ const CategoryPage: React.FC = () => {
fetchContentOnScroll(logOnScroll, hasMoreData);
const handleStreamClick = (streamerName: string) => {
window.location.href = `/${streamerName}`;
};
@@ -115,14 +112,18 @@ const CategoryPage: React.FC = () => {
description={`Live streams in the ${categoryName} category`}
items={streams}
wrap={true}
onClick={handleStreamClick}
onItemClick={handleStreamClick}
extraClasses="bg-[var(--recommend)]"
>
{isLoggedIn && (
<Button
extraClasses="absolute right-10"
onClick={() => {
isCategoryFollowing ? unfollowCategory(categoryName) : followCategory(categoryName)
if (categoryName) {
isCategoryFollowing
? unfollowCategory(categoryName)
: followCategory(categoryName);
}
}}
>
{isCategoryFollowing ? "Unfollow" : "Follow"}

8
frontend/src/pages/HomePage.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef, useEffect } from "react";
import React from "react";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
import { useStreams, useCategories } from "../context/ContentContext";
@@ -45,7 +45,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
}
items={streams}
wrap={false}
onClick={handleStreamClick}
onItemClick={handleStreamClick}
extraClasses="bg-[var(--liveNow)]"
/>
@@ -64,7 +64,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
}
items={categories}
wrap={false}
onClick={handleCategoryClick}
onItemClick={handleCategoryClick}
titleClickable={true}
extraClasses="bg-[var(--recommend)]"
>
@@ -79,4 +79,4 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
);
};
export default HomePage;
export default HomePage;

34
frontend/src/pages/NotFoundPage.tsx
View File

@@ -4,7 +4,9 @@ import Button from "../components/Input/Button";
import ChromeDinoGame from "react-chrome-dino";
const NotFoundPage: React.FC = () => {
const [stars, setStars] = useState<{ x: number; y: number, xChange: number, yChange: number }[]>([]);
const [stars, setStars] = useState<
{ x: number; y: number; xChange: number; yChange: number }[]
>([]);
const starSize = 30;
const [score, setScore] = useState(0);
@@ -16,9 +18,15 @@ const NotFoundPage: React.FC = () => {
const loop = setInterval(() => {
if (Math.random() < 0.1) {
const newStar = {
x: score > 20000 ? (window.innerWidth + starSize) : Math.random() * (window.innerWidth - starSize),
y: score > 20000 ? Math.random() * (window.innerHeight - starSize) : -starSize,
xChange: score * .001,
x:
score > 20000
? window.innerWidth + starSize
: Math.random() * (window.innerWidth - starSize),
y:
score > 20000
? Math.random() * (window.innerHeight - starSize)
: -starSize,
xChange: score * 0.001,
yChange: 5,
};
setStars((prev) => [...prev, newStar]);
@@ -39,7 +47,7 @@ const NotFoundPage: React.FC = () => {
return newStars.map((star) => ({
x: star.x - star.xChange,
y: star.y + star.yChange,
xChange: score * .001,
xChange: score * 0.001,
yChange: star.yChange,
}));
});
@@ -68,7 +76,15 @@ const NotFoundPage: React.FC = () => {
}, []);
return (
<div className={`h-screen w-screen ${score > 25000 ? "bg-black" : score > 10000 ? "bg-[#0f0024]" : "bg-slate-900"} text-white overflow-hidden relative transition-colors duration-[5s]`}>
<div
className={`h-screen w-screen ${
score > 25000
? "bg-black"
: score > 10000
? "bg-[#0f0024]"
: "bg-slate-900"
} text-white overflow-hidden relative transition-colors duration-[5s]`}
>
<div>
{stars.map((star, index) => (
<div
@@ -81,7 +97,11 @@ const NotFoundPage: React.FC = () => {
))}
</div>
<div className="absolute flex justify-center items-center h-full z-0 inset-0 bg-[radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] bg-[length:50px_50px]">
<div className={`${score > 30000 && "drop-shadow-[0_0_5px_rgb(220,20,60)]" } w-full text-center animate-floating transition-all duration-[5s]`}>
<div
className={`${
score > 30000 && "drop-shadow-[0_0_5px_rgb(220,20,60)]"
} w-full text-center animate-floating transition-all duration-[5s]`}
>
<h1 className="text-6xl font-bold mb-4">404</h1>
<p className="text-2xl mb-8">Page Not Found</p>
<ChromeDinoGame />

35
frontend/src/pages/ResetPasswordPage.tsx
View File

@@ -3,28 +3,29 @@ import PasswordResetForm from "../components/Auth/PasswordResetForm";
import { useParams } from "react-router-dom";
const ResetPasswordPage: React.FC = () => {
const { token } = useParams<{ token: string }>();
const { token } = useParams<{ token: string }>();
const handlePasswordReset = (success: boolean) => {
if (success) {
alert("Password reset successful!");
window.location.href = "/";
}
else {
alert("Password reset failed.");
}
};
if (!token) {
return <p className="text-red-500 text-center mt-4">Invalid or missing token.</p>;
const handlePasswordReset = (success: boolean) => {
if (success) {
alert("Password reset successful!");
window.location.href = "/";
} else {
alert("Password reset failed.");
}
};
if (!token) {
return (
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-2xl font-bold mb-4">Forgot Password</h1>
<PasswordResetForm onSubmit={handlePasswordReset} token={token} />
</div>
<p className="text-red-500 text-center mt-4">Invalid or missing token.</p>
);
}
return (
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-2xl font-bold mb-4">Forgot Password</h1>
<PasswordResetForm onSubmit={handlePasswordReset} token={token} />
</div>
);
};
export default ResetPasswordPage;

6
frontend/src/pages/ResultsPage.tsx
View File

@@ -70,7 +70,7 @@ const ResultsPage: React.FC = ({}) => {
thumbnail: stream.thumbnail_url,
}))}
title="Streams"
onClick={(streamer_name: string) =>
onItemClick={(streamer_name: string) =>
(window.location.href = `/${streamer_name}`)
}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
@@ -92,7 +92,7 @@ const ResultsPage: React.FC = ({}) => {
.replace(/ /g, "_")}.webp`,
}))}
title="Categories"
onClick={(category_name: string) =>
onItemClick={(category_name: string) =>
navigate(`/category/${category_name}`)
}
titleClickable={true}
@@ -114,7 +114,7 @@ const ResultsPage: React.FC = ({}) => {
thumbnail: user.profile_picture,
}))}
title="Users"
onClick={(username: string) =>
onItemClick={(username: string) =>
(window.location.href = `/user/${username}`)
}
amountForScroll={3}

4
frontend/src/pages/StreamDashboardPage.tsx
View File

@@ -235,7 +235,7 @@ const StreamDashboardPage: React.FC = () => {
if (thumbnail) {
formData.append("thumbnail", thumbnail);
}
try {
const response = await fetch("/api/update_stream", {
method: "POST",
@@ -461,7 +461,7 @@ const StreamDashboardPage: React.FC = () => {
type="stream"
id={1}
title={streamData.title || "Stream Title"}
streamer={username || ""}
username={username || ""}
streamCategory={streamData.category_name || "Category"}
viewers={streamData.viewer_count}
thumbnail={thumbnailPreview.url || ""}

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

@@ -116,7 +116,6 @@ const UserPage: React.FC = () => {
} text-white flex flex-col`}
>
<div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
{/* Profile Section - TOP */}
@@ -129,9 +128,9 @@ const UserPage: React.FC = () => {
{/* Border Overlay (Always on Top) */}
<div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
{/* Background Box */}
<div className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
<div
className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
bg-[var(--user-box)] z-10 flex-shrink justify-center"
style={{ boxShadow: "var(--user-box-shadow)" }}
>
@@ -197,7 +196,9 @@ const UserPage: React.FC = () => {
className="col-span-1 bg-[var(--user-sideBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
>
{/* User Type (e.g., "USER") */}
<small className="text-green-400">{userPageVariant.toUpperCase()}</small>
<small className="text-green-400">
{userPageVariant.toUpperCase()}
</small>
<div className="mt-6 text-center">
<h2 className="text-xl font-semibold mb-3">
@@ -258,7 +259,6 @@ const UserPage: React.FC = () => {
</div>
</>
)}
</div>
<div
@@ -269,31 +269,39 @@ const UserPage: React.FC = () => {
<div
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
flex items-center justify-center w-full p-4 content-start"
onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">Following</li>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">
Following
</li>
</div>
<div
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
flex items-center justify-center w-full p-4 content-start"
onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">Streamers</li>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">
Streamers
</li>
</div>
<div
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
flex items-center justify-center w-full p-4 content-start"
onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">Category</li>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">
Category
</li>
</div>
</div>
</div>
</div>