92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
||
import { IUser } from "../types/IUser";
|
||
import api from "../utils/api";
|
||
import { IServer } from "../types/IServer";
|
||
import DesktopCard from "../components/DesktopCard";
|
||
import Badge from "../components/Badge";
|
||
import { ISession } from "../types/ISession";
|
||
import SessionCard from "../components/SessionCard";
|
||
import NewButton from "../components/NewButton";
|
||
import ChevronRightIcon from "../components/icons/ChevronRightIcon";
|
||
|
||
function DashboardPage() {
|
||
const { data: me } = useQuery({
|
||
queryKey: ["me"],
|
||
queryFn: () => api.get("auth/me").json<IUser>(),
|
||
});
|
||
|
||
const { data: servers } = useQuery({
|
||
queryKey: ["servers"],
|
||
queryFn: () => api.get("servers?withLastSession=true").json<IServer[]>(),
|
||
enabled: !!me,
|
||
refetchInterval: 1000,
|
||
});
|
||
|
||
const { data: sessions } = useQuery({
|
||
queryKey: ["last-sessions"],
|
||
queryFn: () =>
|
||
api.get("sessions", { searchParams: { limit: 5 } }).json<ISession[]>(),
|
||
enabled: !!me,
|
||
});
|
||
|
||
// async function logout() {
|
||
// return await api.get("auth/logout").json();
|
||
// }
|
||
|
||
// async function handleClickLogout() {
|
||
// try {
|
||
// await logout();
|
||
// setToken(null);
|
||
// } catch (error) {
|
||
// toast.error((await (error as HTTPError).response.json<IError>()).error);
|
||
// }
|
||
// }
|
||
|
||
return (
|
||
<div className="flex flex-col gap-[5vw] min-h-dvh">
|
||
<div className="w-full flex justify-between">
|
||
<div className="w-[42.5vw] flex flex-col gap-[1.667vw]">
|
||
<div className="flex items-center gap-[0.833vw]">
|
||
<h1 className="title-l font-[500] ">Интерактивные столы</h1>
|
||
<Badge count={servers?.length || 0} />
|
||
</div>
|
||
<div className="flex gap-[0.833vw] flex-wrap">
|
||
{servers?.map((server) => (
|
||
<DesktopCard key={server.id} server={server} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="w-full">
|
||
<div className="flex flex-col gap-[1.667vw]">
|
||
<h1 className="title-l font-[500] ">Последние сеансы</h1>
|
||
<div className="w-full flex flex-col gap-[0.833vw]">
|
||
<div className="flex flex-col gap-[0.278vw]">
|
||
{sessions
|
||
?.filter(
|
||
(session) =>
|
||
session.status === "ended" || session.status === "ending"
|
||
)
|
||
.map((session) => (
|
||
<SessionCard key={session.id} session={session} />
|
||
))}
|
||
</div>
|
||
<NewButton
|
||
variant="primary"
|
||
size="large"
|
||
className="flex gap-[0.556vw] items-center justify-center"
|
||
>
|
||
<p>Смотреть всё</p>
|
||
<span className="w-[1.111vw] h-[1.111vw] flex items-center justify-center">
|
||
<ChevronRightIcon />
|
||
</span>
|
||
</NewButton>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default DashboardPage;
|