forked from pinks/eris
1
0
Fork 0
nyx/ui/App.tsx

44 lines
1.3 KiB
TypeScript
Raw Permalink Normal View History

2023-10-05 09:00:51 +00:00
import React, { useEffect } from "react";
import { Route, Routes } from "react-router-dom";
import useLocalStorage from "use-local-storage";
import { AppHeader } from "./AppHeader.tsx";
import { QueuePage } from "./QueuePage.tsx";
import { SettingsPage } from "./SettingsPage.tsx";
import { apiClient, handleResponse } from "./apiClient.tsx";
export function App() {
// store session ID in the local storage
const [sessionId, setSessionId] = useLocalStorage("sessionId", "");
// initialize a new session when there is no session ID
useEffect(() => {
if (!sessionId) {
apiClient.fetch("sessions", "POST", {}).then(handleResponse).then((session) => {
console.log("Initialized session", session.id);
setSessionId(session.id);
});
}
}, [sessionId]);
return (
<>
<AppHeader
className="self-stretch"
sessionId={sessionId}
onLogOut={() => setSessionId("")}
/>
<div className="self-center w-full max-w-screen-md flex flex-col items-stretch gap-4 p-4">
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/queue" element={<QueuePage />} />
<Route path="/settings" element={<SettingsPage sessionId={sessionId} />} />
</Routes>
</div>
</>
);
}
function HomePage() {
return <h1>hi</h1>;
}