forked from avral/golos-ui
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #506 from golos-blockchain/beta
Referrers, referrals
- Loading branch information
Showing
16 changed files
with
680 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,32 @@ | ||
| /* eslint react/prop-types: 0 */ | ||
| import React from 'react'; | ||
| import { FormattedRelativeTime } from 'react-intl' | ||
| import { FormattedRelativeTime, formatRelativeTime } from 'react-intl' | ||
| import { selectUnit } from 'app/utils/selectUnit' | ||
|
|
||
| import Tooltip from 'app/components/elements/Tooltip' | ||
|
|
||
| function processDate(date) { | ||
| if (date && /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d$/.test(date)) { | ||
| date = date + 'Z' // Firefox really wants this Z (Zulu) | ||
| } | ||
| const dt = new Date(date) | ||
| const res = selectUnit(dt) | ||
| return { dt, res } | ||
| } | ||
|
|
||
| export function wrapDate(date, intl) { | ||
| const { dt, res } = processDate(date) | ||
| const { value, unit } = res | ||
| return intl.formatRelativeTime(value, unit) | ||
| } | ||
|
|
||
| export default class TimeAgoWrapper extends React.Component { | ||
| render() { | ||
| let {date, className} = this.props | ||
| if (date && /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d$/.test(date)) { | ||
| date = date + 'Z' // Firefox really wants this Z (Zulu) | ||
| } | ||
| const dt = new Date(date) | ||
| const { value, unit } = selectUnit(dt) | ||
| const { date, className } = this.props | ||
| const { dt, res } = processDate(date) | ||
| const { value, unit } = res | ||
| return <Tooltip t={dt.toLocaleString()} className={className}> | ||
| <FormattedRelativeTime {...this.props} value={value} unit={unit} /> | ||
| </Tooltip> | ||
| <FormattedRelativeTime {...this.props} value={value} unit={unit} /> | ||
| </Tooltip> | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| import React from 'react' | ||
| import { Link } from 'react-router' | ||
| import { connect } from 'react-redux' | ||
| import tt from 'counterpart' | ||
| import { Asset } from 'golos-lib-js/lib/utils' | ||
| import CopyToClipboard from 'react-copy-to-clipboard' | ||
| import { IntlContext } from 'react-intl' | ||
|
|
||
| import DateJoinWrapper from 'app/components/elements/DateJoinWrapper' | ||
| import DropdownMenu from 'app/components/elements/DropdownMenu' | ||
| import Icon from 'app/components/elements/Icon' | ||
| import LoadingIndicator from 'app/components/elements/LoadingIndicator' | ||
| import TimeAgoWrapper, { wrapDate } from 'app/components/elements/TimeAgoWrapper' | ||
| import g from 'app/redux/GlobalReducer' | ||
| import LinkEx from 'app/utils/LinkEx' | ||
| import { getLastSeen } from 'app/utils/NormalizeProfile' | ||
| import { vestsToSteem } from 'app/utils/StateFunctions' | ||
|
|
||
| class Referrals extends React.Component { | ||
| static contextType = IntlContext | ||
|
|
||
| constructor(props, context) { | ||
| super(props, context) | ||
| } | ||
|
|
||
| state = { | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.refetch() | ||
| } | ||
|
|
||
| refetch = () => { | ||
| this.props.fetchReferrals(this.props.account, '', this.sort) | ||
| } | ||
|
|
||
| sortOrder = (e, sort) => { | ||
| e.preventDefault() | ||
| this.sort = sort | ||
| this.refetch() | ||
| } | ||
|
|
||
| render() { | ||
| const { referrals, account } = this.props | ||
|
|
||
| const props = this.props.props ? this.props.props.toJS() : {} | ||
|
|
||
| if (!referrals || !referrals.get('loaded')){ | ||
| return <div style={{ paddingBottom: '1rem' }}> | ||
| <h3>{tt('referrals_jsx.title')}</h3> | ||
| <LoadingIndicator type='circle' /> | ||
| </div> | ||
| } | ||
|
|
||
| let refs = referrals.get('data').toJS() | ||
|
|
||
| let count = 0 | ||
|
|
||
| let items = refs.map(ref => { | ||
| ++count | ||
|
|
||
| const { accounts } = this.props | ||
| let acc = accounts.get(ref.account) | ||
| if (acc) acc = acc.toJS() | ||
|
|
||
| let lastSeen | ||
| if (acc) { | ||
| lastSeen = getLastSeen(acc) | ||
| } | ||
|
|
||
| const golosRewards = Asset(ref.referrer_rewards).plus(Asset(ref.referrer_donate_rewards)) | ||
|
|
||
| const inactive = acc && acc.referral_end_date.startsWith('19') | ||
|
|
||
| const tdClass = inactive && 'inactive' | ||
|
|
||
| return <tr key={count} className={count % 2 == 0 ? '' : 'zebra'}> | ||
| <td className={!inactive ? undefined : 'inactive-link'} title={!inactive ? (acc && (tt('referrals_jsx.end_date') + wrapDate(acc.referral_end_date, this.context))) : tt('referrals_jsx.inactive')}> | ||
| <LinkEx to={'/@' + ref.account}><b> | ||
| {ref.account} | ||
| </b></LinkEx> | ||
| </td> | ||
| {acc && <td className={tdClass} title={tt('referrals_jsx.vs')}> | ||
| {Asset(vestsToSteem(acc.vesting_shares, props) + ' GOLOS').floatString} | ||
| </td>} | ||
| {acc && <td className={tdClass} title={tt('referrals_jsx.posts')}> | ||
| {tt('user_profile.post_count', {count: acc.post_count || 0})} | ||
| </td>} | ||
| <td className={tdClass}> | ||
| <span title={tt('referrals_jsx.rewards')}> | ||
| {' +'} | ||
| {golosRewards.floatString} | ||
| </span> | ||
| </td> | ||
| <td className={tdClass} title={tt('referrals_jsx.joined')}> | ||
| <DateJoinWrapper date={ref.joined} /> | ||
| </td> | ||
| <td className={tdClass} title={tt('referrals_jsx.last')}> | ||
| {lastSeen && <TimeAgoWrapper date={`${lastSeen}`} />} | ||
| </td> | ||
| </tr> | ||
| }) | ||
|
|
||
| let refUrl | ||
| if (account) { | ||
| refUrl = 'https://' + $STM_Config.site_domain + '/welcome?invite=' + account.name | ||
| } | ||
|
|
||
| const next_start_name = referrals.get('next_start_name') | ||
|
|
||
| const sortItems = [ | ||
| { link: '#', onClick: e => { | ||
| this.sortOrder(e, 'by_joined', false) | ||
| }, value: tt('referrals_jsx.by_joined') }, | ||
| { link: '#', onClick: e => { | ||
| this.sortOrder(e, 'by_rewards', true) | ||
| }, value: tt('referrals_jsx.by_rewards') }, | ||
| ] | ||
|
|
||
| let currentSort = tt('referrals_jsx.by_joined') | ||
| if (this.sort === 'by_rewards') { | ||
| currentSort = tt('referrals_jsx.by_rewards') | ||
| } | ||
|
|
||
| return <div className='Referrals' style={{ paddingBottom: '1rem' }}> | ||
| <h3 style={{ display: 'inline-block' }}>{tt('referrals_jsx.title')}</h3> | ||
| <Link to={`/referrers`} className="button float-right"> | ||
| {tt('referrers_jsx.button')} | ||
| </Link> | ||
| <div>{tt('referrals_jsx.desc')}</div> | ||
| {refUrl && <div style={{ display: 'inline-block', fontSize: '85%', marginTop: '1rem', marginBottom: '0.25rem' }}> | ||
| <Icon name="hf/hf5" size="2x" /> | ||
| {' '}{tt('g.referral_link')}{' - '} | ||
| <span style={{border: '1px solid lightgray', padding: '5px', borderRadius: '3px'}}> | ||
| <a target="_blank" href={refUrl}>{refUrl}</a> | ||
| </span> | ||
| <CopyToClipboard text={refUrl}> | ||
| <span style={{cursor: 'pointer'}}> | ||
| <Icon name="copy" size="2x" /> | ||
| </span> | ||
| </CopyToClipboard> | ||
| <span className='float-right'> </span> | ||
| </div>} | ||
| <div className='float-right' style={{ marginTop: '0.75rem '}} > | ||
| <DropdownMenu el='div' items={sortItems} selected={currentSort}> | ||
| <span title={tt('referrals_jsx.sort')} style={{ display: 'block', marginTop: '5px' }}> | ||
| {currentSort} | ||
| <Icon name='dropdown-arrow' size='0_95x' /> | ||
| </span> | ||
| </DropdownMenu> | ||
| </div> | ||
| {items.length ? <table style={{marginTop: '1rem'}}> | ||
| <thead> | ||
| <th>{tt('referrals_jsx.name')}</th> | ||
| <th>{tt('referrals_jsx.vs')}</th> | ||
| <th>{tt('referrals_jsx.posts')}</th> | ||
| <th>{tt('referrals_jsx.rewards')}</th> | ||
| <th>{tt('referrals_jsx.joined')}</th> | ||
| <th>{tt('referrals_jsx.last')}</th> | ||
| </thead> | ||
| <tbody> | ||
| {items} | ||
| </tbody></table> : null} | ||
| {next_start_name ? <div className='load-more' key='load_more'> | ||
| <center><button className='button hollow small' onClick={ | ||
| e => this.props.fetchReferrals(this.props.account, next_start_name, this.sort) | ||
| }>{tt('g.load_more')}</button></center> | ||
| </div> : null} | ||
| </div> | ||
| } | ||
| } | ||
|
|
||
|
|
||
| export default connect( | ||
| state => { | ||
| const referrals = state.global.get('referrals') | ||
| const accounts = state.global.get('accounts') | ||
| const props = state.global.get('props') | ||
|
|
||
| return { | ||
| referrals, | ||
| accounts, | ||
| props, | ||
| } | ||
| }, | ||
| dispatch => ({ | ||
| fetchReferrals: (referrer, start_name, sort) => { | ||
| if (!referrer) return | ||
| dispatch(g.actions.fetchReferrals({ referrer: referrer.name, start_name, sort })) | ||
| }, | ||
| }) | ||
| )(Referrals) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .Referrals { | ||
| .inactive-link { | ||
| a { | ||
| color: gray; | ||
| } | ||
| } | ||
| .inactive { | ||
| opacity: 0.5; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.