Progress
This commit is contained in:
mgabdev
@@ -1,71 +1,157 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import AccountContainer from '../../containers/account_container';
|
||||
import PanelLayout from './panel_layout';
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { List as ImmutableList } from 'immutable'
|
||||
import classNames from 'classnames/bind'
|
||||
import PanelLayout from './panel_layout'
|
||||
import Icon from '../icon'
|
||||
import Text from '../text'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
const messages = defineMessages({
|
||||
dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
|
||||
title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
|
||||
show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
|
||||
});
|
||||
title: { id: 'about', defaultMessage: 'About' },
|
||||
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
|
||||
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
|
||||
bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
|
||||
memberSince: { id: 'account.member_since', defaultMessage: 'Member since {date}' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state, { account }) => {
|
||||
const identityProofs = !!account ? state.getIn(['identity_proofs', account.get('id')], ImmutableList()) : ImmutableList();
|
||||
return {
|
||||
identityProofs,
|
||||
domain: state.getIn(['meta', 'domain']),
|
||||
};
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
suggestions: state.getIn(['suggestions', 'items']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
fetchSuggestions: () => dispatch(fetchSuggestions()),
|
||||
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class WhoToFollowPanel extends ImmutablePureComponent {
|
||||
class ProfileInfoPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
suggestions: ImmutablePropTypes.list.isRequired,
|
||||
fetchSuggestions: PropTypes.func.isRequired,
|
||||
dismissSuggestion: PropTypes.func.isRequired,
|
||||
identityProofs: ImmutablePropTypes.list,
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.props.fetchSuggestions();
|
||||
componentDidMount() {
|
||||
this.props.fetchSuggestions()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, /* suggestions, */ dismissSuggestion } = this.props;
|
||||
// : testing!!! :
|
||||
const suggestions = [
|
||||
"1",
|
||||
]
|
||||
// if (suggestions.isEmpty()) {
|
||||
// return null;
|
||||
// }
|
||||
const { intl, account, identityProofs } = this.props
|
||||
|
||||
const fields = !account ? null : account.get('fields')
|
||||
const content = !account ? null : { __html: account.get('note_emojified') }
|
||||
const memberSinceDate = !account ? null : intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
|
||||
const hasNote = !!content ? (account.get('note').length > 0 && account.get('note') !== '<p></p>') : false
|
||||
|
||||
const lineClasses = cx({
|
||||
default: 1,
|
||||
flexRow: 1,
|
||||
alignItemsCenter: 1,
|
||||
borderTop1PX: 1,
|
||||
borderColorSecondary: 1,
|
||||
marginTop10PX: 1,
|
||||
paddingTop10PX: 1,
|
||||
})
|
||||
|
||||
const memberLineClasses = cx({
|
||||
default: 1,
|
||||
flexRow: 1,
|
||||
alignItemsCenter: 1,
|
||||
borderTop1PX: hasNote,
|
||||
borderColorSecondary: hasNote,
|
||||
marginTop10PX: hasNote,
|
||||
paddingTop10PX: hasNote,
|
||||
})
|
||||
|
||||
return (
|
||||
<PanelLayout
|
||||
title={intl.formatMessage(messages.title)}
|
||||
footerButtonTitle={intl.formatMessage(messages.show_more)}
|
||||
footerButtonTo='/explore'
|
||||
>
|
||||
<div className={_s.default}>
|
||||
{suggestions && suggestions.map(accountId => (
|
||||
<AccountContainer
|
||||
key={accountId}
|
||||
id={accountId}
|
||||
actionIcon='times'
|
||||
actionTitle={intl.formatMessage(messages.dismissSuggestion)}
|
||||
onActionClick={dismissSuggestion}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<PanelLayout title={intl.formatMessage(messages.title)}>
|
||||
{
|
||||
!!account &&
|
||||
<div className={[_s.default].join(' ')}>
|
||||
{
|
||||
hasNote &&
|
||||
<div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
|
||||
}
|
||||
|
||||
<div className={memberLineClasses}>
|
||||
<Icon id='calendar' width='12px' height='12px' className={_s.fillcolorSecondary} />
|
||||
<Text
|
||||
size='small'
|
||||
color='secondary'
|
||||
className={_s.marginLeft5PX}
|
||||
>
|
||||
{
|
||||
intl.formatMessage(messages.memberSince, {
|
||||
date: memberSinceDate
|
||||
})
|
||||
}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{(fields.size > 0 || identityProofs.size > 0) && (
|
||||
<div className={[_s.default]}>
|
||||
|
||||
{identityProofs.map((proof, i) => (
|
||||
<dl className={lineClasses} key={`profile-identity-proof-${i}`}>
|
||||
<dt
|
||||
className={_s.dangerousContent}
|
||||
dangerouslySetInnerHTML={{ __html: proof.get('provider') }}
|
||||
/>
|
||||
|
||||
{ /* : todo : */ }
|
||||
<dd className='verified'>
|
||||
<a href={proof.get('proof_url')} target='_blank' rel='noopener'>
|
||||
<span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(proof.get('updated_at'), dateFormatOptions) })}>
|
||||
<Icon id='check' className='verified__mark' />
|
||||
</span>
|
||||
</a>
|
||||
<a href={proof.get('profile_url')} target='_blank' rel='noopener'>
|
||||
<span
|
||||
className={_s.dangerousContent}
|
||||
dangerouslySetInnerHTML={{ __html: ' ' + proof.get('provider_username') }}
|
||||
/>
|
||||
</a>
|
||||
</dd>
|
||||
</dl>
|
||||
))}
|
||||
|
||||
{
|
||||
fields.map((pair, i) => (
|
||||
<dl className={lineClasses} key={`profile-field-${i}`}>
|
||||
<dt
|
||||
className={[_s.text, _s.dangerousContent].join('')}
|
||||
dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
|
||||
title={pair.get('name')}
|
||||
/>
|
||||
<dd
|
||||
className={[_s.dangerousContent, _s.marginLeftAuto].join(' ')}
|
||||
title={pair.get('value_plain')}
|
||||
dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
|
||||
/>
|
||||
</dl>
|
||||
))
|
||||
}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
}
|
||||
</PanelLayout>
|
||||
);
|
||||
};
|
||||
};
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user