Hex Artifact Content
Not logged in

Artifact f2d43192e7327ed53257a7823c3193d1ab689082:


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 63 6f 6e 6e 65 63 74 7d 20 66 72 6f  rt {connect} fro
0060: 6d 20 27 72 65 61 63 74 2d 72 65 64 75 78 27 0a  m 'react-redux'.
0070: 69 6d 70 6f 72 74 20 6d 6f 6d 65 6e 74 20 66 72  import moment fr
0080: 6f 6d 20 27 6d 6f 6d 65 6e 74 27 0a 0a 69 6d 70  om 'moment'..imp
0090: 6f 72 74 20 7b 20 6c 6f 61 64 53 74 61 74 73 20  ort { loadStats 
00a0: 7d 20 66 72 6f 6d 20 27 72 65 64 75 78 2f 61 63  } from 'redux/ac
00b0: 74 69 6f 6e 73 2f 73 74 61 74 73 27 0a 0a 69 6d  tions/stats'..im
00c0: 70 6f 72 74 20 63 6c 61 73 73 4e 61 6d 65 73 20  port classNames 
00d0: 66 72 6f 6d 20 27 63 6c 61 73 73 6e 61 6d 65 73  from 'classnames
00e0: 2f 62 69 6e 64 27 0a 69 6d 70 6f 72 74 20 73 74  /bind'.import st
00f0: 79 6c 65 73 20 66 72 6f 6d 20 27 2e 2f 53 74 61  yles from './Sta
0100: 74 73 2e 73 63 73 73 27 0a 63 6f 6e 73 74 20 63  ts.scss'.const c
0110: 78 20 3d 20 63 6c 61 73 73 4e 61 6d 65 73 2e 62  x = classNames.b
0120: 69 6e 64 28 73 74 79 6c 65 73 29 0a 0a 40 63 6f  ind(styles)..@co
0130: 6e 6e 65 63 74 28 0a 20 20 73 74 61 74 65 20 3d  nnect(.  state =
0140: 3e 20 28 7b 0a 20 20 20 20 75 73 65 72 3a 20 73  > ({.    user: s
0150: 74 61 74 65 2e 61 75 74 68 2e 75 73 65 72 2c 0a  tate.auth.user,.
0160: 20 20 20 20 73 74 61 74 73 3a 20 73 74 61 74 65      stats: state
0170: 2e 73 74 61 74 73 2e 6c 69 73 74 0a 20 20 7d 29  .stats.list.  })
0180: 2c 0a 20 20 7b 6c 6f 61 64 53 74 61 74 73 7d 29  ,.  {loadStats})
0190: 0a 65 78 70 6f 72 74 20 64 65 66 61 75 6c 74 20  .export default 
01a0: 63 6c 61 73 73 20 48 6f 6d 65 20 65 78 74 65 6e  class Home exten
01b0: 64 73 20 43 6f 6d 70 6f 6e 65 6e 74 20 7b 0a 20  ds Component {. 
01c0: 20 73 74 61 74 69 63 20 70 72 6f 70 54 79 70 65   static propType
01d0: 73 20 3d 20 7b 0a 20 20 20 20 6c 6f 61 64 53 74  s = {.    loadSt
01e0: 61 74 73 3a 20 50 72 6f 70 54 79 70 65 73 2e 66  ats: PropTypes.f
01f0: 75 6e 63 2c 0a 20 20 20 20 73 74 61 74 73 3a 20  unc,.    stats: 
0200: 50 72 6f 70 54 79 70 65 73 2e 61 72 72 61 79 0a  PropTypes.array.
0210: 20 20 7d 0a 0a 20 20 63 6f 6d 70 6f 6e 65 6e 74    }..  component
0220: 44 69 64 4d 6f 75 6e 74 20 28 29 20 7b 0a 20 20  DidMount () {.  
0230: 20 20 74 68 69 73 2e 70 72 6f 70 73 2e 6c 6f 61    this.props.loa
0240: 64 53 74 61 74 73 28 29 0a 20 20 7d 0a 0a 20 20  dStats().  }..  
0250: 72 65 6e 64 65 72 53 74 61 74 20 3d 20 28 73 74  renderStat = (st
0260: 61 74 2c 20 6b 65 79 29 20 3d 3e 20 7b 0a 20 20  at, key) => {.  
0270: 20 20 72 65 74 75 72 6e 20 28 0a 20 20 20 20 20    return (.     
0280: 20 3c 64 69 76 20 63 6c 61 73 73 4e 61 6d 65 3d   <div className=
0290: 7b 63 78 28 27 73 74 61 74 27 29 7d 20 6b 65 79  {cx('stat')} key
02a0: 3d 7b 6b 65 79 7d 3e 0a 20 20 20 20 20 20 20 20  ={key}>.        
02b0: 3c 73 70 61 6e 20 63 6c 61 73 73 4e 61 6d 65 3d  <span className=
02c0: 7b 63 78 28 27 73 6f 75 72 63 65 4e 61 6d 65 27  {cx('sourceName'
02d0: 29 7d 3e 7b 73 74 61 74 2e 73 6f 75 72 63 65 5f  )}>{stat.source_
02e0: 6e 61 6d 65 7d 3c 2f 73 70 61 6e 3e 0a 20 20 20  name}</span>.   
02f0: 20 20 20 20 20 3c 73 70 61 6e 20 63 6c 61 73 73       <span class
0300: 4e 61 6d 65 3d 7b 63 78 28 27 64 65 73 74 69 6e  Name={cx('destin
0310: 61 74 69 6f 6e 4e 61 6d 65 27 29 7d 3e 7b 73 74  ationName')}>{st
0320: 61 74 2e 64 65 73 74 69 6e 61 74 69 6f 6e 5f 6e  at.destination_n
0330: 61 6d 65 7d 3c 2f 73 70 61 6e 3e 0a 20 20 20 20  ame}</span>.    
0340: 20 20 20 20 3c 73 70 61 6e 20 63 6c 61 73 73 4e      <span classN
0350: 61 6d 65 3d 7b 63 78 28 27 73 6f 75 72 63 65 41  ame={cx('sourceA
0360: 6d 6f 75 6e 74 27 29 7d 3e 7b 73 74 61 74 2e 73  mount')}>{stat.s
0370: 6f 75 72 63 65 5f 61 6d 6f 75 6e 74 7d 3c 2f 73  ource_amount}</s
0380: 70 61 6e 3e 0a 20 20 20 20 20 20 20 20 3c 73 70  pan>.        <sp
0390: 61 6e 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78  an className={cx
03a0: 28 27 64 65 73 74 69 6e 61 74 69 6f 6e 41 6d 6f  ('destinationAmo
03b0: 75 6e 74 27 29 7d 3e 7b 73 74 61 74 2e 64 65 73  unt')}>{stat.des
03c0: 74 69 6e 61 74 69 6f 6e 5f 61 6d 6f 75 6e 74 7d  tination_amount}
03d0: 3c 2f 73 70 61 6e 3e 0a 20 20 20 20 20 20 20 20  </span>.        
03e0: 3c 73 70 61 6e 20 63 6c 61 73 73 4e 61 6d 65 3d  <span className=
03f0: 7b 63 78 28 27 74 72 61 6e 73 66 65 72 73 43 6f  {cx('transfersCo
0400: 75 6e 74 27 29 7d 3e 7b 73 74 61 74 2e 74 72 61  unt')}>{stat.tra
0410: 6e 73 66 65 72 73 5f 63 6f 75 6e 74 7d 3c 2f 73  nsfers_count}</s
0420: 70 61 6e 3e 0a 20 20 20 20 20 20 20 20 3c 73 70  pan>.        <sp
0430: 61 6e 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78  an className={cx
0440: 28 27 72 65 63 65 6e 74 44 61 74 65 27 29 7d 3e  ('recentDate')}>
0450: 7b 6d 6f 6d 65 6e 74 28 73 74 61 74 2e 72 65 63  {moment(stat.rec
0460: 65 6e 74 5f 64 61 74 65 29 2e 66 6f 72 6d 61 74  ent_date).format
0470: 28 27 4c 27 29 7d 3c 2f 73 70 61 6e 3e 0a 20 20  ('L')}</span>.  
0480: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 29      </div>.    )
0490: 0a 20 20 7d 0a 0a 20 20 72 65 6e 64 65 72 20 28  .  }..  render (
04a0: 29 20 7b 0a 20 20 20 20 63 6f 6e 73 74 20 7b 20  ) {.    const { 
04b0: 73 74 61 74 73 20 7d 20 3d 20 74 68 69 73 2e 70  stats } = this.p
04c0: 72 6f 70 73 0a 0a 20 20 20 20 72 65 74 75 72 6e  rops..    return
04d0: 20 28 0a 20 20 20 20 20 20 3c 64 69 76 3e 0a 20   (.      <div>. 
04e0: 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73         <div clas
04f0: 73 4e 61 6d 65 3d 7b 63 78 28 27 73 74 61 74 27  sName={cx('stat'
0500: 2c 20 27 68 65 61 64 65 72 27 29 7d 3e 0a 20 20  , 'header')}>.  
0510: 20 20 20 20 20 20 20 20 3c 73 70 61 6e 20 63 6c          <span cl
0520: 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 73 6f 75  assName={cx('sou
0530: 72 63 65 4e 61 6d 65 27 29 7d 3e 53 65 6e 64 65  rceName')}>Sende
0540: 72 3c 2f 73 70 61 6e 3e 0a 20 20 20 20 20 20 20  r</span>.       
0550: 20 20 20 3c 73 70 61 6e 20 63 6c 61 73 73 4e 61     <span classNa
0560: 6d 65 3d 7b 63 78 28 27 64 65 73 74 69 6e 61 74  me={cx('destinat
0570: 69 6f 6e 4e 61 6d 65 27 29 7d 3e 52 65 63 69 70  ionName')}>Recip
0580: 69 65 6e 74 3c 2f 73 70 61 6e 3e 0a 20 20 20 20  ient</span>.    
0590: 20 20 20 20 20 20 3c 73 70 61 6e 20 63 6c 61 73        <span clas
05a0: 73 4e 61 6d 65 3d 7b 63 78 28 27 73 6f 75 72 63  sName={cx('sourc
05b0: 65 41 6d 6f 75 6e 74 27 29 7d 3e 53 65 6e 64 65  eAmount')}>Sende
05c0: 72 20 41 6d 6f 75 6e 74 3c 2f 73 70 61 6e 3e 0a  r Amount</span>.
05d0: 20 20 20 20 20 20 20 20 20 20 3c 73 70 61 6e 20            <span 
05e0: 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 64  className={cx('d
05f0: 65 73 74 69 6e 61 74 69 6f 6e 41 6d 6f 75 6e 74  estinationAmount
0600: 27 29 7d 3e 52 65 63 69 70 69 65 6e 74 20 41 6d  ')}>Recipient Am
0610: 6f 75 6e 74 3c 2f 73 70 61 6e 3e 0a 20 20 20 20  ount</span>.    
0620: 20 20 20 20 20 20 3c 73 70 61 6e 20 63 6c 61 73        <span clas
0630: 73 4e 61 6d 65 3d 7b 63 78 28 27 74 72 61 6e 73  sName={cx('trans
0640: 66 65 72 73 43 6f 75 6e 74 27 29 7d 3e 54 6f 74  fersCount')}>Tot
0650: 61 6c 20 50 61 79 6d 65 6e 74 73 3c 2f 73 70 61  al Payments</spa
0660: 6e 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 73 70  n>.          <sp
0670: 61 6e 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78  an className={cx
0680: 28 27 72 65 63 65 6e 74 44 61 74 65 27 29 7d 3e  ('recentDate')}>
0690: 52 65 63 65 6e 74 20 50 61 79 6d 65 6e 74 3c 2f  Recent Payment</
06a0: 73 70 61 6e 3e 0a 20 20 20 20 20 20 20 20 3c 2f  span>.        </
06b0: 64 69 76 3e 0a 20 20 20 20 20 20 20 20 7b 73 74  div>.        {st
06c0: 61 74 73 2e 6d 61 70 28 28 73 74 61 74 2c 20 69  ats.map((stat, i
06d0: 6e 64 65 78 29 20 3d 3e 20 7b 0a 20 20 20 20 20  ndex) => {.     
06e0: 20 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 73       return this
06f0: 2e 72 65 6e 64 65 72 53 74 61 74 28 73 74 61 74  .renderStat(stat
0700: 2c 20 69 6e 64 65 78 29 0a 20 20 20 20 20 20 20  , index).       
0710: 20 7d 29 7d 0a 20 20 20 20 20 20 3c 2f 64 69 76   })}.      </div
0720: 3e 0a 20 20 20 20 29 0a 20 20 7d 0a 7d 0a        >.    ).  }.}.