UPDATE/REFACTOR: Change how followed content is obtained for Sidebar
This commit is contained in:
Chris-1010
@@ -28,22 +28,23 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
|
||||
const [justToggled, setJustToggled] = useState(false);
|
||||
const sidebarId = useRef(Math.floor(Math.random() * 1000000));
|
||||
|
||||
// Fetch followed streamers
|
||||
// Fetch followed streamers & categories
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) return;
|
||||
|
||||
const fetchFollowedStreamers = async () => {
|
||||
const fetchFollowData = async () => {
|
||||
try {
|
||||
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);
|
||||
setFollowedStreamers(data.streams);
|
||||
setFollowedCategories(data.categories);
|
||||
} catch (error) {
|
||||
console.error("Error fetching followed streamers:", error);
|
||||
console.error("Error fetching followed content:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchFollowedStreamers();
|
||||
fetchFollowData();
|
||||
}, [isLoggedIn]);
|
||||
|
||||
const handleSideBar = () => {
|
||||
@@ -70,24 +71,6 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
|
||||
};
|
||||
}, [showSideBar, setShowSideBar, isLoggedIn]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) return;
|
||||
|
||||
const fetchFollowedCategories = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/categories/following");
|
||||
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 (
|
||||
<>
|
||||
<ToggleButton
|
||||
@@ -160,7 +143,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
|
||||
Streamers
|
||||
</h2>
|
||||
<div className="flex flex-col flex-grow justify-evenly w-full">
|
||||
{followedStreamers.map((streamer: any) => (
|
||||
{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"
|
||||
@@ -192,7 +175,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
|
||||
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}`
|
||||
(window.location.href = `/category/${category.category_name}`)
|
||||
}
|
||||
>
|
||||
<img
|
||||
|
||||
@@ -7,74 +7,63 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
|
||||
import LoadingScreen from "../components/Layout/LoadingScreen";
|
||||
import Footer from "../components/Layout/Footer";
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
const { streams, isLoading: isLoadingStreams } = useStreams();
|
||||
const { categories, isLoading: isLoadingCategories } = useCategories();
|
||||
const { vods, isLoading: isLoadingVods } = useVods();
|
||||
const navigate = useNavigate();
|
||||
|
||||
interface HomePageProps {
|
||||
variant?: "default" | "personalised";
|
||||
}
|
||||
const handleVodClick = (vodUrl: string) => {
|
||||
window.open(vodUrl, "_blank");
|
||||
};
|
||||
|
||||
if (isLoadingStreams || isLoadingCategories || isLoadingVods) return <LoadingScreen>Loading Content...</LoadingScreen>;
|
||||
|
||||
const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
|
||||
const { streams, isLoading: isLoadingStreams } = useStreams();
|
||||
const { categories, isLoading: isLoadingCategories } = useCategories();
|
||||
const { vods, isLoading: isLoadingVods } = useVods(); // Fetch VODs
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<DynamicPageContent navbarVariant="home" className="relative min-h-screen animate-moving_bg" contentClassName="pb-[12vh]">
|
||||
{/* Streams Section */}
|
||||
<ListRow
|
||||
type="stream"
|
||||
title="Streams - Live Now"
|
||||
description="Popular streamers that are currently live!"
|
||||
items={streams}
|
||||
wrap={false}
|
||||
onItemClick={(streamerName) => navigate(`/${streamerName}`)}
|
||||
extraClasses="bg-[var(--liveNow)]"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
/>
|
||||
|
||||
const handleVodClick = (vodUrl: string) => {
|
||||
window.open(vodUrl, "_blank"); // Open VOD in new tab
|
||||
};
|
||||
{/* Categories Section */}
|
||||
<ListRow
|
||||
type="category"
|
||||
title="Trending Categories"
|
||||
description="Recently popular categories lately!"
|
||||
items={categories}
|
||||
wrap={false}
|
||||
onItemClick={(categoryName) => navigate(`/category/${categoryName}`)}
|
||||
titleClickable={true}
|
||||
extraClasses="bg-[var(--recommend)]"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
>
|
||||
<Button extraClasses="absolute right-10" onClick={() => navigate("/categories")}>
|
||||
Show All
|
||||
</Button>
|
||||
</ListRow>
|
||||
|
||||
if (isLoadingStreams || isLoadingCategories || isLoadingVods)
|
||||
return <LoadingScreen>Loading Content...</LoadingScreen>;
|
||||
|
||||
return (
|
||||
<DynamicPageContent
|
||||
navbarVariant="home"
|
||||
className="relative min-h-screen animate-moving_bg"
|
||||
contentClassName="pb-[12vh]"
|
||||
>
|
||||
{/* Streams Section */}
|
||||
<ListRow
|
||||
type="stream"
|
||||
title="Streams - Live Now"
|
||||
description="Popular streamers that are currently live!"
|
||||
items={streams}
|
||||
wrap={false}
|
||||
onItemClick={(streamerName) => navigate(`/${streamerName}`)}
|
||||
extraClasses="bg-[var(--liveNow)]"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
/>
|
||||
|
||||
{/* Categories Section */}
|
||||
<ListRow
|
||||
type="category"
|
||||
title="Trending Categories"
|
||||
description="Recently popular categories lately!"
|
||||
items={categories}
|
||||
wrap={false}
|
||||
onItemClick={(categoryName) => navigate(`/category/${categoryName}`)}
|
||||
titleClickable={true}
|
||||
extraClasses="bg-[var(--recommend)]"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
>
|
||||
<Button extraClasses="absolute right-10" onClick={() => navigate("/categories")}>
|
||||
Show All
|
||||
</Button>
|
||||
</ListRow>
|
||||
|
||||
{/* VODs Section */}
|
||||
<ListRow
|
||||
type="vod"
|
||||
title="Recent VODs"
|
||||
description="Watch the latest recorded streams!"
|
||||
items={vods}
|
||||
wrap={false}
|
||||
onItemClick={handleVodClick}
|
||||
extraClasses="bg-black/50"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
/>
|
||||
<Footer />
|
||||
</DynamicPageContent>
|
||||
);
|
||||
{/* VODs Section */}
|
||||
<ListRow
|
||||
type="vod"
|
||||
title="Recent VODs"
|
||||
description="Watch the latest recorded streams!"
|
||||
items={vods}
|
||||
wrap={false}
|
||||
onItemClick={handleVodClick}
|
||||
extraClasses="bg-black/50"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
/>
|
||||
<Footer />
|
||||
</DynamicPageContent>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
|
||||
Reference in New Issue
Block a user