import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
import SeedDialog from './SeedDialog';
import { maySetSeed } from '../../helpers/permissions';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
-const SeedButton = ({ round, tournament, user }) => {
+const SeedButton = ({ round, tournament }) => {
const [showDialog, setShowDialog] = useState(false);
+ const { t } = useTranslation();
+ const { user } = useUser();
+
if (round.seed) {
- return (
+ return <>
<Button href={round.seed} target="_blank" variant="primary">
- {i18n.t('rounds.seed')}
+ {t('rounds.seed')}
</Button>
- );
+ {round.spoiler ?
+ <Button
+ className="ms-2"
+ href={round.spoiler}
+ target="_blank"
+ variant="outline-primary"
+ >
+ {t('rounds.spoiler')}
+ </Button>
+ : null}
+ </>;
}
- if (maySetSeed(user, tournament)) {
+ if (maySetSeed(user, tournament, round)) {
return <>
<SeedDialog
onHide={() => setShowDialog(false)}
show={showDialog}
/>
<Button onClick={() => setShowDialog(true)} variant="outline-primary">
- {i18n.t('rounds.setSeed')}
+ {t('rounds.setSeed')}
</Button>
</>;
}
- return i18n.t('rounds.noSeed');
+ return t('rounds.noSeed');
};
SeedButton.propTypes = {
round: PropTypes.shape({
seed: PropTypes.string,
+ spoiler: PropTypes.string,
}),
tournament: PropTypes.shape({
}),
- user: PropTypes.shape({
- }),
};
-export default withTranslation()(withUser(SeedButton));
+export default SeedButton;