improved user context

[alttp.git] / resources / js / components / tournament / Scoreboard.js

diff --git a/resources/js/components/tournament/Scoreboard.js b/resources/js/components/tournament/Scoreboard.js
index f13adacb61bbaa7a4465f88fb8b549ea535cca40..27bb0873a4d7c75d4de6a3b15f25f1d514a07713 100644 (file)
--- a/resources/js/components/tournament/Scoreboard.js
+++ b/resources/js/components/tournament/Scoreboard.js
@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Table } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Icon from '../common/Icon';
 import Box from '../users/Box';
 import { comparePlacement } from '../../helpers/Participant';
 import { getRunners } from '../../helpers/Tournament';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
 
 const getRowClassName = (tournament, participant, user) => {
        const classNames = ['score'];
@@ -58,48 +57,50 @@ const getStreamIcon = participant => {
        return <Icon.VIDEO title="" />;
 };
 
-const Scoreboard = ({ tournament, user }) =>
-<Table striped className="scoreboard align-middle">
-       <thead>
-               <tr>
-                       <th className="text-center">{i18n.t('participants.placementShort')}</th>
-                       <th>{i18n.t('participants.participant')}</th>
-                       <th className="text-end">{i18n.t('participants.scoreShort')}</th>
-               </tr>
-       </thead>
-       <tbody>
-       {getRunners(tournament).sort(comparePlacement).map(participant =>
-               <tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
-                       <td className="text-center">
-                               {getPlacementDisplay(participant)}
-                       </td>
-                       <td>
-                               <div className="d-flex align-items-center justify-content-between">
-                                       <Box user={participant.user} />
-                                       {participant.user.stream_link ?
-                                               <Button
-                                                       href={participant.user.stream_link}
-                                                       size="sm"
-                                                       target="_blank"
-                                                       title={i18n.t('users.stream')}
-                                                       variant={getStreamVariant(participant)}
-                                               >
-                                                       {getStreamIcon(participant)}
-                                               </Button>
-                                       : null}
-                               </div>
-                       </td>
-                       <td className="text-end">{participant.score}</td>
-               </tr>
-       )}
-       </tbody>
-</Table>;
+const Scoreboard = ({ tournament }) => {
+       const { t } = useTranslation();
+       const { user } = useUser();
+
+       return <Table striped className="scoreboard align-middle">
+               <thead>
+                       <tr>
+                               <th className="text-center">{t('participants.placementShort')}</th>
+                               <th>{t('participants.participant')}</th>
+                               <th className="text-end">{t('participants.scoreShort')}</th>
+                       </tr>
+               </thead>
+               <tbody>
+               {getRunners(tournament).sort(comparePlacement).map(participant =>
+                       <tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
+                               <td className="text-center">
+                                       {getPlacementDisplay(participant)}
+                               </td>
+                               <td>
+                                       <div className="d-flex align-items-center justify-content-between">
+                                               <Box user={participant.user} />
+                                               {participant.user.stream_link ?
+                                                       <Button
+                                                               href={participant.user.stream_link}
+                                                               size="sm"
+                                                               target="_blank"
+                                                               title={t('users.stream')}
+                                                               variant={getStreamVariant(participant)}
+                                                       >
+                                                               {getStreamIcon(participant)}
+                                                       </Button>
+                                               : null}
+                                       </div>
+                               </td>
+                               <td className="text-end">{participant.score}</td>
+                       </tr>
+               )}
+               </tbody>
+       </Table>;
+};
 
 Scoreboard.propTypes = {
        tournament: PropTypes.shape({
        }),
-       user: PropTypes.shape({
-       }),
 };
 
-export default withTranslation()(withUser(Scoreboard));
+export default Scoreboard;