65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import Navbar from "../components/Layout/Navbar";
|
|
import ListRow from "../components/Layout/ListRow";
|
|
// import { data, Link } from "react-router-dom";
|
|
|
|
const API_URL = import.meta.env.VITE_API_URL;
|
|
|
|
const handleStreamClick = (streamId: string) => {
|
|
// Handle navigation to stream page
|
|
console.log(`Navigating to stream ${streamId}`);
|
|
};
|
|
|
|
interface StreamItem {
|
|
id: number;
|
|
title: string;
|
|
streamer: string;
|
|
viewers: number;
|
|
thumbnail?: string;
|
|
}
|
|
|
|
const HomePage: React.FC = () => {
|
|
const [featuredStreams, setFeaturedStreams] = useState<StreamItem[]>([]);
|
|
const [loggedInStatus, setLoggedInStatus] = useState<boolean>(false);
|
|
|
|
// ↓↓ runs twice when in development mode
|
|
useEffect(() => {
|
|
fetch(`${API_URL}/get_loggedin_status`)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setLoggedInStatus(data);
|
|
console.log(data);
|
|
});
|
|
fetch(`${API_URL}/get_streams`)
|
|
.then((response) => response.json())
|
|
.then((data: StreamItem[]) => {
|
|
setFeaturedStreams(data);
|
|
console.log(data);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="home-page bg-repeat"
|
|
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
|
|
>
|
|
<Navbar logged_in={loggedInStatus} />
|
|
|
|
<ListRow
|
|
title="Live Now"
|
|
description="Streamers that are currently live"
|
|
streams={featuredStreams}
|
|
onStreamClick={handleStreamClick}
|
|
/>
|
|
<ListRow
|
|
title="Trending Categories"
|
|
description="Categories that have been 'popping off' lately"
|
|
streams={featuredStreams}
|
|
onStreamClick={handleStreamClick}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|