58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Alert, Grid, Paper, Typography } from "@mui/material";
|
|
import { useMemo } from "react";
|
|
import { Async } from "react-async";
|
|
import {
|
|
getAllSessions,
|
|
getAvailableTokenCount,
|
|
type Session,
|
|
type Tokens,
|
|
} from "../../api/client";
|
|
import { SessionPicker } from "./SessionPicker";
|
|
import { TokensSummary } from "./TokensSummary";
|
|
|
|
export const SignUpPage = () => {
|
|
const sessionsPromise = useMemo(getAllSessions, []);
|
|
const tokensPromise = getAvailableTokenCount();
|
|
|
|
return (
|
|
<Grid container direction="column" spacing={2} alignItems="center">
|
|
<Typography variant="h3">Pick a date</Typography>
|
|
<Paper
|
|
variant="outlined"
|
|
sx={{
|
|
p: 3,
|
|
bgcolor: "aliceblue",
|
|
borderRadius: 4,
|
|
}}
|
|
>
|
|
<Async promise={sessionsPromise}>
|
|
<Async.Loading>Loading</Async.Loading>
|
|
<Async.Fulfilled<Session[]>>
|
|
{(sessions) =>
|
|
sessions.length === 0 ? (
|
|
<Alert severity="warning">No sessions are available</Alert>
|
|
) : (
|
|
<SessionPicker
|
|
sessions={sessions}
|
|
tokensPromise={tokensPromise}
|
|
/>
|
|
)
|
|
}
|
|
</Async.Fulfilled>
|
|
<Async.Rejected>
|
|
<Alert severity="error">Something went wrong</Alert>
|
|
</Async.Rejected>
|
|
</Async>
|
|
</Paper>
|
|
<Async promise={tokensPromise}>
|
|
<Async.Fulfilled<Tokens>>
|
|
{(tokens) => <TokensSummary tokens={tokens} />}
|
|
</Async.Fulfilled>
|
|
<Async.Rejected>
|
|
<Alert severity="error">Something went wrong</Alert>
|
|
</Async.Rejected>
|
|
</Async>
|
|
</Grid>
|
|
);
|
|
};
|