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