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

FIX: Route to category page upon clicking on a followed category on the sidebar

Browse Source
This commit is contained in:
Chris-1010
2025-02-28 14:50:27 +00:00
parent aaf8300a1c
commit 1d55caff03
4 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/images/category_thumbnails/the_legend_of_zelda_tears_of_the_kingdom.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

32
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -75,7 +75,8 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
const fetchFollowedCategories = async () => { const fetchFollowedCategories = async () => {
try { try {
const response = await fetch("/api/categories/following"); const response = await fetch("/api/categories/following");
if (!response.ok) throw new Error("Failed to fetch followed categories"); if (!response.ok)
throw new Error("Failed to fetch followed categories");
const data = await response.json(); const data = await response.json();
setFollowedCategories(data); setFollowedCategories(data);
} catch (error) { } catch (error) {
@@ -90,7 +91,8 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<> <>
<ToggleButton <ToggleButton
onClick={() => handleSideBar()} onClick={() => handleSideBar()}
extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]" ? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]" : "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`} } ease-in-out cursor-pointer z-[50]`}
@@ -107,7 +109,8 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<div <div
id="sidebar" id="sidebar"
className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide className={`fixed top-0 left-0 w-[15vw] 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 ${showSideBar ? "translate-x-0" : "-translate-x-full" transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`} } ${extraClasses}`}
> >
{/* Profile Info */} {/* Profile Info */}
@@ -159,7 +162,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
{followedStreamers.map((streamer: any) => ( {followedStreamers.map((streamer: any) => (
<button <button
key={`streamer-${streamer.username}`} 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 transition-colors" 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}`)} onClick={() => navigate(`/user/${streamer.username}`)}
> >
{streamer.username} {streamer.username}
@@ -177,21 +180,28 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
</h2> </h2>
{/* Followed Categories */} {/* Followed Categories */}
<div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full"> <div
id="categories-followed"
className="grid grid-cols-1 gap-4 p-4 w-full"
>
{followedCategories.map((category) => { {followedCategories.map((category) => {
return ( return (
<div <div
key={category.category_id} key={category.category_id}
className="relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color] className="group relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
rounded-lg overflow-hidden hover:shadow-lg transition-all hover:opacity-50" rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
onClick={() => navigate(`/category/${category.category_name}`)} onClick={() =>
window.location.href = `/category/${category.category_name}`
}
> >
<img <img
src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`} src={`/images/category_thumbnails/${category.category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`}
alt={category.category_name} alt={category.category_name}
className="w-full h-28 object-cover" className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
/> />
<div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1"> <div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1">
{category.category_name} {category.category_name}
</div> </div>
</div> </div>

BIN
web_server/database/app.db
View File

Binary file not shown.

3
web_server/database/testing_data.sql
View File

@@ -60,7 +60,8 @@ INSERT INTO categories (category_name) VALUES
('Dota 2'), ('Dota 2'),
('Apex Legends'), ('Apex Legends'),
('Grand Theft Auto V'), ('Grand Theft Auto V'),
('The Legend of Zelda Breath of the Wild'), ('The Legend of Zelda: Breath of the Wild'),
('The Legend of Zelda: Tears of the Kingdom'),
('Elden Ring'), ('Elden Ring'),
('Red Dead Redemption 2'), ('Red Dead Redemption 2'),
('Cyberpunk 2077'), ('Cyberpunk 2077'),