resources/js/components/results/Item.js

   1 import PropTypes from 'prop-types';
   2 import React, { useState } from 'react';
   3 import { Button } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import DetailDialog from './DetailDialog';
   7 import Icon from '../common/Icon';
   8 import Box from '../users/Box';
   9 import { getIcon, getTime } from '../../helpers/Result';
  10 import { maySeeResults } from '../../helpers/permissions';
  11 import { findResult } from '../../helpers/User';
  12 import { useUser } from '../../hooks/user';
  13
  14 const getClassName = result => {
  15         const classNames = ['status'];
  16         if (result && result.has_finished) {
  17                 classNames.push('finished');
  18                 if (result.comment) {
  19                         classNames.push('has-comment');
  20                 }
  21         } else {
  22                 classNames.push('pending');
  23         }
  24         return classNames.join(' ');
  25 };
  26
  27 const twitchReg = /^https?:\/\/(www\.)?twitch\.tv/;
  28 const youtubeReg = /^https?:\/\/(www\.)?youtu(\.be|be\.)/;
  29
  30 const getVoDVariant = result => {
  31         if (!result || !result.vod) return 'outline-secondary';
  32         if (twitchReg.test(result.vod)) {
  33                 return 'twitch';
  34         }
  35         if (youtubeReg.test(result.vod)) {
  36                 return 'outline-youtube';
  37         }
  38         return 'outline-secondary';
  39 };
  40
  41 const getVoDIcon = result => {
  42         const variant = getVoDVariant(result);
  43         if (variant === 'twitch') {
  44                 return <Icon.TWITCH title="" />;
  45         }
  46         if (variant === 'outline-youtube') {
  47                 return <Icon.YOUTUBE title="" />;
  48         }
  49         return <Icon.VIDEO title="" />;
  50 };
  51
  52 const Item = ({
  53         round,
  54         tournament,
  55         user,
  56 }) => {
  57         const [showDialog, setShowDialog] = useState(false);
  58
  59         const { t } = useTranslation();
  60         const { user: authUser } = useUser();
  61
  62         const result = React.useMemo(
  63                 () => findResult(user, round),
  64                 [round, user],
  65         );
  66         const maySee = React.useMemo(
  67                 () => maySeeResults(authUser, tournament, round),
  68                 [authUser, round, tournament],
  69         );
  70
  71         return <div className="result">
  72                 <Box user={user} />
  73                 <div className="d-flex align-items-center justify-content-between">
  74                         <Button
  75                                 className={getClassName(result)}
  76                                 onClick={() => setShowDialog(true)}
  77                                 title={maySee && result && result.comment ? result.comment : null}
  78                         >
  79                                 <span className="time">
  80                                         {getTime(result, maySee)}
  81                                 </span>
  82                                 {getIcon(result, maySee)}
  83                         </Button>
  84                         {maySee && result && result.vod ?
  85                                 <Button
  86                                         className="vod-link"
  87                                         href={result.vod}
  88                                         size="sm"
  89                                         target="_blank"
  90                                         title={t('results.vod')}
  91                                         variant={getVoDVariant(result)}
  92                                 >
  93                                         {getVoDIcon(result)}
  94                                 </Button>
  95                         : null}
  96                 </div>
  97                 <DetailDialog
  98                         onHide={() => setShowDialog(false)}
  99                         round={round}
 100                         show={showDialog}
 101                         tournament={tournament}
 102                         user={user}
 103                 />
 104         </div>;
 105 };
 106
 107 Item.propTypes = {
 108         round: PropTypes.shape({
 109         }),
 110         tournament: PropTypes.shape({
 111         }),
 112         user: PropTypes.shape({
 113         }),
 114 };
 115
 116 export default Item;