53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
// layout/MainLayout.jsx
|
|
import Sidebar from '../components/Sidebar'
|
|
import Topbar from '../components/Topbar'
|
|
import { Outlet } from 'react-router-dom';
|
|
import {useEffect, useState} from "react";
|
|
import type {User} from "../utils/types";
|
|
import { getUser, getStreamStatus } from "../utils/endpoints";
|
|
|
|
const MainLayout = () => {
|
|
const [sidebarToggled, setSidebarToggled] = useState(false);
|
|
const [user, setUser] = useState<null | User>(null);
|
|
const [isStreaming, setIsStreaming] = useState(false);
|
|
|
|
const fetchUser = async () => {
|
|
try {
|
|
const userData = await getUser();
|
|
setUser(userData);
|
|
} catch (error) {
|
|
console.error('Failed to fetch user:', error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchUser();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
const poll = () => getStreamStatus().then(setIsStreaming).catch(() => {});
|
|
poll();
|
|
const interval = setInterval(poll, 10000);
|
|
return () => clearInterval(interval);
|
|
}, [user]);
|
|
|
|
return (
|
|
<div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
|
|
<Sidebar
|
|
user={user}
|
|
className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
|
|
<Topbar
|
|
className={"transition-all duration-300"}
|
|
sidebarToggled={sidebarToggled}
|
|
setSidebarToggled={setSidebarToggled}
|
|
user={user}
|
|
fetchUser={fetchUser}
|
|
isStreaming={isStreaming}/>
|
|
<div className="overflow-auto bg-background">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default MainLayout; |