Merge pull request #1637 from matrix-org/luke/replace-IRC-with-flair
Replace (IRC) with flairpull/21833/head
David Baker
GitHub
commit
a5acc2cfc2
|
|
@ -72,24 +72,19 @@ export default class Flair extends React.Component {
|
|||
this.state = {
|
||||
profiles: [],
|
||||
};
|
||||
this.onRoomStateEvents = this.onRoomStateEvents.bind(this);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._unmounted = true;
|
||||
this.context.matrixClient.removeListener('RoomState.events', this.onRoomStateEvents);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this._unmounted = false;
|
||||
this._generateAvatars();
|
||||
this.context.matrixClient.on('RoomState.events', this.onRoomStateEvents);
|
||||
this._generateAvatars(this.props.groups);
|
||||
}
|
||||
|
||||
onRoomStateEvents(event) {
|
||||
if (event.getType() === 'm.room.related_groups' && FlairStore.groupSupport()) {
|
||||
this._generateAvatars();
|
||||
}
|
||||
componentWillReceiveProps(newProps) {
|
||||
this._generateAvatars(newProps.groups);
|
||||
}
|
||||
|
||||
async _getGroupProfiles(groups) {
|
||||
|
|
@ -106,23 +101,7 @@ export default class Flair extends React.Component {
|
|||
return profiles.filter((p) => p !== null);
|
||||
}
|
||||
|
||||
async _generateAvatars() {
|
||||
let groups = await FlairStore.getPublicisedGroupsCached(this.context.matrixClient, this.props.userId);
|
||||
if (this.props.roomId && this.props.showRelated) {
|
||||
const relatedGroupsEvent = this.context.matrixClient
|
||||
.getRoom(this.props.roomId)
|
||||
.currentState
|
||||
.getStateEvents('m.room.related_groups', '');
|
||||
const relatedGroups = relatedGroupsEvent ?
|
||||
relatedGroupsEvent.getContent().groups || [] : [];
|
||||
if (relatedGroups && relatedGroups.length > 0) {
|
||||
groups = groups.filter((groupId) => {
|
||||
return relatedGroups.includes(groupId);
|
||||
});
|
||||
} else {
|
||||
groups = [];
|
||||
}
|
||||
}
|
||||
async _generateAvatars(groups) {
|
||||
if (!groups || groups.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -148,13 +127,7 @@ export default class Flair extends React.Component {
|
|||
}
|
||||
|
||||
Flair.propTypes = {
|
||||
userId: PropTypes.string,
|
||||
|
||||
// Whether to show only the flair associated with related groups of the given room,
|
||||
// or all flair associated with a user.
|
||||
showRelated: PropTypes.bool,
|
||||
// The room that this flair will be displayed in. Optional. Only applies when showRelated = true.
|
||||
roomId: PropTypes.string,
|
||||
groups: PropTypes.arrayOf(PropTypes.string),
|
||||
};
|
||||
|
||||
// TODO: We've decided that all components should follow this pattern, which means removing withMatrixClient and using
|
||||
|
|
|
|||
|
|
@ -17,50 +17,128 @@
|
|||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {MatrixClient} from 'matrix-js-sdk';
|
||||
import sdk from '../../../index';
|
||||
import Flair from '../elements/Flair.js';
|
||||
import FlairStore from '../../../stores/FlairStore';
|
||||
import { _t } from '../../../languageHandler';
|
||||
|
||||
export default function SenderProfile(props) {
|
||||
const EmojiText = sdk.getComponent('elements.EmojiText');
|
||||
const {mxEvent} = props;
|
||||
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
||||
const {msgtype} = mxEvent.getContent();
|
||||
export default React.createClass({
|
||||
displayName: 'SenderProfile',
|
||||
propTypes: {
|
||||
mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
|
||||
text: PropTypes.string, // Text to show. Defaults to sender name
|
||||
onClick: PropTypes.func,
|
||||
},
|
||||
|
||||
if (msgtype === 'm.emote') {
|
||||
return <span />; // emote message must include the name so don't duplicate it
|
||||
}
|
||||
contextTypes: {
|
||||
matrixClient: PropTypes.instanceOf(MatrixClient),
|
||||
},
|
||||
|
||||
const nameElem = <EmojiText key='name'>{ name || '' }</EmojiText>;
|
||||
getInitialState() {
|
||||
return {
|
||||
userGroups: null,
|
||||
relatedGroups: [],
|
||||
};
|
||||
},
|
||||
|
||||
// Name + flair
|
||||
const nameFlair = <span>
|
||||
<span className="mx_SenderProfile_name">
|
||||
{ nameElem }
|
||||
</span>
|
||||
{ props.enableFlair ?
|
||||
<Flair key='flair'
|
||||
userId={mxEvent.getSender()}
|
||||
roomId={mxEvent.getRoomId()}
|
||||
showRelated={true} />
|
||||
: null
|
||||
componentWillMount() {
|
||||
this.unmounted = false;
|
||||
this._updateRelatedGroups();
|
||||
|
||||
FlairStore.getPublicisedGroupsCached(
|
||||
this.context.matrixClient, this.props.mxEvent.getSender(),
|
||||
).then((userGroups) => {
|
||||
if (this.unmounted) return;
|
||||
this.setState({userGroups});
|
||||
});
|
||||
|
||||
this.context.matrixClient.on('RoomState.events', this.onRoomStateEvents);
|
||||
},
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unmounted = true;
|
||||
this.context.matrixClient.removeListener('RoomState.events', this.onRoomStateEvents);
|
||||
},
|
||||
|
||||
onRoomStateEvents(event) {
|
||||
if (event.getType() === 'm.room.related_groups' &&
|
||||
event.getRoomId() === this.props.mxEvent.getRoomId()
|
||||
) {
|
||||
this._updateRelatedGroups();
|
||||
}
|
||||
</span>;
|
||||
},
|
||||
|
||||
const content = props.text ?
|
||||
<span className="mx_SenderProfile_aux">
|
||||
{ _t(props.text, { senderName: () => nameElem }) }
|
||||
</span> : nameFlair;
|
||||
_updateRelatedGroups() {
|
||||
if (this.unmounted) return;
|
||||
const relatedGroupsEvent = this.context.matrixClient
|
||||
.getRoom(this.props.mxEvent.getRoomId())
|
||||
.currentState
|
||||
.getStateEvents('m.room.related_groups', '');
|
||||
this.setState({
|
||||
relatedGroups: relatedGroupsEvent ?
|
||||
relatedGroupsEvent.getContent().groups || []
|
||||
: [],
|
||||
});
|
||||
},
|
||||
|
||||
return (
|
||||
<div className="mx_SenderProfile" dir="auto" onClick={props.onClick}>
|
||||
{ content }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
_getDisplayedGroups(userGroups, relatedGroups) {
|
||||
let displayedGroups = userGroups || [];
|
||||
if (relatedGroups && relatedGroups.length > 0) {
|
||||
displayedGroups = displayedGroups.filter((groupId) => {
|
||||
return relatedGroups.includes(groupId);
|
||||
});
|
||||
} else {
|
||||
displayedGroups = [];
|
||||
}
|
||||
return displayedGroups;
|
||||
},
|
||||
|
||||
SenderProfile.propTypes = {
|
||||
mxEvent: React.PropTypes.object.isRequired, // event whose sender we're showing
|
||||
text: React.PropTypes.string, // Text to show. Defaults to sender name
|
||||
onClick: React.PropTypes.func,
|
||||
};
|
||||
render() {
|
||||
const EmojiText = sdk.getComponent('elements.EmojiText');
|
||||
const {mxEvent} = this.props;
|
||||
let name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
||||
const {msgtype} = mxEvent.getContent();
|
||||
|
||||
if (msgtype === 'm.emote') {
|
||||
return <span />; // emote message must include the name so don't duplicate it
|
||||
}
|
||||
|
||||
let flair = <div />;
|
||||
if (this.props.enableFlair) {
|
||||
const displayedGroups = this._getDisplayedGroups(
|
||||
this.state.userGroups, this.state.relatedGroups,
|
||||
);
|
||||
|
||||
// Backwards-compatible replacing of "(IRC)" with AS user flair
|
||||
name = displayedGroups.length > 0 ? name.replace(' (IRC)', '') : name;
|
||||
|
||||
flair = <Flair key='flair'
|
||||
userId={mxEvent.getSender()}
|
||||
groups={displayedGroups}
|
||||
/>;
|
||||
}
|
||||
|
||||
const nameElem = <EmojiText key='name'>{ name || '' }</EmojiText>;
|
||||
|
||||
// Name + flair
|
||||
const nameFlair = <span>
|
||||
<span className="mx_SenderProfile_name">
|
||||
{ nameElem }
|
||||
</span>
|
||||
{ flair }
|
||||
</span>;
|
||||
|
||||
const content = this.props.text ?
|
||||
<span className="mx_SenderProfile_aux">
|
||||
{ _t(this.props.text, { senderName: () => nameElem }) }
|
||||
</span> : nameFlair;
|
||||
|
||||
return (
|
||||
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
|
||||
{ content }
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue