Port 911cc14481 to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
master
ThibG
5 years ago
committed by
Thibaut Girka
parent
176f1da267
commit
1e1293e3c8
@ -0,0 +1,130 @@ |
||||
import React, { Fragment } from 'react'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import PropTypes from 'prop-types'; |
||||
import Avatar from 'flavours/glitch/components/avatar'; |
||||
import DisplayName from 'flavours/glitch/components/display_name'; |
||||
import Permalink from 'flavours/glitch/components/permalink'; |
||||
import IconButton from 'flavours/glitch/components/icon_button'; |
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import NotificationOverlayContainer from '../containers/overlay_container'; |
||||
import { HotKeys } from 'react-hotkeys'; |
||||
import Icon from 'flavours/glitch/components/icon'; |
||||
|
||||
const messages = defineMessages({ |
||||
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, |
||||
reject: { id: 'follow_request.reject', defaultMessage: 'Reject' }, |
||||
}); |
||||
|
||||
export default @injectIntl |
||||
class FollowRequest extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
account: ImmutablePropTypes.map.isRequired, |
||||
onAuthorize: PropTypes.func.isRequired, |
||||
onReject: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
notification: ImmutablePropTypes.map.isRequired, |
||||
}; |
||||
|
||||
handleMoveUp = () => { |
||||
const { notification, onMoveUp } = this.props; |
||||
onMoveUp(notification.get('id')); |
||||
} |
||||
|
||||
handleMoveDown = () => { |
||||
const { notification, onMoveDown } = this.props; |
||||
onMoveDown(notification.get('id')); |
||||
} |
||||
|
||||
handleOpen = () => { |
||||
this.handleOpenProfile(); |
||||
} |
||||
|
||||
handleOpenProfile = () => { |
||||
const { notification } = this.props; |
||||
this.context.router.history.push(`/accounts/${notification.getIn(['account', 'id'])}`); |
||||
} |
||||
|
||||
handleMention = e => { |
||||
e.preventDefault(); |
||||
|
||||
const { notification, onMention } = this.props; |
||||
onMention(notification.get('account'), this.context.router.history); |
||||
} |
||||
|
||||
getHandlers () { |
||||
return { |
||||
moveUp: this.handleMoveUp, |
||||
moveDown: this.handleMoveDown, |
||||
open: this.handleOpen, |
||||
openProfile: this.handleOpenProfile, |
||||
mention: this.handleMention, |
||||
reply: this.handleMention, |
||||
}; |
||||
} |
||||
|
||||
render () { |
||||
const { intl, hidden, account, onAuthorize, onReject, notification } = this.props; |
||||
|
||||
if (!account) { |
||||
return <div />; |
||||
} |
||||
|
||||
if (hidden) { |
||||
return ( |
||||
<Fragment> |
||||
{account.get('display_name')} |
||||
{account.get('username')} |
||||
</Fragment> |
||||
); |
||||
} |
||||
|
||||
// Links to the display name.
|
||||
const displayName = account.get('display_name_html') || account.get('username'); |
||||
const link = ( |
||||
<bdi><Permalink |
||||
className='notification__display-name' |
||||
href={account.get('url')} |
||||
title={account.get('acct')} |
||||
to={`/accounts/${account.get('id')}`} |
||||
dangerouslySetInnerHTML={{ __html: displayName }} |
||||
/></bdi> |
||||
); |
||||
|
||||
return ( |
||||
<HotKeys handlers={this.getHandlers()}> |
||||
<div className='notification notification-follow-request focusable' tabIndex='0'> |
||||
<div className='notification__message'> |
||||
<div className='notification__favourite-icon-wrapper'> |
||||
<Icon id='user' fixedWidth /> |
||||
</div> |
||||
|
||||
<FormattedMessage |
||||
id='notification.follow_request' |
||||
defaultMessage='{name} has requested to follow you' |
||||
values={{ name: link }} |
||||
/> |
||||
</div> |
||||
|
||||
<div className='account'> |
||||
<div className='account__wrapper'> |
||||
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}> |
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div> |
||||
<DisplayName account={account} /> |
||||
</Permalink> |
||||
|
||||
<div className='account__relationship'> |
||||
<IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /> |
||||
<IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<NotificationOverlayContainer notification={notification} /> |
||||
</div> |
||||
</HotKeys> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import { connect } from 'react-redux'; |
||||
import { makeGetAccount } from 'flavours/glitch/selectors'; |
||||
import FollowRequest from '../components/follow_request'; |
||||
import { authorizeFollowRequest, rejectFollowRequest } from 'flavours/glitch/actions/accounts'; |
||||
|
||||
const mapDispatchToProps = (dispatch, { account }) => ({ |
||||
onAuthorize () { |
||||
dispatch(authorizeFollowRequest(account.get('id'))); |
||||
}, |
||||
|
||||
onReject () { |
||||
dispatch(rejectFollowRequest(account.get('id'))); |
||||
}, |
||||
}); |
||||
|
||||
export default connect(null, mapDispatchToProps)(FollowRequest); |
||||
Loading…
Reference in new issue