Hex Artifact Content
Not logged in

Artifact b8c5fec3e96a3e16aa7f46f97d0d71bb00f1bd68:


0000: 69 6d 70 6f 72 74 20 52 65 61 63 74 2c 20 7b 20  import React, { 
0010: 43 6f 6d 70 6f 6e 65 6e 74 20 7d 20 66 72 6f 6d  Component } from
0020: 20 27 72 65 61 63 74 27 0a 69 6d 70 6f 72 74 20   'react'.import 
0030: 50 72 6f 70 54 79 70 65 73 20 66 72 6f 6d 20 27  PropTypes from '
0040: 70 72 6f 70 2d 74 79 70 65 73 27 0a 69 6d 70 6f  prop-types'.impo
0050: 72 74 20 7b 20 63 6f 6e 6e 65 63 74 20 7d 20 66  rt { connect } f
0060: 72 6f 6d 20 27 72 65 61 63 74 2d 72 65 64 75 78  rom 'react-redux
0070: 27 0a 69 6d 70 6f 72 74 20 48 65 6c 6d 65 74 20  '.import Helmet 
0080: 66 72 6f 6d 20 27 72 65 61 63 74 2d 68 65 6c 6d  from 'react-helm
0090: 65 74 27 0a 69 6d 70 6f 72 74 20 52 65 61 63 74  et'.import React
00a0: 54 6f 6f 6c 74 69 70 20 66 72 6f 6d 20 27 72 65  Tooltip from 're
00b0: 61 63 74 2d 74 6f 6f 6c 74 69 70 27 0a 69 6d 70  act-tooltip'.imp
00c0: 6f 72 74 20 7b 20 48 6f 74 4b 65 79 73 20 7d 20  ort { HotKeys } 
00d0: 66 72 6f 6d 20 27 72 65 61 63 74 2d 68 6f 74 6b  from 'react-hotk
00e0: 65 79 73 27 0a 0a 69 6d 70 6f 72 74 20 42 75 74  eys'..import But
00f0: 74 6f 6e 44 61 6e 67 65 72 20 66 72 6f 6d 20 27  tonDanger from '
0100: 63 6f 6d 70 6f 6e 65 6e 74 73 2f 42 75 74 74 6f  components/Butto
0110: 6e 44 61 6e 67 65 72 2f 42 75 74 74 6f 6e 44 61  nDanger/ButtonDa
0120: 6e 67 65 72 27 0a 69 6d 70 6f 72 74 20 41 6e 69  nger'.import Ani
0130: 6d 61 74 65 45 6e 74 65 72 4c 65 61 76 65 20 66  mateEnterLeave f
0140: 72 6f 6d 20 27 63 6f 6d 70 6f 6e 65 6e 74 73 2f  rom 'components/
0150: 41 6e 69 6d 61 74 65 45 6e 74 65 72 4c 65 61 76  AnimateEnterLeav
0160: 65 2f 41 6e 69 6d 61 74 65 45 6e 74 65 72 4c 65  e/AnimateEnterLe
0170: 61 76 65 27 0a 0a 69 6d 70 6f 72 74 20 7b 20 6c  ave'..import { l
0180: 6f 61 64 43 6f 64 65 73 2c 20 72 65 6d 6f 76 65  oadCodes, remove
0190: 20 7d 20 66 72 6f 6d 20 27 72 65 64 75 78 2f 61   } from 'redux/a
01a0: 63 74 69 6f 6e 73 2f 69 6e 76 69 74 65 27 0a 69  ctions/invite'.i
01b0: 6d 70 6f 72 74 20 4c 69 73 74 20 66 72 6f 6d 20  mport List from 
01c0: 27 63 6f 6d 70 6f 6e 65 6e 74 73 2f 4c 69 73 74  'components/List
01d0: 2f 4c 69 73 74 27 0a 69 6d 70 6f 72 74 20 49 6e  /List'.import In
01e0: 76 69 74 65 43 72 65 61 74 65 46 6f 72 6d 20 66  viteCreateForm f
01f0: 72 6f 6d 20 27 63 6f 6e 74 61 69 6e 65 72 73 2f  rom 'containers/
0200: 49 6e 76 69 74 65 43 72 65 61 74 65 46 6f 72 6d  InviteCreateForm
0210: 2f 49 6e 76 69 74 65 43 72 65 61 74 65 46 6f 72  /InviteCreateFor
0220: 6d 27 0a 0a 69 6d 70 6f 72 74 20 63 6c 61 73 73  m'..import class
0230: 4e 61 6d 65 73 20 66 72 6f 6d 20 27 63 6c 61 73  Names from 'clas
0240: 73 6e 61 6d 65 73 2f 62 69 6e 64 27 0a 69 6d 70  snames/bind'.imp
0250: 6f 72 74 20 73 74 79 6c 65 73 20 66 72 6f 6d 20  ort styles from 
0260: 27 2e 2f 49 6e 76 69 74 65 73 2e 73 63 73 73 27  './Invites.scss'
0270: 0a 63 6f 6e 73 74 20 63 78 20 3d 20 63 6c 61 73  .const cx = clas
0280: 73 4e 61 6d 65 73 2e 62 69 6e 64 28 73 74 79 6c  sNames.bind(styl
0290: 65 73 29 0a 0a 40 63 6f 6e 6e 65 63 74 28 0a 20  es)..@connect(. 
02a0: 20 73 74 61 74 65 20 3d 3e 20 28 7b 0a 20 20 20   state => ({.   
02b0: 20 69 6e 76 69 74 65 53 74 61 74 65 3a 20 73 74   inviteState: st
02c0: 61 74 65 2e 69 6e 76 69 74 65 2c 0a 20 20 20 20  ate.invite,.    
02d0: 63 6f 6e 66 69 67 3a 20 73 74 61 74 65 2e 61 75  config: state.au
02e0: 74 68 2e 63 6f 6e 66 69 67 2c 0a 20 20 20 20 6c  th.config,.    l
02f0: 6f 61 64 65 64 3a 20 73 74 61 74 65 2e 69 6e 76  oaded: state.inv
0300: 69 74 65 2e 6c 6f 61 64 65 64 0a 20 20 7d 29 2c  ite.loaded.  }),
0310: 0a 20 20 7b 20 6c 6f 61 64 43 6f 64 65 73 2c 20  .  { loadCodes, 
0320: 72 65 6d 6f 76 65 20 7d 29 0a 65 78 70 6f 72 74  remove }).export
0330: 20 64 65 66 61 75 6c 74 20 63 6c 61 73 73 20 49   default class I
0340: 6e 76 69 74 65 73 20 65 78 74 65 6e 64 73 20 43  nvites extends C
0350: 6f 6d 70 6f 6e 65 6e 74 20 7b 0a 20 20 73 74 61  omponent {.  sta
0360: 74 69 63 20 70 72 6f 70 54 79 70 65 73 20 3d 20  tic propTypes = 
0370: 7b 0a 20 20 20 20 69 6e 76 69 74 65 53 74 61 74  {.    inviteStat
0380: 65 3a 20 50 72 6f 70 54 79 70 65 73 2e 6f 62 6a  e: PropTypes.obj
0390: 65 63 74 2c 0a 20 20 20 20 6c 6f 61 64 43 6f 64  ect,.    loadCod
03a0: 65 73 3a 20 50 72 6f 70 54 79 70 65 73 2e 66 75  es: PropTypes.fu
03b0: 6e 63 2c 0a 20 20 20 20 63 6f 6e 66 69 67 3a 20  nc,.    config: 
03c0: 50 72 6f 70 54 79 70 65 73 2e 6f 62 6a 65 63 74  PropTypes.object
03d0: 2c 0a 20 20 20 20 6c 6f 61 64 65 64 3a 20 50 72  ,.    loaded: Pr
03e0: 6f 70 54 79 70 65 73 2e 62 6f 6f 6c 2c 0a 20 20  opTypes.bool,.  
03f0: 20 20 72 65 6d 6f 76 65 3a 20 50 72 6f 70 54 79    remove: PropTy
0400: 70 65 73 2e 66 75 6e 63 0a 20 20 7d 0a 0a 20 20  pes.func.  }..  
0410: 73 74 61 74 65 20 3d 20 7b 7d 0a 0a 20 20 63 6f  state = {}..  co
0420: 6d 70 6f 6e 65 6e 74 57 69 6c 6c 4d 6f 75 6e 74  mponentWillMount
0430: 20 28 29 20 7b 0a 20 20 20 20 69 66 20 28 21 74   () {.    if (!t
0440: 68 69 73 2e 70 72 6f 70 73 2e 6c 6f 61 64 65 64  his.props.loaded
0450: 29 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 70  ) {.      this.p
0460: 72 6f 70 73 2e 6c 6f 61 64 43 6f 64 65 73 28 29  rops.loadCodes()
0470: 0a 20 20 20 20 7d 0a 20 20 7d 0a 0a 20 20 63 6f  .    }.  }..  co
0480: 6d 70 6f 6e 65 6e 74 44 69 64 4d 6f 75 6e 74 20  mponentDidMount 
0490: 28 29 20 7b 0a 20 20 20 20 63 6f 6e 73 74 20 43  () {.    const C
04a0: 6c 69 70 62 6f 61 72 64 20 3d 20 72 65 71 75 69  lipboard = requi
04b0: 72 65 28 27 63 6c 69 70 62 6f 61 72 64 27 29 0a  re('clipboard').
04c0: 20 20 20 20 2f 2f 20 59 6f 75 20 73 68 6f 75 6c      // You shoul
04d0: 64 20 75 73 65 20 22 6e 65 77 22 20 66 6f 72 20  d use "new" for 
04e0: 73 69 64 65 20 65 66 66 65 63 74 73 2c 20 62 75  side effects, bu
04f0: 74 20 74 68 69 73 20 69 6e 73 74 61 6e 63 65 20  t this instance 
0500: 69 73 20 6f 75 74 20 6f 66 20 6f 75 72 0a 20 20  is out of our.  
0510: 20 20 2f 2f 20 63 6f 6e 74 72 6f 6c 0a 20 20 20    // control.   
0520: 20 2f 2f 20 65 73 6c 69 6e 74 2d 64 69 73 61 62   // eslint-disab
0530: 6c 65 2d 6e 65 78 74 2d 6c 69 6e 65 20 6e 6f 2d  le-next-line no-
0540: 6e 65 77 0a 20 20 20 20 6e 65 77 20 43 6c 69 70  new.    new Clip
0550: 62 6f 61 72 64 28 27 2e 63 6f 70 79 27 29 0a 20  board('.copy'). 
0560: 20 7d 0a 0a 20 20 68 61 6e 64 6c 65 54 6f 67 67   }..  handleTogg
0570: 6c 65 41 64 64 46 6f 72 6d 20 3d 20 28 29 20 3d  leAddForm = () =
0580: 3e 20 7b 0a 20 20 20 20 74 68 69 73 2e 73 65 74  > {.    this.set
0590: 53 74 61 74 65 28 7b 0a 20 20 20 20 20 20 2e 2e  State({.      ..
05a0: 2e 74 68 69 73 2e 73 74 61 74 65 2c 0a 20 20 20  .this.state,.   
05b0: 20 20 20 73 68 6f 77 41 64 64 46 6f 72 6d 3a 20     showAddForm: 
05c0: 21 74 68 69 73 2e 73 74 61 74 65 2e 73 68 6f 77  !this.state.show
05d0: 41 64 64 46 6f 72 6d 0a 20 20 20 20 7d 29 0a 20  AddForm.    }). 
05e0: 20 7d 0a 0a 20 20 68 61 6e 64 6c 65 52 65 6d 6f   }..  handleRemo
05f0: 76 65 20 3d 20 63 6f 64 65 20 3d 3e 20 65 20 3d  ve = code => e =
0600: 3e 20 7b 0a 20 20 20 20 65 2e 70 72 65 76 65 6e  > {.    e.preven
0610: 74 44 65 66 61 75 6c 74 28 29 0a 0a 20 20 20 20  tDefault()..    
0620: 74 68 69 73 2e 70 72 6f 70 73 2e 72 65 6d 6f 76  this.props.remov
0630: 65 28 63 6f 64 65 29 0a 20 20 7d 0a 0a 20 20 72  e(code).  }..  r
0640: 65 6e 64 65 72 43 6f 64 65 20 3d 20 69 6e 76 69  enderCode = invi
0650: 74 65 20 3d 3e 20 7b 0a 20 20 20 20 63 6f 6e 73  te => {.    cons
0660: 74 20 63 6f 6e 66 69 67 20 3d 20 74 68 69 73 2e  t config = this.
0670: 70 72 6f 70 73 2e 63 6f 6e 66 69 67 0a 0a 20 20  props.config..  
0680: 20 20 72 65 74 75 72 6e 20 28 0a 20 20 20 20 20    return (.     
0690: 20 3c 64 69 76 20 63 6c 61 73 73 4e 61 6d 65 3d   <div className=
06a0: 7b 63 78 28 27 69 6e 76 69 74 65 27 29 7d 20 6b  {cx('invite')} k
06b0: 65 79 3d 7b 69 6e 76 69 74 65 2e 63 6f 64 65 7d  ey={invite.code}
06c0: 3e 0a 20 20 20 20 20 20 20 20 3c 64 69 76 20 63  >.        <div c
06d0: 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 72 6f  lassName={cx('ro
06e0: 77 27 2c 20 27 72 6f 77 2d 73 6d 27 29 7d 3e 0a  w', 'row-sm')}>.
06f0: 20 20 20 20 20 20 20 20 20 20 3c 64 69 76 20 63            <div c
0700: 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 63 6f  lassName={cx('co
0710: 6c 2d 73 6d 2d 35 27 29 7d 3e 0a 20 20 20 20 20  l-sm-5')}>.     
0720: 20 20 20 20 20 20 20 3c 61 20 68 72 65 66 3d 27         <a href='
0730: 27 20 6f 6e 43 6c 69 63 6b 3d 7b 65 20 3d 3e 20  ' onClick={e => 
0740: 7b 20 65 2e 70 72 65 76 65 6e 74 44 65 66 61 75  { e.preventDefau
0750: 6c 74 28 29 20 7d 7d 20 64 61 74 61 2d 74 69 70  lt() }} data-tip
0760: 3d 27 63 6c 69 63 6b 20 74 6f 20 63 6f 70 79 20  ='click to copy 
0770: 74 68 65 20 6c 69 6e 6b 27 0a 20 20 20 20 20 20  the link'.      
0780: 20 20 20 20 20 20 20 20 64 61 74 61 2d 63 6c 69          data-cli
0790: 70 62 6f 61 72 64 2d 74 65 78 74 3d 7b 63 6f 6e  pboard-text={con
07a0: 66 69 67 2e 63 6c 69 65 6e 74 55 72 69 20 2b 20  fig.clientUri + 
07b0: 27 2f 72 65 67 69 73 74 65 72 2f 27 20 2b 20 69  '/register/' + i
07c0: 6e 76 69 74 65 2e 63 6f 64 65 7d 0a 20 20 20 20  nvite.code}.    
07d0: 20 20 20 20 20 20 20 20 20 20 63 6c 61 73 73 4e            classN
07e0: 61 6d 65 3d 7b 63 78 28 27 63 6f 64 65 27 2c 20  ame={cx('code', 
07f0: 27 63 6f 70 79 27 29 7d 3e 7b 69 6e 76 69 74 65  'copy')}>{invite
0800: 2e 63 6f 64 65 7d 3c 2f 61 3e 0a 20 20 20 20 20  .code}</a>.     
0810: 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20       </div>.    
0820: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73        <div class
0830: 4e 61 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d 73 6d  Name={cx('col-sm
0840: 2d 33 27 2c 20 27 61 6d 6f 75 6e 74 43 6f 6c 75  -3', 'amountColu
0850: 6d 6e 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20  mn')}>.         
0860: 20 20 20 3c 73 70 61 6e 20 63 6c 61 73 73 4e 61     <span classNa
0870: 6d 65 3d 7b 63 78 28 27 61 6d 6f 75 6e 74 27 29  me={cx('amount')
0880: 7d 3e 7b 69 6e 76 69 74 65 2e 61 6d 6f 75 6e 74  }>{invite.amount
0890: 7d 3c 2f 73 70 61 6e 3e 0a 20 20 20 20 20 20 20  }</span>.       
08a0: 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20     </div>.      
08b0: 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61      <div classNa
08c0: 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d 73 6d 2d 32  me={cx('col-sm-2
08d0: 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20  ')}>.           
08e0: 20 7b 21 69 6e 76 69 74 65 2e 63 6c 61 69 6d 65   {!invite.claime
08f0: 64 20 26 26 20 3c 73 70 61 6e 20 63 6c 61 73 73  d && <span class
0900: 4e 61 6d 65 3d 7b 63 78 28 27 63 6c 61 69 6d 65  Name={cx('claime
0910: 64 27 29 7d 3e 4e 6f 3c 2f 73 70 61 6e 3e 7d 0a  d')}>No</span>}.
0920: 0a 20 20 20 20 20 20 20 20 20 20 20 20 7b 69 6e  .            {in
0930: 76 69 74 65 2e 75 73 65 72 5f 69 64 20 26 26 20  vite.user_id && 
0940: 3c 73 74 72 6f 6e 67 3e 7b 69 6e 76 69 74 65 2e  <strong>{invite.
0950: 55 73 65 72 2e 75 73 65 72 6e 61 6d 65 7d 3c 2f  User.username}</
0960: 73 74 72 6f 6e 67 3e 7d 0a 20 20 20 20 20 20 20  strong>}.       
0970: 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20     </div>.      
0980: 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61      <div classNa
0990: 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d 73 6d 2d 32  me={cx('col-sm-2
09a0: 27 2c 20 27 74 65 78 74 2d 72 69 67 68 74 27 29  ', 'text-right')
09b0: 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 7b  }>.            {
09c0: 2f 2a 20 54 4f 44 4f 3a 55 58 20 73 68 6f 75 6c  /* TODO:UX shoul
09d0: 64 6e 27 74 20 62 65 20 61 62 6c 65 20 74 6f 20  dn't be able to 
09e0: 64 65 6c 65 74 65 20 61 6c 72 65 61 64 79 20 63  delete already c
09f0: 6c 61 69 6d 65 64 20 6f 6e 65 73 20 2a 2f 7d 0a  laimed ones */}.
0a00: 20 20 20 20 20 20 20 20 20 20 20 20 3c 42 75 74              <But
0a10: 74 6f 6e 44 61 6e 67 65 72 0a 20 20 20 20 20 20  tonDanger.      
0a20: 20 20 20 20 20 20 20 20 69 6e 69 74 69 61 6c 54          initialT
0a30: 65 78 74 3d 27 78 27 0a 20 20 20 20 20 20 20 20  ext='x'.        
0a40: 20 20 20 20 20 20 63 6f 6e 66 69 72 6d 61 74 69        confirmati
0a50: 6f 6e 54 65 78 74 3d 27 73 75 72 65 3f 27 0a 20  onText='sure?'. 
0a60: 20 20 20 20 20 20 20 20 20 20 20 20 20 6f 6e 43               onC
0a70: 6f 6e 66 69 72 6d 3d 7b 74 68 69 73 2e 68 61 6e  onfirm={this.han
0a80: 64 6c 65 52 65 6d 6f 76 65 28 69 6e 76 69 74 65  dleRemove(invite
0a90: 2e 63 6f 64 65 29 7d 0a 20 20 20 20 20 20 20 20  .code)}.        
0aa0: 20 20 20 20 20 20 69 64 3d 7b 69 6e 76 69 74 65        id={invite
0ab0: 2e 63 6f 64 65 7d 0a 20 20 20 20 20 20 20 20 20  .code}.         
0ac0: 20 20 20 20 20 63 6c 61 73 73 4e 61 6d 65 3d 7b       className={
0ad0: 63 78 28 27 62 74 6e 2d 64 65 6c 65 74 65 27 29  cx('btn-delete')
0ae0: 7d 20 2f 3e 0a 20 20 20 20 20 20 20 20 20 20 3c  } />.          <
0af0: 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 3c 2f  /div>.        </
0b00: 64 69 76 3e 0a 0a 20 20 20 20 20 20 20 20 3c 52  div>..        <R
0b10: 65 61 63 74 54 6f 6f 6c 74 69 70 20 2f 3e 0a 20  eactTooltip />. 
0b20: 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20       </div>.    
0b30: 29 0a 20 20 7d 0a 0a 20 20 72 65 6e 64 65 72 20  ).  }..  render 
0b40: 28 29 20 7b 0a 20 20 20 20 63 6f 6e 73 74 20 7b  () {.    const {
0b50: 20 69 6e 76 69 74 65 53 74 61 74 65 20 7d 20 3d   inviteState } =
0b60: 20 74 68 69 73 2e 70 72 6f 70 73 0a 20 20 20 20   this.props.    
0b70: 63 6f 6e 73 74 20 7b 20 73 68 6f 77 41 64 64 46  const { showAddF
0b80: 6f 72 6d 20 7d 20 3d 20 74 68 69 73 2e 73 74 61  orm } = this.sta
0b90: 74 65 0a 0a 20 20 20 20 72 65 74 75 72 6e 20 28  te..    return (
0ba0: 0a 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73  .      <div clas
0bb0: 73 4e 61 6d 65 3d 7b 63 78 28 27 49 6e 76 69 74  sName={cx('Invit
0bc0: 65 73 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 3c  es')}>.        <
0bd0: 48 65 6c 6d 65 74 3e 0a 20 20 20 20 20 20 20 20  Helmet>.        
0be0: 20 20 3c 74 69 74 6c 65 3e 49 6e 76 69 74 65 73    <title>Invites
0bf0: 3c 2f 74 69 74 6c 65 3e 0a 20 20 20 20 20 20 20  </title>.       
0c00: 20 3c 2f 48 65 6c 6d 65 74 3e 0a 0a 20 20 20 20   </Helmet>..    
0c10: 20 20 20 20 7b 2f 2a 20 41 64 64 20 6e 65 77 20      {/* Add new 
0c20: 2a 2f 7d 0a 20 20 20 20 20 20 20 20 7b 21 73 68  */}.        {!sh
0c30: 6f 77 41 64 64 46 6f 72 6d 20 26 26 20 69 6e 76  owAddForm && inv
0c40: 69 74 65 53 74 61 74 65 2e 6c 69 73 74 2e 6c 65  iteState.list.le
0c50: 6e 67 74 68 20 3e 20 30 20 26 26 0a 20 20 20 20  ngth > 0 &&.    
0c60: 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61      <div classNa
0c70: 6d 65 3d 7b 63 78 28 27 68 65 61 64 65 72 27 2c  me={cx('header',
0c80: 20 27 72 6f 77 27 2c 20 27 72 6f 77 2d 73 6d 27   'row', 'row-sm'
0c90: 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 64  )}>.          <d
0ca0: 69 76 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78  iv className={cx
0cb0: 28 27 63 6f 6c 2d 73 6d 2d 31 30 27 29 7d 3e 0a  ('col-sm-10')}>.
0cc0: 20 20 20 20 20 20 20 20 20 20 20 20 3c 68 33 3e              <h3>
0cd0: 49 6e 76 69 74 65 20 43 6f 64 65 73 3c 2f 68 33  Invite Codes</h3
0ce0: 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 2f 64 69  >.          </di
0cf0: 76 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 64 69  v>.          <di
0d00: 76 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28  v className={cx(
0d10: 27 63 6f 6c 2d 73 6d 2d 32 27 29 7d 3e 0a 20 20  'col-sm-2')}>.  
0d20: 20 20 20 20 20 20 20 20 20 20 3c 62 75 74 74 6f            <butto
0d30: 6e 20 74 79 70 65 3d 27 62 75 74 74 6f 6e 27 20  n type='button' 
0d40: 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 62  className={cx('b
0d50: 74 6e 27 2c 20 27 62 74 6e 2d 73 75 63 63 65 73  tn', 'btn-succes
0d60: 73 27 2c 20 27 62 74 6e 2d 62 6c 6f 63 6b 27 29  s', 'btn-block')
0d70: 7d 20 6f 6e 43 6c 69 63 6b 3d 7b 74 68 69 73 2e  } onClick={this.
0d80: 68 61 6e 64 6c 65 54 6f 67 67 6c 65 41 64 64 46  handleToggleAddF
0d90: 6f 72 6d 7d 3e 41 64 64 20 49 6e 76 69 74 65 20  orm}>Add Invite 
0da0: 43 6f 64 65 3c 2f 62 75 74 74 6f 6e 3e 0a 20 20  Code</button>.  
0db0: 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20          </div>. 
0dc0: 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 7d 0a 0a         </div>}..
0dd0: 20 20 20 20 20 20 20 20 7b 73 68 6f 77 41 64 64          {showAdd
0de0: 46 6f 72 6d 20 26 26 0a 20 20 20 20 20 20 20 20  Form &&.        
0df0: 3c 48 6f 74 4b 65 79 73 20 68 61 6e 64 6c 65 72  <HotKeys handler
0e00: 73 3d 7b 7b 20 65 73 63 3a 20 74 68 69 73 2e 68  s={{ esc: this.h
0e10: 61 6e 64 6c 65 54 6f 67 67 6c 65 41 64 64 46 6f  andleToggleAddFo
0e20: 72 6d 20 7d 7d 3e 0a 20 20 20 20 20 20 20 20 20  rm }}>.         
0e30: 20 3c 49 6e 76 69 74 65 43 72 65 61 74 65 46 6f   <InviteCreateFo
0e40: 72 6d 20 2f 3e 0a 20 20 20 20 20 20 20 20 3c 2f  rm />.        </
0e50: 48 6f 74 4b 65 79 73 3e 7d 0a 0a 20 20 20 20 20  HotKeys>}..     
0e60: 20 20 20 7b 69 6e 76 69 74 65 53 74 61 74 65 2e     {inviteState.
0e70: 6c 69 73 74 2e 6c 65 6e 67 74 68 20 3e 20 30 20  list.length > 0 
0e80: 26 26 0a 20 20 20 20 20 20 20 20 3c 64 69 76 20  &&.        <div 
0e90: 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 72  className={cx('r
0ea0: 6f 77 27 2c 20 27 72 6f 77 2d 73 6d 27 2c 20 27  ow', 'row-sm', '
0eb0: 74 61 62 6c 65 48 65 61 64 27 29 7d 3e 0a 20 20  tableHead')}>.  
0ec0: 20 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61          <div cla
0ed0: 73 73 4e 61 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d  ssName={cx('col-
0ee0: 73 6d 2d 35 27 29 7d 3e 0a 20 20 20 20 20 20 20  sm-5')}>.       
0ef0: 20 20 20 20 20 43 6f 64 65 0a 20 20 20 20 20 20       Code.      
0f00: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20      </div>.     
0f10: 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e       <div classN
0f20: 61 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d 73 6d 2d  ame={cx('col-sm-
0f30: 33 27 2c 20 27 61 6d 6f 75 6e 74 43 6f 6c 75 6d  3', 'amountColum
0f40: 6e 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20  n')}>.          
0f50: 20 20 41 6d 6f 75 6e 74 0a 20 20 20 20 20 20 20    Amount.       
0f60: 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20     </div>.      
0f70: 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61      <div classNa
0f80: 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d 73 6d 2d 32  me={cx('col-sm-2
0f90: 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20  ')}>.           
0fa0: 20 43 6c 61 69 6d 65 64 0a 20 20 20 20 20 20 20   Claimed.       
0fb0: 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20     </div>.      
0fc0: 20 20 3c 2f 64 69 76 3e 7d 0a 0a 20 20 20 20 20    </div>}..     
0fd0: 20 20 20 3c 4c 69 73 74 0a 20 20 20 20 20 20 20     <List.       
0fe0: 20 20 20 65 6d 70 74 79 53 63 72 65 65 6e 3d 7b     emptyScreen={
0ff0: 28 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c 64  (.            <d
1000: 69 76 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78  iv className={cx
1010: 28 27 70 61 6e 65 6c 27 2c 20 27 70 61 6e 65 6c  ('panel', 'panel
1020: 2d 64 65 66 61 75 6c 74 27 2c 20 27 69 6e 76 69  -default', 'invi
1030: 74 65 73 53 74 61 74 75 73 27 29 7d 3e 0a 20 20  tesStatus')}>.  
1040: 20 20 20 20 20 20 20 20 20 20 20 20 3c 64 69 76              <div
1050: 20 63 6c 61 73 73 4e 61 6d 65 3d 27 70 61 6e 65   className='pane
1060: 6c 2d 62 6f 64 79 27 3e 0a 20 20 20 20 20 20 20  l-body'>.       
1070: 20 20 20 20 20 20 20 20 20 3c 69 20 63 6c 61 73           <i clas
1080: 73 4e 61 6d 65 3d 7b 63 78 28 27 66 61 27 2c 20  sName={cx('fa', 
1090: 27 66 61 2d 74 69 63 6b 65 74 27 29 7d 20 2f 3e  'fa-ticket')} />
10a0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
10b0: 20 3c 68 31 3e 4e 6f 20 49 6e 76 69 74 65 20 43   <h1>No Invite C
10c0: 6f 64 65 73 3c 2f 68 31 3e 0a 20 20 20 20 20 20  odes</h1>.      
10d0: 20 20 20 20 20 20 20 20 20 20 7b 21 73 68 6f 77            {!show
10e0: 41 64 64 46 6f 72 6d 20 26 26 0a 20 20 20 20 20  AddForm &&.     
10f0: 20 20 20 20 20 20 20 20 20 20 20 3c 64 69 76 3e             <div>
1100: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
1110: 20 20 20 3c 64 69 76 3e 43 6c 69 63 6b 20 74 68     <div>Click th
1120: 65 20 62 75 74 74 6f 6e 20 62 65 6c 6f 77 20 74  e button below t
1130: 6f 20 61 64 64 20 79 6f 75 72 20 66 69 72 73 74  o add your first
1140: 20 69 6e 76 69 74 65 20 63 6f 64 65 2e 3c 2f 64   invite code.</d
1150: 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20  iv>.            
1160: 20 20 20 20 20 20 3c 62 75 74 74 6f 6e 20 74 79        <button ty
1170: 70 65 3d 27 62 75 74 74 6f 6e 27 0a 20 20 20 20  pe='button'.    
1180: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
1190: 6f 6e 43 6c 69 63 6b 3d 7b 74 68 69 73 2e 68 61  onClick={this.ha
11a0: 6e 64 6c 65 54 6f 67 67 6c 65 41 64 64 46 6f 72  ndleToggleAddFor
11b0: 6d 7d 0a 20 20 20 20 20 20 20 20 20 20 20 20 20  m}.             
11c0: 20 20 20 20 20 20 20 63 6c 61 73 73 4e 61 6d 65         className
11d0: 3d 7b 63 78 28 27 62 74 6e 27 2c 20 27 62 74 6e  ={cx('btn', 'btn
11e0: 2d 73 75 63 63 65 73 73 27 2c 20 27 62 74 6e 2d  -success', 'btn-
11f0: 6c 67 27 2c 20 27 62 74 6e 2d 61 64 64 2d 6c 67  lg', 'btn-add-lg
1200: 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20  ')}>.           
1210: 20 20 20 20 20 20 20 20 20 41 64 64 20 49 6e 76           Add Inv
1220: 69 74 65 20 43 6f 64 65 0a 20 20 20 20 20 20 20  ite Code.       
1230: 20 20 20 20 20 20 20 20 20 20 20 3c 2f 62 75 74             </but
1240: 74 6f 6e 3e 0a 20 20 20 20 20 20 20 20 20 20 20  ton>.           
1250: 20 20 20 20 20 3c 2f 64 69 76 3e 7d 0a 20 20 20       </div>}.   
1260: 20 20 20 20 20 20 20 20 20 20 20 3c 2f 64 69 76             </div
1270: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f  >.            </
1280: 64 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20 29  div>.          )
1290: 7d 20 73 74 61 74 65 3d 7b 69 6e 76 69 74 65 53  } state={inviteS
12a0: 74 61 74 65 7d 3e 0a 20 20 20 20 20 20 20 20 20  tate}>.         
12b0: 20 7b 69 6e 76 69 74 65 53 74 61 74 65 2e 6c 69   {inviteState.li
12c0: 73 74 2e 6c 65 6e 67 74 68 20 3e 20 30 20 26 26  st.length > 0 &&
12d0: 0a 20 20 20 20 20 20 20 20 20 20 3c 41 6e 69 6d  .          <Anim
12e0: 61 74 65 45 6e 74 65 72 4c 65 61 76 65 3e 0a 20  ateEnterLeave>. 
12f0: 20 20 20 20 20 20 20 20 20 20 20 7b 69 6e 76 69             {invi
1300: 74 65 53 74 61 74 65 2e 6c 69 73 74 2e 6d 61 70  teState.list.map
1310: 28 74 68 69 73 2e 72 65 6e 64 65 72 43 6f 64 65  (this.renderCode
1320: 29 7d 0a 20 20 20 20 20 20 20 20 20 20 3c 2f 41  )}.          </A
1330: 6e 69 6d 61 74 65 45 6e 74 65 72 4c 65 61 76 65  nimateEnterLeave
1340: 3e 7d 0a 20 20 20 20 20 20 20 20 3c 2f 4c 69 73  >}.        </Lis
1350: 74 3e 0a 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a  t>.      </div>.
1360: 20 20 20 20 29 0a 20 20 7d 0a 7d 0a                  ).  }.}.