2017-12-10 15:50:41 +03:00
|
|
|
/*
|
|
|
|
Copyright 2017 New Vector Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import sdk from '../../../index';
|
2017-12-15 21:39:01 +03:00
|
|
|
import {_t} from '../../../languageHandler';
|
2017-12-10 15:50:41 +03:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
2018-01-10 15:06:24 +03:00
|
|
|
import {wantsDateSeparator} from '../../../DateUtils';
|
2017-12-15 21:39:01 +03:00
|
|
|
import {MatrixEvent} from 'matrix-js-sdk';
|
2018-01-22 19:34:47 +03:00
|
|
|
import {makeUserPermalink} from "../../../matrix-to";
|
2018-02-10 14:19:43 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-02-10 18:45:42 +03:00
|
|
|
// This component does no cycle detection, simply because the only way to make such a cycle
|
|
|
|
// would be to craft event_id's, using a custom homeserver; even then the impact would be low
|
|
|
|
// as each event being loaded (after the first) is triggered by an explicit user action.
|
2018-02-10 15:38:25 +03:00
|
|
|
export default class Reply extends React.Component {
|
2017-12-17 23:20:45 +03:00
|
|
|
static propTypes = {
|
2017-12-15 21:39:01 +03:00
|
|
|
// The parent event
|
|
|
|
parentEv: PropTypes.instanceOf(MatrixEvent),
|
2018-02-10 14:19:43 +03:00
|
|
|
|
|
|
|
onWidgetLoad: PropTypes.func.isRequired,
|
2017-12-17 23:20:45 +03:00
|
|
|
};
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2017-12-17 23:20:45 +03:00
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
this.state = {
|
|
|
|
// The loaded events to be rendered as linear-replies
|
|
|
|
events: [],
|
|
|
|
|
|
|
|
// The latest loaded event which has not yet been shown
|
|
|
|
loadedEv: null,
|
|
|
|
// Whether the component is still loading more events
|
|
|
|
loading: true,
|
|
|
|
|
|
|
|
// Whether as error was encountered fetching a replied to event.
|
2018-02-10 18:45:42 +03:00
|
|
|
err: false,
|
2017-12-10 15:50:41 +03:00
|
|
|
};
|
2017-12-18 22:28:01 +03:00
|
|
|
|
2018-01-10 14:51:23 +03:00
|
|
|
this.onQuoteClick = this.onQuoteClick.bind(this);
|
2017-12-17 23:20:45 +03:00
|
|
|
}
|
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
componentWillMount() {
|
|
|
|
this.room = this.getRoom(this.props.parentEv.getRoomId());
|
|
|
|
this.initialize();
|
2017-12-17 23:20:45 +03:00
|
|
|
}
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
async initialize() {
|
|
|
|
const {parentEv} = this.props;
|
2018-02-10 15:38:25 +03:00
|
|
|
const inReplyTo = Reply.getInReplyTo(parentEv);
|
2018-01-22 19:34:47 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
const ev = await this.getEvent(this.room, inReplyTo['event_id']);
|
2018-02-10 18:45:42 +03:00
|
|
|
if (ev) {
|
|
|
|
this.setState({
|
|
|
|
events: [ev],
|
|
|
|
}, this.loadNextEvent);
|
|
|
|
} else {
|
|
|
|
this.setState({err: true});
|
|
|
|
}
|
2018-01-22 19:34:47 +03:00
|
|
|
}
|
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
async loadNextEvent() {
|
|
|
|
this.props.onWidgetLoad();
|
|
|
|
const ev = this.state.events[0];
|
2018-02-10 15:38:25 +03:00
|
|
|
const inReplyTo = Reply.getInReplyTo(ev);
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
if (!inReplyTo) {
|
|
|
|
this.setState({
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
const loadedEv = await this.getEvent(this.room, inReplyTo['event_id']);
|
2018-02-10 18:45:42 +03:00
|
|
|
if (loadedEv) {
|
|
|
|
this.setState({loadedEv});
|
|
|
|
} else {
|
|
|
|
this.setState({err: true});
|
|
|
|
}
|
2017-12-17 23:20:45 +03:00
|
|
|
}
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-01-22 19:34:47 +03:00
|
|
|
getRoom(id) {
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
if (id[0] === '!') return cli.getRoom(id);
|
|
|
|
|
|
|
|
return cli.getRooms().find((r) => {
|
|
|
|
return r.getAliases().includes(id);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
async getEvent(room, eventId) {
|
2018-01-22 19:34:47 +03:00
|
|
|
const event = room.findEventById(eventId);
|
2018-02-10 14:19:43 +03:00
|
|
|
if (event) return event;
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-02-10 18:45:42 +03:00
|
|
|
try {
|
|
|
|
await MatrixClientPeg.get().getEventTimeline(room.getUnfilteredTimelineSet(), eventId);
|
|
|
|
} catch (e) {
|
|
|
|
return;
|
|
|
|
}
|
2018-02-10 14:19:43 +03:00
|
|
|
return room.findEventById(eventId);
|
2018-01-22 19:34:47 +03:00
|
|
|
}
|
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
onQuoteClick() {
|
|
|
|
const events = [this.state.loadedEv].concat(this.state.events);
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
loadedEv: null,
|
|
|
|
events,
|
|
|
|
}, this.loadNextEvent);
|
2018-01-22 19:34:47 +03:00
|
|
|
}
|
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
static getInReplyTo(ev) {
|
|
|
|
if (ev.isRedacted()) return;
|
2018-01-22 19:34:47 +03:00
|
|
|
|
2018-02-10 15:31:22 +03:00
|
|
|
const mRelatesTo = ev.getWireContent()['m.relates_to'];
|
2018-02-10 14:19:43 +03:00
|
|
|
if (mRelatesTo) {
|
2018-02-10 15:31:22 +03:00
|
|
|
const mInReplyTo = mRelatesTo['m.in_reply_to'];
|
|
|
|
if ('event_id' in mInReplyTo) return mInReplyTo;
|
2018-01-22 19:41:32 +03:00
|
|
|
}
|
2018-02-10 14:19:43 +03:00
|
|
|
}
|
2018-01-22 19:34:47 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
static getRelationship(ev) {
|
|
|
|
return {
|
|
|
|
'm.relates_to': {
|
|
|
|
'm.in_reply_to': {
|
|
|
|
'event_id': ev.getId(),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2017-12-17 23:20:45 +03:00
|
|
|
}
|
2017-12-10 15:50:41 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
static getQuote(parentEv, onWidgetLoad) {
|
2018-02-10 15:38:25 +03:00
|
|
|
if (!SettingsStore.isFeatureEnabled("feature_rich_quoting") || !Reply.getInReplyTo(parentEv)) return null;
|
|
|
|
return <Reply parentEv={parentEv} onWidgetLoad={onWidgetLoad} />;
|
2017-12-18 22:28:01 +03:00
|
|
|
}
|
|
|
|
|
2017-12-17 23:20:45 +03:00
|
|
|
render() {
|
2018-02-10 14:19:43 +03:00
|
|
|
let header = null;
|
2018-02-10 18:45:42 +03:00
|
|
|
|
|
|
|
if (this.state.err) {
|
|
|
|
header = <blockquote className="mx_Reply mx_Reply_error">
|
|
|
|
{
|
|
|
|
_t('Unable to load event that was replied to, ' +
|
|
|
|
'it either does not exist or you do not have permission to view it.')
|
|
|
|
}
|
|
|
|
</blockquote>;
|
|
|
|
} else if (this.state.loadedEv) {
|
2018-02-10 14:19:43 +03:00
|
|
|
const ev = this.state.loadedEv;
|
|
|
|
const Pill = sdk.getComponent('elements.Pill');
|
|
|
|
const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
|
2018-02-10 15:38:25 +03:00
|
|
|
header = <blockquote className="mx_Reply">
|
2018-02-10 14:19:43 +03:00
|
|
|
{
|
|
|
|
_t('<a>In reply to</a> <pill>', {}, {
|
2018-02-10 15:38:25 +03:00
|
|
|
'a': (sub) => <a onClick={this.onQuoteClick} className="mx_Reply_show">{ sub }</a>,
|
2018-02-10 14:19:43 +03:00
|
|
|
'pill': <Pill type={Pill.TYPE_USER_MENTION} room={room}
|
|
|
|
url={makeUserPermalink(ev.getSender())} shouldShowPillAvatar={true} />,
|
|
|
|
})
|
2017-12-18 22:28:01 +03:00
|
|
|
}
|
2018-02-10 14:19:43 +03:00
|
|
|
</blockquote>;
|
|
|
|
} else if (this.state.loading) {
|
2018-02-10 18:45:42 +03:00
|
|
|
const Spinner = sdk.getComponent("elements.Spinner");
|
2018-02-10 18:47:32 +03:00
|
|
|
header = <Spinner w={16} h={16} />;
|
2018-02-10 14:19:43 +03:00
|
|
|
}
|
2017-12-18 22:28:01 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
const EventTile = sdk.getComponent('views.rooms.EventTile');
|
|
|
|
const DateSeparator = sdk.getComponent('messages.DateSeparator');
|
|
|
|
const evTiles = this.state.events.map((ev) => {
|
|
|
|
let dateSep = null;
|
2017-12-15 21:39:01 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) {
|
|
|
|
dateSep = <a href={this.props.url}><DateSeparator ts={ev.getTs()} /></a>;
|
|
|
|
}
|
|
|
|
|
2018-02-10 15:38:25 +03:00
|
|
|
return <blockquote className="mx_Reply" key={ev.getId()}>
|
2018-02-10 14:19:43 +03:00
|
|
|
{ dateSep }
|
2018-02-10 15:41:31 +03:00
|
|
|
<EventTile mxEvent={ev} tileShape="reply" onWidgetLoad={this.props.onWidgetLoad} />
|
2018-02-10 14:19:43 +03:00
|
|
|
</blockquote>;
|
|
|
|
});
|
2017-12-10 15:54:19 +03:00
|
|
|
|
2018-02-10 14:19:43 +03:00
|
|
|
return <div>
|
|
|
|
<div>{ header }</div>
|
|
|
|
<div>{ evTiles }</div>
|
|
|
|
</div>;
|
2017-12-17 23:20:45 +03:00
|
|
|
}
|
|
|
|
}
|