104 lines
2.1 KiB
TypeScript
104 lines
2.1 KiB
TypeScript
import { Button } from "@mui/material";
|
|
import {
|
|
joinSession,
|
|
leaveSession,
|
|
type Session,
|
|
type Tokens,
|
|
} from "../../api/client";
|
|
import { Async } from "react-async";
|
|
import { useNavigate } from "react-router";
|
|
|
|
export const SessionAction = (props: {
|
|
session: Session;
|
|
tokensPromise: Promise<Tokens>;
|
|
}) => {
|
|
const { session, tokensPromise } = props;
|
|
const navigate = useNavigate();
|
|
|
|
if (session.status !== "OPEN") {
|
|
return (
|
|
<Button
|
|
variant="contained"
|
|
disabled
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
SESSION {session.status}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (session.includesRequester) {
|
|
return (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
onClick={async () => {
|
|
await leaveSession(session.id);
|
|
window.location.reload();
|
|
}}
|
|
>
|
|
Sign out
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (session.userCount >= session.size) {
|
|
return (
|
|
<Button
|
|
variant="contained"
|
|
disabled
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
SESSION FULL
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
const renderLoadingButton = () => (
|
|
<Button variant="contained" color="primary" disabled sx={{ width: "100%" }}>
|
|
LOADING
|
|
</Button>
|
|
);
|
|
|
|
const renderBuyTokensButton = () => (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
onClick={() => navigate("/buy")}
|
|
>
|
|
BUY TOKENS
|
|
</Button>
|
|
);
|
|
|
|
const renderSignInButton = () => (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
onClick={async () => {
|
|
await joinSession(session.id);
|
|
window.location.reload();
|
|
}}
|
|
>
|
|
SIGN UP
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<Async promise={tokensPromise}>
|
|
<Async.Loading>{renderLoadingButton()}</Async.Loading>
|
|
<Async.Fulfilled<Tokens>>
|
|
{(tokens) =>
|
|
tokens.available === 0
|
|
? renderBuyTokensButton()
|
|
: renderSignInButton()
|
|
}
|
|
</Async.Fulfilled>
|
|
</Async>
|
|
);
|
|
};
|