forked from pinks/eris
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
|
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>;
|
||
|
|
}
|