67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import "./App.css";
|
|
import { Login } from "./pages/Login.tsx";
|
|
import icon from "./paella-icon.png";
|
|
import { Outlet, Route, Routes } from "react-router";
|
|
import { SignUp } from "./pages/SignUp.tsx";
|
|
import { Register } from "./pages/Register.tsx";
|
|
import { Buy } from "./pages/Buy.tsx";
|
|
import { useState } from "react";
|
|
import { PreLoginPageContext } from "./context/pre-login-page-context.ts";
|
|
import { LoggedInPageContext } from "./context/logged-in-page-context.ts";
|
|
import { NotFound } from "./pages/NotFound.tsx";
|
|
import { BuyReturn } from "./pages/BuyReturn.tsx";
|
|
import { Grid, Paper } from "@mui/material";
|
|
|
|
function App() {
|
|
const [userId, setUserId] = useState<string | null>(
|
|
window.localStorage.getItem("paysplit-user-id")
|
|
);
|
|
const storeUserId = (id: string) => {
|
|
window.localStorage.setItem("paysplit-user-id", id.toString());
|
|
setUserId(id);
|
|
};
|
|
|
|
return (
|
|
<Paper
|
|
elevation={2}
|
|
sx={{
|
|
padding: "50px 20px",
|
|
bgcolor: "lightblue",
|
|
borderRadius: 4,
|
|
maxWidth: "400px",
|
|
margin: "auto",
|
|
}}
|
|
>
|
|
<Grid container direction="column" alignContent="center" spacing={2}>
|
|
<img className="app-logo" src={icon} alt="App logo" />
|
|
<Routes>
|
|
<Route
|
|
element={
|
|
<PreLoginPageContext.Provider value={{ setUserId: storeUserId }}>
|
|
<Outlet />
|
|
</PreLoginPageContext.Provider>
|
|
}
|
|
>
|
|
<Route path="/login" element={<Login />} />
|
|
<Route path="/register" element={<Register />} />
|
|
</Route>
|
|
<Route
|
|
element={
|
|
<LoggedInPageContext.Provider value={{ userId: userId! }}>
|
|
<Outlet />
|
|
</LoggedInPageContext.Provider>
|
|
}
|
|
>
|
|
<Route path="/signup" element={<SignUp />} />
|
|
<Route path="/buy" element={<Buy />} />
|
|
<Route path="/buy/return" element={<BuyReturn />} />
|
|
</Route>
|
|
<Route path="*" element={<NotFound />} />
|
|
</Routes>
|
|
</Grid>
|
|
</Paper>
|
|
);
|
|
}
|
|
|
|
export default App;
|