66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { Outlet, useNavigate } from "react-router-dom";
|
|
import { client } from "../client";
|
|
import { useStore } from "../store";
|
|
import { Button } from "../styled/Button";
|
|
import { timeout } from "../utils";
|
|
|
|
export function Root() {
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const user = useStore(state => state.user);
|
|
const setUser = useStore(state => state.setUser);
|
|
|
|
const init = async () => {
|
|
if (user !== null) return;
|
|
|
|
const { data, error } = await client.me.get();
|
|
await timeout(1000);
|
|
|
|
if (error !== null) {
|
|
navigate("/login");
|
|
return;
|
|
}
|
|
|
|
setUser(data);
|
|
};
|
|
|
|
useEffect(() => { init(); }, []);
|
|
|
|
const onLogoutClick = async () => {
|
|
const { error } = await client.logout.post();
|
|
|
|
if (error !== null) {
|
|
console.error("Response was not ok");
|
|
}
|
|
|
|
setUser(null);
|
|
navigate("/login");
|
|
};
|
|
|
|
if (user === null) {
|
|
return (
|
|
<div className="w-full h-full overflow-hidden flex items-center justify-center">
|
|
<div>Ładowanie…</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-full h-full overflow-hidden flex flex-col items-stretch">
|
|
<div className="flex p-4 justify-between items-baseline">
|
|
<div>
|
|
Użytkownik: {user.username} (<span className="font-mono text-sm">{user.userId}</span>)
|
|
</div>
|
|
<div>
|
|
<Button type="button" onClick={onLogoutClick}>
|
|
Wyloguj się
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<Outlet context={user} />
|
|
</div>
|
|
);
|
|
}
|