UPDATE/FEAT: Proper handling of profile pictures where a fallback to the default pfp is used;
REFACTOR: Remove unnecessary props from users on `ResultsPage`; REFACTOR: General formatting
This commit is contained in:
Chris-1010
@@ -84,7 +84,11 @@ const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, on
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<img
|
||||
src="/images/monkey.png"
|
||||
src={`/user/${username}/profile_picture`}
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = "/images/pfps/default.png";
|
||||
e.currentTarget.onerror = null;
|
||||
}}
|
||||
alt={`user ${username}`}
|
||||
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
|
||||
/>
|
||||
|
||||
@@ -4,199 +4,164 @@ import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import { useSidebar } from "../../context/SidebarContext";
|
||||
import { ToggleButton } from "../Input/Button";
|
||||
import { getCategoryThumbnail } from "../../utils/thumbnailUtils";
|
||||
|
||||
interface Streamer {
|
||||
user_id: number;
|
||||
username: string;
|
||||
user_id: number;
|
||||
username: string;
|
||||
}
|
||||
|
||||
interface Category {
|
||||
category_id: number;
|
||||
category_name: string;
|
||||
category_id: number;
|
||||
category_name: string;
|
||||
}
|
||||
|
||||
interface SideBarProps {
|
||||
extraClasses?: string;
|
||||
extraClasses?: string;
|
||||
}
|
||||
|
||||
const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
|
||||
const { showSideBar, setShowSideBar } = useSidebar();
|
||||
const navigate = useNavigate();
|
||||
const { username, isLoggedIn } = useAuth();
|
||||
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
|
||||
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
|
||||
const [justToggled, setJustToggled] = useState(false);
|
||||
const sidebarId = useRef(Math.floor(Math.random() * 1000000));
|
||||
const { showSideBar, setShowSideBar } = useSidebar();
|
||||
const navigate = useNavigate();
|
||||
const { username, isLoggedIn } = useAuth();
|
||||
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
|
||||
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
|
||||
const [justToggled, setJustToggled] = useState(false);
|
||||
const sidebarId = useRef(Math.floor(Math.random() * 1000000));
|
||||
|
||||
// Fetch followed streamers & categories
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) return;
|
||||
// Fetch followed streamers & categories
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) return;
|
||||
|
||||
const fetchFollowData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/user/following");
|
||||
if (!response.ok) throw new Error("Failed to fetch followed content");
|
||||
const data = await response.json();
|
||||
setFollowedStreamers(data.streams);
|
||||
setFollowedCategories(data.categories);
|
||||
} catch (error) {
|
||||
console.error("Error fetching followed content:", error);
|
||||
}
|
||||
};
|
||||
const fetchFollowData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/user/following");
|
||||
if (!response.ok) throw new Error("Failed to fetch followed content");
|
||||
const data = await response.json();
|
||||
setFollowedStreamers(data.streams);
|
||||
setFollowedCategories(data.categories);
|
||||
} catch (error) {
|
||||
console.error("Error fetching followed content:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchFollowData();
|
||||
}, [isLoggedIn]);
|
||||
fetchFollowData();
|
||||
}, [isLoggedIn]);
|
||||
|
||||
const handleSideBar = () => {
|
||||
setShowSideBar(!showSideBar);
|
||||
setJustToggled(true);
|
||||
setTimeout(() => setJustToggled(false), 200);
|
||||
};
|
||||
const handleSideBar = () => {
|
||||
setShowSideBar(!showSideBar);
|
||||
setJustToggled(true);
|
||||
setTimeout(() => setJustToggled(false), 200);
|
||||
};
|
||||
|
||||
// Keyboard shortcut to toggle sidebar
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (
|
||||
e.key === "s" &&
|
||||
document.activeElement == document.body &&
|
||||
isLoggedIn
|
||||
)
|
||||
handleSideBar();
|
||||
};
|
||||
// Keyboard shortcut to toggle sidebar
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === "s" && document.activeElement == document.body && isLoggedIn) handleSideBar();
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [showSideBar, setShowSideBar, isLoggedIn]);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [showSideBar, setShowSideBar, isLoggedIn]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToggleButton
|
||||
onClick={() => handleSideBar()}
|
||||
extraClasses={`absolute group text-[1rem] top-[9vh] ${
|
||||
showSideBar
|
||||
? "left-[16vw] duration-[0.5s]"
|
||||
: "left-[20px] duration-[1s]"
|
||||
} ease-in-out cursor-pointer z-[50]`}
|
||||
toggled={showSideBar}
|
||||
>
|
||||
<SidebarIcon className="h-[2vw] w-[2vw]" />
|
||||
return (
|
||||
<>
|
||||
<ToggleButton
|
||||
onClick={() => handleSideBar()}
|
||||
extraClasses={`absolute group text-[1rem] top-[9vh] ${
|
||||
showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
|
||||
} ease-in-out cursor-pointer z-[50]`}
|
||||
toggled={showSideBar}
|
||||
>
|
||||
<SidebarIcon className="h-[2vw] w-[2vw]" />
|
||||
|
||||
{!showSideBar && !justToggled && (
|
||||
<small className="absolute flex items-center top-0 ml-2 left-0 h-full my-auto w-fit text-nowrap font-bold my-auto group-hover:left-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
|
||||
Press S
|
||||
</small>
|
||||
)}
|
||||
</ToggleButton>
|
||||
<div
|
||||
id={`sidebar-${sidebarId.current}`}
|
||||
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"
|
||||
} ${extraClasses}`}
|
||||
>
|
||||
{/* Profile Info */}
|
||||
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
|
||||
<img
|
||||
src="/images/monkey.png"
|
||||
alt="profile picture"
|
||||
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
|
||||
onClick={() => navigate(`/user/${username}`)}
|
||||
/>
|
||||
<div className="text-center flex flex-col items-center justify-center">
|
||||
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
|
||||
Logged in as
|
||||
</h5>
|
||||
<button
|
||||
className="font-black text-[1.4rem] hover:underline"
|
||||
onClick={() => navigate(`/user/${username}`)}
|
||||
>
|
||||
<div className="text-[var(--sideBar-profile-text)]">
|
||||
{username}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!showSideBar && !justToggled && (
|
||||
<small className="absolute flex items-center top-0 ml-2 left-0 h-full my-auto w-fit text-nowrap font-bold my-auto group-hover:left-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
|
||||
Press S
|
||||
</small>
|
||||
)}
|
||||
</ToggleButton>
|
||||
<div
|
||||
id={`sidebar-${sidebarId.current}`}
|
||||
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"} z-50 ${extraClasses}`}
|
||||
>
|
||||
{/* Profile Info */}
|
||||
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
|
||||
<img
|
||||
src={`/user/${username}/profile_picture`}
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = "/images/pfps/default.png";
|
||||
e.currentTarget.onerror = null;
|
||||
}}
|
||||
alt="profile picture"
|
||||
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
|
||||
onClick={() => navigate(`/user/${username}`)}
|
||||
/>
|
||||
<div className="text-center flex flex-col items-center justify-center">
|
||||
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">Logged in as</h5>
|
||||
<button className="font-black text-[1.4rem] hover:underline" onClick={() => navigate(`/user/${username}`)}>
|
||||
<div className="text-[var(--sideBar-profile-text)]">{username}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="following"
|
||||
className="flex flex-col flex-grow justify-evenly p-4 gap-4"
|
||||
>
|
||||
<div
|
||||
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
||||
}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
|
||||
Following
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
id="streamers-followed"
|
||||
className="flex flex-col flex-grow items-center"
|
||||
>
|
||||
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
|
||||
Streamers
|
||||
</h2>
|
||||
<div className="flex flex-col flex-grow justify-evenly w-full">
|
||||
{followedStreamers.map((streamer) => (
|
||||
<button
|
||||
key={`${sidebarId.current}-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}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
|
||||
<div
|
||||
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
|
||||
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
|
||||
</div>
|
||||
<div id="streamers-followed" className="flex flex-col flex-grow items-center">
|
||||
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Streamers</h2>
|
||||
<div className="flex flex-col flex-grow justify-evenly w-full">
|
||||
{followedStreamers.map((streamer) => (
|
||||
<button
|
||||
key={`${sidebarId.current}-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}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="categories-followed"
|
||||
className="flex flex-col flex-grow items-center"
|
||||
>
|
||||
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
|
||||
Categories
|
||||
</h2>
|
||||
<div id="categories-followed" className="flex flex-col flex-grow items-center">
|
||||
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Categories</h2>
|
||||
|
||||
{/* Followed Categories */}
|
||||
<div
|
||||
id="categories-followed"
|
||||
className="grid grid-cols-1 gap-4 p-4 w-full"
|
||||
>
|
||||
{followedCategories.map((category) => {
|
||||
return (
|
||||
<div
|
||||
key={`${sidebarId.current}-category-${category.category_id}`}
|
||||
className="group relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
|
||||
{/* Followed Categories */}
|
||||
<div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">
|
||||
{followedCategories.map((category) => {
|
||||
return (
|
||||
<div
|
||||
key={`${sidebarId.current}-category-${category.category_id}`}
|
||||
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 text-white hover:text-purple-500 cursor-pointer"
|
||||
onClick={() =>
|
||||
(window.location.href = `/category/${category.category_name}`)
|
||||
}
|
||||
>
|
||||
<img
|
||||
src={`/images/category_thumbnails/${category.category_name
|
||||
.toLowerCase()
|
||||
.replace(/ /g, "_")}.webp`}
|
||||
alt={category.category_name}
|
||||
className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
|
||||
/>
|
||||
<div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1">
|
||||
{category.category_name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
onClick={() => (window.location.href = `/category/${category.category_name}`)}
|
||||
>
|
||||
<img
|
||||
src={getCategoryThumbnail(category.category_name)}
|
||||
alt={category.category_name}
|
||||
className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
|
||||
/>
|
||||
<div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1">
|
||||
{category.category_name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
|
||||
@@ -183,7 +183,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
|
||||
onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
|
||||
>
|
||||
<img
|
||||
src="/images/monkey.png"
|
||||
src={`/user/${msg.chatter_username}/profile_picture`}
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = "/images/pfps/default.png";
|
||||
e.currentTarget.onerror = null;
|
||||
}}
|
||||
alt="User Avatar"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ width: "2.5em", height: "2.5em" }}
|
||||
|
||||
Reference in New Issue
Block a user