12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import styled from "styled-components";
- import { useQuery } from "react-query";
- import Modal from "../../ui/Modal";
- import { getGames } from "../../utils/api";
- import useSession from "../../hooks/useSession";
- import GameListItem from "../GameListItem";
- const StyledGameList = styled.ul`
- list-style: none;
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: column;
- `;
- const ChangeGameModalContent = ({ onLoad }) => {
- const { t } = useTranslation();
- const { changeGame } = useSession();
- const { isLoading, data: gameList } = useQuery("games", async () =>
- (await getGames())
- .filter((game) => game.board.published)
- .sort((a, b) => {
- const [nameA, nameB] = [
- a.board.defaultName || a.board.name,
- b.board.defaultName || b.board.name,
- ];
- if (nameA < nameB || a.id === "demo") {
- return -1;
- }
- if (nameA > nameB || b.id === "demo") {
- return 1;
- }
- return 0;
- })
- );
- const onGameClick = React.useCallback(
- (id) => {
- changeGame(id);
- onLoad();
- },
- [changeGame, onLoad]
- );
- return (
- <>
- <header>
- <h3>{t("Choose a new game")}</h3>
- </header>
- <section>
- <StyledGameList>
- {!isLoading &&
- gameList.map((game) => (
- <GameListItem key={game.id} game={game} onClick={onGameClick} />
- ))}
- </StyledGameList>
- </section>
- </>
- );
- };
- const ChangeGameModal = ({ show, setShow }) => {
- const { t } = useTranslation();
- const closeModal = React.useCallback(() => setShow(false), [setShow]);
- return (
- <Modal
- title={t("Change game")}
- setShow={setShow}
- show={show}
- position="left"
- >
- <ChangeGameModalContent onLoad={closeModal} />
- </Modal>
- );
- };
- export default ChangeGameModal;
|