Hex Artifact Content
Not logged in

Artifact a0237c545c58ee25992afa68c5c4acaac46ce131:


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 0a 69 6d  act-tooltip'..im
00c0: 70 6f 72 74 20 41 6e 69 6d 61 74 65 45 6e 74 65  port AnimateEnte
00d0: 72 4c 65 61 76 65 20 66 72 6f 6d 20 27 63 6f 6d  rLeave from 'com
00e0: 70 6f 6e 65 6e 74 73 2f 41 6e 69 6d 61 74 65 45  ponents/AnimateE
00f0: 6e 74 65 72 4c 65 61 76 65 2f 41 6e 69 6d 61 74  nterLeave/Animat
0100: 65 45 6e 74 65 72 4c 65 61 76 65 27 0a 0a 69 6d  eEnterLeave'..im
0110: 70 6f 72 74 20 7b 20 67 65 74 53 65 74 74 6c 65  port { getSettle
0120: 6d 65 6e 74 73 20 7d 20 66 72 6f 6d 20 27 72 65  ments } from 're
0130: 64 75 78 2f 61 63 74 69 6f 6e 73 2f 73 65 74 74  dux/actions/sett
0140: 6c 65 6d 65 6e 74 27 0a 69 6d 70 6f 72 74 20 4c  lement'.import L
0150: 69 73 74 20 66 72 6f 6d 20 27 63 6f 6d 70 6f 6e  ist from 'compon
0160: 65 6e 74 73 2f 4c 69 73 74 2f 4c 69 73 74 27 0a  ents/List/List'.
0170: 0a 69 6d 70 6f 72 74 20 63 6c 61 73 73 4e 61 6d  .import classNam
0180: 65 73 20 66 72 6f 6d 20 27 63 6c 61 73 73 6e 61  es from 'classna
0190: 6d 65 73 2f 62 69 6e 64 27 0a 69 6d 70 6f 72 74  mes/bind'.import
01a0: 20 73 74 79 6c 65 73 20 66 72 6f 6d 20 27 2e 2f   styles from './
01b0: 53 65 74 74 6c 65 6d 65 6e 74 73 55 73 65 72 2e  SettlementsUser.
01c0: 73 63 73 73 27 0a 63 6f 6e 73 74 20 63 78 20 3d  scss'.const cx =
01d0: 20 63 6c 61 73 73 4e 61 6d 65 73 2e 62 69 6e 64   classNames.bind
01e0: 28 73 74 79 6c 65 73 29 0a 0a 40 63 6f 6e 6e 65  (styles)..@conne
01f0: 63 74 28 0a 20 20 73 74 61 74 65 20 3d 3e 20 28  ct(.  state => (
0200: 7b 0a 20 20 20 20 73 65 74 74 6c 65 6d 65 6e 74  {.    settlement
0210: 53 74 61 74 65 3a 20 73 74 61 74 65 2e 73 65 74  State: state.set
0220: 74 6c 65 6d 65 6e 74 2e 75 73 65 72 2c 0a 20 20  tlement.user,.  
0230: 20 20 6c 6f 61 64 65 64 3a 20 73 74 61 74 65 2e    loaded: state.
0240: 73 65 74 74 6c 65 6d 65 6e 74 2e 75 73 65 72 2e  settlement.user.
0250: 6c 6f 61 64 65 64 0a 20 20 7d 29 2c 0a 20 20 7b  loaded.  }),.  {
0260: 20 67 65 74 53 65 74 74 6c 65 6d 65 6e 74 73 20   getSettlements 
0270: 7d 29 0a 65 78 70 6f 72 74 20 64 65 66 61 75 6c  }).export defaul
0280: 74 20 63 6c 61 73 73 20 53 65 74 74 6c 65 6d 65  t class Settleme
0290: 6e 74 73 55 73 65 72 20 65 78 74 65 6e 64 73 20  ntsUser extends 
02a0: 43 6f 6d 70 6f 6e 65 6e 74 20 7b 0a 20 20 73 74  Component {.  st
02b0: 61 74 69 63 20 70 72 6f 70 54 79 70 65 73 20 3d  atic propTypes =
02c0: 20 7b 0a 20 20 20 20 73 65 74 74 6c 65 6d 65 6e   {.    settlemen
02d0: 74 53 74 61 74 65 3a 20 50 72 6f 70 54 79 70 65  tState: PropType
02e0: 73 2e 6f 62 6a 65 63 74 2c 0a 20 20 20 20 67 65  s.object,.    ge
02f0: 74 53 65 74 74 6c 65 6d 65 6e 74 73 3a 20 50 72  tSettlements: Pr
0300: 6f 70 54 79 70 65 73 2e 66 75 6e 63 2e 69 73 52  opTypes.func.isR
0310: 65 71 75 69 72 65 64 2c 0a 20 20 20 20 6c 6f 61  equired,.    loa
0320: 64 65 64 3a 20 50 72 6f 70 54 79 70 65 73 2e 62  ded: PropTypes.b
0330: 6f 6f 6c 0a 20 20 7d 0a 0a 20 20 73 74 61 74 65  ool.  }..  state
0340: 20 3d 20 7b 7d 0a 0a 20 20 63 6f 6d 70 6f 6e 65   = {}..  compone
0350: 6e 74 57 69 6c 6c 4d 6f 75 6e 74 20 28 29 20 7b  ntWillMount () {
0360: 0a 20 20 20 20 69 66 20 28 21 74 68 69 73 2e 70  .    if (!this.p
0370: 72 6f 70 73 2e 6c 6f 61 64 65 64 29 20 7b 0a 20  rops.loaded) {. 
0380: 20 20 20 20 20 74 68 69 73 2e 70 72 6f 70 73 2e       this.props.
0390: 67 65 74 53 65 74 74 6c 65 6d 65 6e 74 73 28 27  getSettlements('
03a0: 75 73 65 72 27 29 0a 20 20 20 20 7d 0a 20 20 7d  user').    }.  }
03b0: 0a 0a 20 20 72 65 6e 64 65 72 53 65 74 74 6c 65  ..  renderSettle
03c0: 6d 65 6e 74 20 3d 20 73 65 74 74 6c 65 6d 65 6e  ment = settlemen
03d0: 74 20 3d 3e 20 7b 0a 20 20 20 20 72 65 74 75 72  t => {.    retur
03e0: 6e 20 28 0a 20 20 20 20 20 20 3c 64 69 76 20 63  n (.      <div c
03f0: 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 73 65  lassName={cx('se
0400: 74 74 6c 65 6d 65 6e 74 27 29 7d 20 6b 65 79 3d  ttlement')} key=
0410: 7b 73 65 74 74 6c 65 6d 65 6e 74 2e 69 64 7d 3e  {settlement.id}>
0420: 0a 20 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c  .        <div cl
0430: 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 72 6f 77  assName={cx('row
0440: 27 2c 20 27 72 6f 77 2d 73 6d 27 29 7d 3e 0a 20  ', 'row-sm')}>. 
0450: 20 20 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c           <div cl
0460: 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 63 6f 6c  assName={cx('col
0470: 2d 73 6d 2d 35 27 29 7d 3e 0a 20 20 20 20 20 20  -sm-5')}>.      
0480: 20 20 20 20 20 20 7b 73 65 74 74 6c 65 6d 65 6e        {settlemen
0490: 74 2e 55 73 65 72 2e 75 73 65 72 6e 61 6d 65 7d  t.User.username}
04a0: 0a 20 20 20 20 20 20 20 20 20 20 3c 2f 64 69 76  .          </div
04b0: 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 64 69 76  >.          <div
04c0: 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27   className={cx('
04d0: 63 6f 6c 2d 73 6d 2d 35 27 2c 20 27 61 6d 6f 75  col-sm-5', 'amou
04e0: 6e 74 43 6f 6c 75 6d 6e 27 29 7d 3e 0a 20 20 20  ntColumn')}>.   
04f0: 20 20 20 20 20 20 20 20 20 3c 73 70 61 6e 20 63           <span c
0500: 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 61 6d  lassName={cx('am
0510: 6f 75 6e 74 27 29 7d 3e 7b 73 65 74 74 6c 65 6d  ount')}>{settlem
0520: 65 6e 74 2e 61 6d 6f 75 6e 74 7d 3c 2f 73 70 61  ent.amount}</spa
0530: 6e 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 2f 64  n>.          </d
0540: 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 64  iv>.          <d
0550: 69 76 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78  iv className={cx
0560: 28 27 63 6f 6c 2d 73 6d 2d 32 27 2c 20 27 6d 65  ('col-sm-2', 'me
0570: 74 68 6f 64 43 6f 6c 75 6d 6e 27 29 7d 3e 0a 20  thodColumn')}>. 
0580: 20 20 20 20 20 20 20 20 20 20 20 7b 73 65 74 74             {sett
0590: 6c 65 6d 65 6e 74 2e 53 65 74 74 6c 65 6d 65 6e  lement.Settlemen
05a0: 74 4d 65 74 68 6f 64 2e 6e 61 6d 65 7d 0a 20 20  tMethod.name}.  
05b0: 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20          </div>. 
05c0: 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a 0a 20         </div>.. 
05d0: 20 20 20 20 20 20 20 3c 52 65 61 63 74 54 6f 6f         <ReactToo
05e0: 6c 74 69 70 20 2f 3e 0a 20 20 20 20 20 20 3c 2f  ltip />.      </
05f0: 64 69 76 3e 0a 20 20 20 20 29 0a 20 20 7d 0a 0a  div>.    ).  }..
0600: 20 20 72 65 6e 64 65 72 20 28 29 20 7b 0a 20 20    render () {.  
0610: 20 20 63 6f 6e 73 74 20 7b 20 73 65 74 74 6c 65    const { settle
0620: 6d 65 6e 74 53 74 61 74 65 20 7d 20 3d 20 74 68  mentState } = th
0630: 69 73 2e 70 72 6f 70 73 0a 0a 20 20 20 20 72 65  is.props..    re
0640: 74 75 72 6e 20 28 0a 20 20 20 20 20 20 3c 64 69  turn (.      <di
0650: 76 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28  v className={cx(
0660: 27 49 6e 76 69 74 65 73 27 29 7d 3e 0a 20 20 20  'Invites')}>.   
0670: 20 20 20 20 20 3c 48 65 6c 6d 65 74 3e 0a 20 20       <Helmet>.  
0680: 20 20 20 20 20 20 20 20 3c 74 69 74 6c 65 3e 53          <title>S
0690: 65 74 74 6c 65 6d 65 6e 74 73 3c 2f 74 69 74 6c  ettlements</titl
06a0: 65 3e 0a 20 20 20 20 20 20 20 20 3c 2f 48 65 6c  e>.        </Hel
06b0: 6d 65 74 3e 0a 0a 20 20 20 20 20 20 20 20 7b 73  met>..        {s
06c0: 65 74 74 6c 65 6d 65 6e 74 53 74 61 74 65 2e 6c  ettlementState.l
06d0: 69 73 74 2e 6c 65 6e 67 74 68 20 3e 20 30 20 26  ist.length > 0 &
06e0: 26 0a 20 20 20 20 20 20 20 20 3c 64 69 76 20 63  &.        <div c
06f0: 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 72 6f  lassName={cx('ro
0700: 77 27 2c 20 27 72 6f 77 2d 73 6d 27 2c 20 27 74  w', 'row-sm', 't
0710: 61 62 6c 65 48 65 61 64 27 29 7d 3e 0a 20 20 20  ableHead')}>.   
0720: 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73         <div clas
0730: 73 4e 61 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d 73  sName={cx('col-s
0740: 6d 2d 35 27 29 7d 3e 0a 20 20 20 20 20 20 20 20  m-5')}>.        
0750: 20 20 20 20 55 73 65 72 0a 20 20 20 20 20 20 20      User.       
0760: 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20     </div>.      
0770: 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61      <div classNa
0780: 6d 65 3d 7b 63 78 28 27 63 6f 6c 2d 73 6d 2d 35  me={cx('col-sm-5
0790: 27 2c 20 27 61 6d 6f 75 6e 74 43 6f 6c 75 6d 6e  ', 'amountColumn
07a0: 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20  ')}>.           
07b0: 20 41 6d 6f 75 6e 74 0a 20 20 20 20 20 20 20 20   Amount.        
07c0: 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 20    </div>.       
07d0: 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61 6d     <div classNam
07e0: 65 3d 7b 63 78 28 27 63 6f 6c 2d 73 6d 2d 32 27  e={cx('col-sm-2'
07f0: 2c 20 27 6d 65 74 68 6f 64 43 6f 6c 75 6d 6e 27  , 'methodColumn'
0800: 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20  )}>.            
0810: 4d 65 74 68 6f 64 0a 20 20 20 20 20 20 20 20 20  Method.         
0820: 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20   </div>.        
0830: 3c 2f 64 69 76 3e 7d 0a 0a 20 20 20 20 20 20 20  </div>}..       
0840: 20 3c 4c 69 73 74 0a 20 20 20 20 20 20 20 20 20   <List.         
0850: 20 65 6d 70 74 79 53 63 72 65 65 6e 3d 7b 28 0a   emptyScreen={(.
0860: 20 20 20 20 20 20 20 20 20 20 20 20 3c 64 69 76              <div
0870: 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27   className={cx('
0880: 70 61 6e 65 6c 27 2c 20 27 70 61 6e 65 6c 2d 64  panel', 'panel-d
0890: 65 66 61 75 6c 74 27 2c 20 27 73 74 61 74 75 73  efault', 'status
08a0: 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20  ')}>.           
08b0: 20 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61 6d     <div classNam
08c0: 65 3d 27 70 61 6e 65 6c 2d 62 6f 64 79 27 3e 0a  e='panel-body'>.
08d0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
08e0: 3c 69 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78  <i className={cx
08f0: 28 27 66 61 27 2c 20 27 66 61 2d 74 69 63 6b 65  ('fa', 'fa-ticke
0900: 74 27 29 7d 20 2f 3e 0a 20 20 20 20 20 20 20 20  t')} />.        
0910: 20 20 20 20 20 20 20 20 3c 68 31 3e 4e 6f 20 55          <h1>No U
0920: 73 65 72 20 53 65 74 74 6c 65 6d 65 6e 74 73 3c  ser Settlements<
0930: 2f 68 31 3e 0a 20 20 20 20 20 20 20 20 20 20 20  /h1>.           
0940: 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20     </div>.      
0950: 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20        </div>.   
0960: 20 20 20 20 20 20 20 29 7d 20 73 74 61 74 65 3d         )} state=
0970: 7b 73 65 74 74 6c 65 6d 65 6e 74 53 74 61 74 65  {settlementState
0980: 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 7b 73 65  }>.          {se
0990: 74 74 6c 65 6d 65 6e 74 53 74 61 74 65 2e 6c 69  ttlementState.li
09a0: 73 74 2e 6c 65 6e 67 74 68 20 3e 20 30 20 26 26  st.length > 0 &&
09b0: 0a 20 20 20 20 20 20 20 20 20 20 3c 41 6e 69 6d  .          <Anim
09c0: 61 74 65 45 6e 74 65 72 4c 65 61 76 65 3e 0a 20  ateEnterLeave>. 
09d0: 20 20 20 20 20 20 20 20 20 20 20 7b 73 65 74 74             {sett
09e0: 6c 65 6d 65 6e 74 53 74 61 74 65 2e 6c 69 73 74  lementState.list
09f0: 2e 6d 61 70 28 74 68 69 73 2e 72 65 6e 64 65 72  .map(this.render
0a00: 53 65 74 74 6c 65 6d 65 6e 74 29 7d 0a 20 20 20  Settlement)}.   
0a10: 20 20 20 20 20 20 20 3c 2f 41 6e 69 6d 61 74 65         </Animate
0a20: 45 6e 74 65 72 4c 65 61 76 65 3e 7d 0a 20 20 20  EnterLeave>}.   
0a30: 20 20 20 20 20 3c 2f 4c 69 73 74 3e 0a 20 20 20       </List>.   
0a40: 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 29 0a     </div>.    ).
0a50: 20 20 7d 0a 7d 0a                                  }.}.