improved user context

[alttp.git] / resources / js / components / results / Item.js

diff --git a/resources/js/components/results/Item.js b/resources/js/components/results/Item.js
index b8a0ec61ec7f7ca23e42bbdae4b4c14eb5204d96..2e29d752afd2bd6938e82a5123c3b607bdea7308 100644 (file)
--- a/resources/js/components/results/Item.js
+++ b/resources/js/components/results/Item.js
@@ -1,7 +1,7 @@
 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 DetailDialog from './DetailDialog';
 import Icon from '../common/Icon';
@@ -9,8 +9,7 @@ import Box from '../users/Box';
 import { getIcon, getTime } from '../../helpers/Result';
 import { maySeeResults } from '../../helpers/permissions';
 import { findResult } from '../../helpers/User';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
 
 const getClassName = result => {
        const classNames = ['status'];
@@ -51,14 +50,24 @@ const getVoDIcon = result => {
 };
 
 const Item = ({
-       authUser,
        round,
        tournament,
        user,
 }) => {
        const [showDialog, setShowDialog] = useState(false);
-       const result = findResult(user, round);
-       const maySee = maySeeResults(authUser, tournament, round);
+
+       const { t } = useTranslation();
+       const { user: authUser } = useUser();
+
+       const result = React.useMemo(
+               () => findResult(user, round),
+               [round, user],
+       );
+       const maySee = React.useMemo(
+               () => maySeeResults(authUser, tournament, round),
+               [authUser, round, tournament],
+       );
+
        return <div className="result">
                <Box user={user} />
                <div className="d-flex align-items-center justify-content-between">
@@ -78,7 +87,7 @@ const Item = ({
                                        href={result.vod}
                                        size="sm"
                                        target="_blank"
-                                       title={i18n.t('results.vod')}
+                                       title={t('results.vod')}
                                        variant={getVoDVariant(result)}
                                >
                                        {getVoDIcon(result)}
@@ -96,8 +105,6 @@ const Item = ({
 };
 
 Item.propTypes = {
-       authUser: PropTypes.shape({
-       }),
        round: PropTypes.shape({
        }),
        tournament: PropTypes.shape({
@@ -106,4 +113,4 @@ Item.propTypes = {
        }),
 };
 
-export default withTranslation()(withUser(Item, 'authUser'));
+export default Item;