improved user context

[alttp.git] / resources / js / components / rounds / SeedButton.js

diff --git a/resources/js/components/rounds/SeedButton.js b/resources/js/components/rounds/SeedButton.js
index d9d343304eca067fc7996fa72c940f187a85badc..59bc3baaa15b2d18a6fcb16b5c5e84bf2492fec3 100644 (file)
--- a/resources/js/components/rounds/SeedButton.js
+++ b/resources/js/components/rounds/SeedButton.js
@@ -1,22 +1,34 @@
 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, round)) {
                return <>
@@ -26,21 +38,20 @@ const SeedButton = ({ round, tournament, user }) => {
                                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;