OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert MatrixChat to an ES6 Class Component 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-04-22 11:55:03 +01:00
parent dd1f1b3092
commit 89345c9e8b
1 changed files with 179 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

367
src/components/structures/MatrixChat.js
View File

@ -112,15 +112,11 @@ const ONBOARDING_FLOW_STARTERS = [
'view_create_group', 'view_create_group',
]; ];
export default createReactClass({ export default class MatrixChat extends React.PureComponent {
// we export this so that the integration tests can use it :-S static VIEWS = VIEWS; // we export this so that the integration tests can use it :-S
statics: { static displayName = "MatrixChat";
VIEWS: VIEWS,
},
displayName: 'MatrixChat', static propTypes = {
propTypes: {
config: PropTypes.object, config: PropTypes.object,
serverConfig: PropTypes.instanceOf(ValidatedServerConfig), serverConfig: PropTypes.instanceOf(ValidatedServerConfig),
ConferenceHandler: PropTypes.any, ConferenceHandler: PropTypes.any,
@ -150,10 +146,19 @@ export default createReactClass({
// A function that makes a registration URL // A function that makes a registration URL
makeRegistrationUrl: PropTypes.func.isRequired, makeRegistrationUrl: PropTypes.func.isRequired,
}, };
getInitialState: function() { static defaultProps = {
const s = { realQueryParams: {},
startingFragmentQueryParams: {},
config: {},
onTokenLoginCompleted: () => {},
};
constructor(props, context) {
super(props, context);
this.state = {
// the master view we are showing. // the master view we are showing.
view: VIEWS.LOADING, view: VIEWS.LOADING,
@ -194,35 +199,7 @@ export default createReactClass({
resizeNotifier: new ResizeNotifier(), resizeNotifier: new ResizeNotifier(),
showNotifierToolbar: false, showNotifierToolbar: false,
}; };
return s;
},
getDefaultProps: function() {
return {
realQueryParams: {},
startingFragmentQueryParams: {},
config: {},
onTokenLoginCompleted: () => {},
};
},
getFallbackHsUrl: function() {
if (this.props.serverConfig && this.props.serverConfig.isDefault) {
return this.props.config.fallback_hs_url;
} else {
return null;
}
},
getServerProperties() {
let props = this.state.serverConfig;
if (!props) props = this.props.serverConfig; // for unit tests
if (!props) props = SdkConfig.get()["validated_server_config"];
return {serverConfig: props};
},
// TODO: [REACT-WARNING] Move this to constructor
UNSAFE_componentWillMount: function() {
SdkConfig.put(this.props.config); SdkConfig.put(this.props.config);
// Used by _viewRoom before getting state from sync // Used by _viewRoom before getting state from sync
@ -325,9 +302,53 @@ export default createReactClass({
if (SettingsStore.getValue("analyticsOptIn")) { if (SettingsStore.getValue("analyticsOptIn")) {
Analytics.enable(); Analytics.enable();
} }
}, }
_loadSession: function() { // TODO: [REACT-WARNING] Replace with appropriate lifecycle stage
UNSAFE_componentWillUpdate(props, state) {
if (this.shouldTrackPageChange(this.state, state)) {
this.startPageChangeTimer();
}
}
componentDidUpdate(prevProps, prevState) {
if (this.shouldTrackPageChange(prevState, this.state)) {
const durationMs = this.stopPageChangeTimer();
Analytics.trackPageChange(durationMs);
}
if (this.focusComposer) {
dis.dispatch({action: 'focus_composer'});
this.focusComposer = false;
}
}
componentWillUnmount() {
Lifecycle.stopMatrixClient();
dis.unregister(this.dispatcherRef);
this._themeWatcher.stop();
window.removeEventListener("focus", this.onFocus);
window.removeEventListener('resize', this.handleResize);
this.state.resizeNotifier.removeListener("middlePanelResized", this._dispatchTimelineResize);
if (this._accountPasswordTimer !== null) clearTimeout(this._accountPasswordTimer);
}
getFallbackHsUrl() {
if (this.props.serverConfig && this.props.serverConfig.isDefault) {
return this.props.config.fallback_hs_url;
} else {
return null;
}
}
getServerProperties() {
let props = this.state.serverConfig;
if (!props) props = this.props.serverConfig; // for unit tests
if (!props) props = SdkConfig.get()["validated_server_config"];
return {serverConfig: props};
}
_loadSession() {
// the extra Promise.resolve() ensures that synchronous exceptions hit the same codepath as // the extra Promise.resolve() ensures that synchronous exceptions hit the same codepath as
// asynchronous ones. // asynchronous ones.
return Promise.resolve().then(() => { return Promise.resolve().then(() => {
@ -347,36 +368,7 @@ export default createReactClass({
// Note we don't catch errors from this: we catch everything within // Note we don't catch errors from this: we catch everything within
// loadSession as there's logic there to ask the user if they want // loadSession as there's logic there to ask the user if they want
// to try logging out. // to try logging out.
}, }
componentWillUnmount: function() {
Lifecycle.stopMatrixClient();
dis.unregister(this.dispatcherRef);
this._themeWatcher.stop();
window.removeEventListener("focus", this.onFocus);
window.removeEventListener('resize', this.handleResize);
this.state.resizeNotifier.removeListener("middlePanelResized", this._dispatchTimelineResize);
if (this._accountPasswordTimer !== null) clearTimeout(this._accountPasswordTimer);
},
// TODO: [REACT-WARNING] Replace with appropriate lifecycle stage
UNSAFE_componentWillUpdate: function(props, state) {
if (this.shouldTrackPageChange(this.state, state)) {
this.startPageChangeTimer();
}
},
componentDidUpdate: function(prevProps, prevState) {
if (this.shouldTrackPageChange(prevState, this.state)) {
const durationMs = this.stopPageChangeTimer();
Analytics.trackPageChange(durationMs);
}
if (this.focusComposer) {
dis.dispatch({action: 'focus_composer'});
this.focusComposer = false;
}
},
startPageChangeTimer() { startPageChangeTimer() {
// Tor doesn't support performance // Tor doesn't support performance
@ -390,7 +382,7 @@ export default createReactClass({
} }
this._pageChanging = true; this._pageChanging = true;
performance.mark('riot_MatrixChat_page_change_start'); performance.mark('riot_MatrixChat_page_change_start');
}, }
stopPageChangeTimer() { stopPageChangeTimer() {
// Tor doesn't support performance // Tor doesn't support performance
@ -415,15 +407,15 @@ export default createReactClass({
if (!measurement) return null; if (!measurement) return null;
return measurement.duration; return measurement.duration;
}, }
shouldTrackPageChange(prevState, state) { shouldTrackPageChange(prevState, state) {
return prevState.currentRoomId !== state.currentRoomId || return prevState.currentRoomId !== state.currentRoomId ||
prevState.view !== state.view || prevState.view !== state.view ||
prevState.page_type !== state.page_type; prevState.page_type !== state.page_type;
}, }
setStateForNewView: function(state) { setStateForNewView(state) {
if (state.view === undefined) { if (state.view === undefined) {
throw new Error("setStateForNewView with no view!"); throw new Error("setStateForNewView with no view!");
} }
@ -432,9 +424,9 @@ export default createReactClass({
}; };
Object.assign(newState, state); Object.assign(newState, state);
this.setState(newState); this.setState(newState);
}, }
onAction: function(payload) { onAction = (payload) => {
// console.log(`MatrixClientPeg.onAction: ${payload.action}`); // console.log(`MatrixClientPeg.onAction: ${payload.action}`);
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@ -596,8 +588,8 @@ export default createReactClass({
case 'view_create_group': { case 'view_create_group': {
const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog"); const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
Modal.createTrackedDialog('Create Community', '', CreateGroupDialog); Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
break;
} }
break;
case 'view_room_directory': { case 'view_room_directory': {
const RoomDirectory = sdk.getComponent("structures.RoomDirectory"); const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {}, Modal.createTrackedDialog('Room directory', '', RoomDirectory, {},
@ -605,8 +597,8 @@ export default createReactClass({
// View the welcome or home page if we need something to look at // View the welcome or home page if we need something to look at
this._viewSomethingBehindModal(); this._viewSomethingBehindModal();
break;
} }
break;
case 'view_my_groups': case 'view_my_groups':
this._setPage(PageTypes.MyGroups); this._setPage(PageTypes.MyGroups);
this.notifyNewScreen('groups'); this.notifyNewScreen('groups');
@ -648,9 +640,8 @@ export default createReactClass({
dis.dispatch({action: 'view_my_groups'}); dis.dispatch({action: 'view_my_groups'});
} }
break; break;
case 'notifier_enabled': { case 'notifier_enabled':
this.setState({showNotifierToolbar: Notifier.shouldShowToolbar()}); this.setState({showNotifierToolbar: Notifier.shouldShowToolbar()});
}
break; break;
case 'hide_left_panel': case 'hide_left_panel':
this.setState({ this.setState({
@ -739,15 +730,15 @@ export default createReactClass({
}); });
break; break;
} }
}, };
_setPage: function(pageType) { _setPage(pageType) {
this.setState({ this.setState({
page_type: pageType, page_type: pageType,
}); });
}, }
_startRegistration: async function(params) { async _startRegistration(params) {
const newState = { const newState = {
view: VIEWS.REGISTER, view: VIEWS.REGISTER,
}; };
@ -773,10 +764,10 @@ export default createReactClass({
ThemeController.isLogin = true; ThemeController.isLogin = true;
this._themeWatcher.recheck(); this._themeWatcher.recheck();
this.notifyNewScreen('register'); this.notifyNewScreen('register');
}, }
// TODO: Move to RoomViewStore // TODO: Move to RoomViewStore
_viewNextRoom: function(roomIndexDelta) { _viewNextRoom(roomIndexDelta) {
const allRooms = RoomListSorter.mostRecentActivityFirst( const allRooms = RoomListSorter.mostRecentActivityFirst(
MatrixClientPeg.get().getRooms(), MatrixClientPeg.get().getRooms(),
); );
@ -802,10 +793,10 @@ export default createReactClass({
action: 'view_room', action: 'view_room',
room_id: allRooms[roomIndex].roomId, room_id: allRooms[roomIndex].roomId,
}); });
}, }
// TODO: Move to RoomViewStore // TODO: Move to RoomViewStore
_viewIndexedRoom: function(roomIndex) { _viewIndexedRoom(roomIndex) {
const allRooms = RoomListSorter.mostRecentActivityFirst( const allRooms = RoomListSorter.mostRecentActivityFirst(
MatrixClientPeg.get().getRooms(), MatrixClientPeg.get().getRooms(),
); );
@ -815,7 +806,7 @@ export default createReactClass({
room_id: allRooms[roomIndex].roomId, room_id: allRooms[roomIndex].roomId,
}); });
} }
}, }
// switch view to the given room // switch view to the given room
// //
@ -834,7 +825,7 @@ export default createReactClass({
// @param {Object=} roomInfo.oob_data Object of additional data about the room // @param {Object=} roomInfo.oob_data Object of additional data about the room
// that has been passed out-of-band (eg. // that has been passed out-of-band (eg.
// room name and avatar from an invite email) // room name and avatar from an invite email)
_viewRoom: function(roomInfo) { _viewRoom(roomInfo) {
this.focusComposer = true; this.focusComposer = true;
const newState = { const newState = {
@ -895,9 +886,9 @@ export default createReactClass({
this.notifyNewScreen('room/' + presentedId); this.notifyNewScreen('room/' + presentedId);
}); });
}); });
}, }
_viewGroup: function(payload) { _viewGroup(payload) {
const groupId = payload.group_id; const groupId = payload.group_id;
this.setState({ this.setState({
currentGroupId: groupId, currentGroupId: groupId,
@ -905,7 +896,7 @@ export default createReactClass({
}); });
this._setPage(PageTypes.GroupView); this._setPage(PageTypes.GroupView);
this.notifyNewScreen('group/' + groupId); this.notifyNewScreen('group/' + groupId);
}, }
_viewSomethingBehindModal() { _viewSomethingBehindModal() {
if (this.state.view !== VIEWS.LOGGED_IN) { if (this.state.view !== VIEWS.LOGGED_IN) {
@ -915,7 +906,7 @@ export default createReactClass({
if (!this.state.currentGroupId && !this.state.currentRoomId) { if (!this.state.currentGroupId && !this.state.currentRoomId) {
this._viewHome(); this._viewHome();
} }
}, }
_viewWelcome() { _viewWelcome() {
this.setStateForNewView({ this.setStateForNewView({
@ -924,9 +915,9 @@ export default createReactClass({
this.notifyNewScreen('welcome'); this.notifyNewScreen('welcome');
ThemeController.isLogin = true; ThemeController.isLogin = true;
this._themeWatcher.recheck(); this._themeWatcher.recheck();
}, }
_viewHome: function() { _viewHome() {
// The home page requires the "logged in" view, so we'll set that. // The home page requires the "logged in" view, so we'll set that.
this.setStateForNewView({ this.setStateForNewView({
view: VIEWS.LOGGED_IN, view: VIEWS.LOGGED_IN,
@ -935,9 +926,9 @@ export default createReactClass({
this.notifyNewScreen('home'); this.notifyNewScreen('home');
ThemeController.isLogin = false; ThemeController.isLogin = false;
this._themeWatcher.recheck(); this._themeWatcher.recheck();
}, }
_viewUser: function(userId, subAction) { _viewUser(userId, subAction) {
// Wait for the first sync so that `getRoom` gives us a room object if it's // Wait for the first sync so that `getRoom` gives us a room object if it's
// in the sync response // in the sync response
const waitForSync = this.firstSyncPromise ? const waitForSync = this.firstSyncPromise ?
@ -951,9 +942,9 @@ export default createReactClass({
this.setState({currentUserId: userId}); this.setState({currentUserId: userId});
this._setPage(PageTypes.UserView); this._setPage(PageTypes.UserView);
}); });
}, }
_setMxId: function(payload) { _setMxId(payload) {
const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog'); const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, { const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, {
homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(), homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
@ -981,9 +972,9 @@ export default createReactClass({
close(); close();
}, },
}).close; }).close;
}, }
_createRoom: async function() { async _createRoom() {
const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog'); const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog');
const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog); const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog);
@ -991,9 +982,9 @@ export default createReactClass({
if (shouldCreate) { if (shouldCreate) {
createRoom(opts); createRoom(opts);
} }
}, }
_chatCreateOrReuse: function(userId) { _chatCreateOrReuse(userId) {
// Use a deferred action to reshow the dialog once the user has registered // Use a deferred action to reshow the dialog once the user has registered
if (MatrixClientPeg.get().isGuest()) { if (MatrixClientPeg.get().isGuest()) {
// No point in making 2 DMs with welcome bot. This assumes view_set_mxid will // No point in making 2 DMs with welcome bot. This assumes view_set_mxid will
@ -1039,9 +1030,9 @@ export default createReactClass({
user_id: userId, user_id: userId,
}); });
} }
}, }
_leaveRoomWarnings: function(roomId) { _leaveRoomWarnings(roomId) {
const roomToLeave = MatrixClientPeg.get().getRoom(roomId); const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
// Show a warning if there are additional complications. // Show a warning if there are additional complications.
const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', ''); const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', '');
@ -1058,9 +1049,9 @@ export default createReactClass({
} }
} }
return warnings; return warnings;
}, }
_leaveRoom: function(roomId) { _leaveRoom(roomId) {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const roomToLeave = MatrixClientPeg.get().getRoom(roomId); const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
@ -1071,7 +1062,7 @@ export default createReactClass({
description: ( description: (
<span> <span>
{ _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) } { _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
{ warnings } { warnings }
</span> </span>
), ),
button: _t("Leave"), button: _t("Leave"),
@ -1124,7 +1115,7 @@ export default createReactClass({
} }
}, },
}); });
}, }
/** /**
* Starts a chat with the welcome user, if the user doesn't already have one * Starts a chat with the welcome user, if the user doesn't already have one
@ -1179,12 +1170,12 @@ export default createReactClass({
return roomId; return roomId;
} }
return null; return null;
}, }
/** /**
* Called when a new logged in session has started * Called when a new logged in session has started
*/ */
_onLoggedIn: async function() { async _onLoggedIn() {
ThemeController.isLogin = false; ThemeController.isLogin = false;
this.setStateForNewView({ view: VIEWS.LOGGED_IN }); this.setStateForNewView({ view: VIEWS.LOGGED_IN });
// If a specific screen is set to be shown after login, show that above // If a specific screen is set to be shown after login, show that above
@ -1215,9 +1206,9 @@ export default createReactClass({
} }
StorageManager.tryPersistStorage(); StorageManager.tryPersistStorage();
}, }
_showScreenAfterLogin: function() { _showScreenAfterLogin() {
// If screenAfterLogin is set, use that, then null it so that a second login will // If screenAfterLogin is set, use that, then null it so that a second login will
// result in view_home_page, _user_settings or _room_directory // result in view_home_page, _user_settings or _room_directory
if (this._screenAfterLogin && this._screenAfterLogin.screen) { if (this._screenAfterLogin && this._screenAfterLogin.screen) {
@ -1240,19 +1231,19 @@ export default createReactClass({
}); });
} }
} }
}, }
_viewLastRoom: function() { _viewLastRoom() {
dis.dispatch({ dis.dispatch({
action: 'view_room', action: 'view_room',
room_id: localStorage.getItem('mx_last_room_id'), room_id: localStorage.getItem('mx_last_room_id'),
}); });
}, }
/** /**
* Called when the session is logged out * Called when the session is logged out
*/ */
_onLoggedOut: function() { _onLoggedOut() {
this.notifyNewScreen('login'); this.notifyNewScreen('login');
this.setStateForNewView({ this.setStateForNewView({
view: VIEWS.LOGIN, view: VIEWS.LOGIN,
@ -1264,12 +1255,12 @@ export default createReactClass({
this._setPageSubtitle(); this._setPageSubtitle();
ThemeController.isLogin = true; ThemeController.isLogin = true;
this._themeWatcher.recheck(); this._themeWatcher.recheck();
}, }
/** /**
* Called when the session is softly logged out * Called when the session is softly logged out
*/ */
_onSoftLogout: function() { _onSoftLogout() {
this.notifyNewScreen('soft_logout'); this.notifyNewScreen('soft_logout');
this.setStateForNewView({ this.setStateForNewView({
view: VIEWS.SOFT_LOGOUT, view: VIEWS.SOFT_LOGOUT,
@ -1279,7 +1270,7 @@ export default createReactClass({
}); });
this.subTitleStatus = ''; this.subTitleStatus = '';
this._setPageSubtitle(); this._setPageSubtitle();
}, }
/** /**
* Called just before the matrix client is started * Called just before the matrix client is started
@ -1383,10 +1374,10 @@ export default createReactClass({
title: _t('Terms and Conditions'), title: _t('Terms and Conditions'),
description: <div> description: <div>
<p> { _t( <p> { _t(
'To continue using the %(homeserverDomain)s homeserver ' + 'To continue using the %(homeserverDomain)s homeserver ' +
'you must review and agree to our terms and conditions.', 'you must review and agree to our terms and conditions.',
{ homeserverDomain: cli.getDomain() }, { homeserverDomain: cli.getDomain() },
) } ) }
</p> </p>
</div>, </div>,
button: _t('Review terms and conditions'), button: _t('Review terms and conditions'),
@ -1533,14 +1524,14 @@ export default createReactClass({
// A later sync can/will correct the tint to be the right value for the user // A later sync can/will correct the tint to be the right value for the user
const colorScheme = SettingsStore.getValue("roomColor"); const colorScheme = SettingsStore.getValue("roomColor");
Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color); Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
}, }
/** /**
* Called shortly after the matrix client has started. Useful for * Called shortly after the matrix client has started. Useful for
* setting up anything that requires the client to be started. * setting up anything that requires the client to be started.
* @private * @private
*/ */
_onClientStarted: function() { _onClientStarted() {
const cli = MatrixClientPeg.get(); const cli = MatrixClientPeg.get();
if (cli.isCryptoEnabled()) { if (cli.isCryptoEnabled()) {
@ -1559,9 +1550,9 @@ export default createReactClass({
!SettingsStore.getValue("feature_cross_signing"), !SettingsStore.getValue("feature_cross_signing"),
); );
} }
}, }
showScreen: function(screen, params) { showScreen(screen, params) {
if (screen == 'register') { if (screen == 'register') {
dis.dispatch({ dis.dispatch({
action: 'start_registration', action: 'start_registration',
@ -1706,21 +1697,21 @@ export default createReactClass({
} else { } else {
console.info("Ignoring showScreen for '%s'", screen); console.info("Ignoring showScreen for '%s'", screen);
} }
}, }
notifyNewScreen: function(screen) { notifyNewScreen(screen) {
if (this.props.onNewScreen) { if (this.props.onNewScreen) {
this.props.onNewScreen(screen); this.props.onNewScreen(screen);
} }
this._setPageSubtitle(); this._setPageSubtitle();
}, }
onAliasClick: function(event, alias) { onAliasClick(event, alias) {
event.preventDefault(); event.preventDefault();
dis.dispatch({action: 'view_room', room_alias: alias}); dis.dispatch({action: 'view_room', room_alias: alias});
}, }
onUserClick: function(event, userId) { onUserClick(event, userId) {
event.preventDefault(); event.preventDefault();
const member = new Matrix.RoomMember(null, userId); const member = new Matrix.RoomMember(null, userId);
@ -1729,22 +1720,22 @@ export default createReactClass({
action: 'view_user', action: 'view_user',
member: member, member: member,
}); });
}, }
onGroupClick: function(event, groupId) { onGroupClick(event, groupId) {
event.preventDefault(); event.preventDefault();
dis.dispatch({action: 'view_group', group_id: groupId}); dis.dispatch({action: 'view_group', group_id: groupId});
}, }
onLogoutClick: function(event) { onLogoutClick(event) {
dis.dispatch({ dis.dispatch({
action: 'logout', action: 'logout',
}); });
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
}, }
handleResize: function(e) { handleResize = (e) => {
const hideLhsThreshold = 1000; const hideLhsThreshold = 1000;
const showLhsThreshold = 1000; const showLhsThreshold = 1000;
@ -1757,49 +1748,49 @@ export default createReactClass({
this.state.resizeNotifier.notifyWindowResized(); this.state.resizeNotifier.notifyWindowResized();
this._windowWidth = window.innerWidth; this._windowWidth = window.innerWidth;
}, };
_dispatchTimelineResize() { _dispatchTimelineResize() {
dis.dispatch({ action: 'timeline_resize' }); dis.dispatch({ action: 'timeline_resize' });
}, }
onRoomCreated: function(roomId) { onRoomCreated(roomId) {
dis.dispatch({ dis.dispatch({
action: "view_room", action: "view_room",
room_id: roomId, room_id: roomId,
}); });
}, }
onRegisterClick: function() { onRegisterClick = () => {
this.showScreen("register"); this.showScreen("register");
}, };
onLoginClick: function() { onLoginClick = () => {
this.showScreen("login"); this.showScreen("login");
}, };
onForgotPasswordClick: function() { onForgotPasswordClick = () => {
this.showScreen("forgot_password"); this.showScreen("forgot_password");
}, };
onRegisterFlowComplete: function(credentials, password) { onRegisterFlowComplete = (credentials, password) => {
return this.onUserCompletedLoginFlow(credentials, password); return this.onUserCompletedLoginFlow(credentials, password);
}, };
// returns a promise which resolves to the new MatrixClient // returns a promise which resolves to the new MatrixClient
onRegistered: function(credentials) { onRegistered(credentials) {
return Lifecycle.setLoggedIn(credentials); return Lifecycle.setLoggedIn(credentials);
}, }
onFinishPostRegistration: function() { onFinishPostRegistration = () => {
// Don't confuse this with "PageType" which is the middle window to show // Don't confuse this with "PageType" which is the middle window to show
this.setState({ this.setState({
view: VIEWS.LOGGED_IN, view: VIEWS.LOGGED_IN,
}); });
this.showScreen("settings"); this.showScreen("settings");
}, };
onVersion: function(current, latest, releaseNotes) { onVersion(current, latest, releaseNotes) {
this.setState({ this.setState({
version: current, version: current,
newVersion: latest, newVersion: latest,
@ -1807,9 +1798,9 @@ export default createReactClass({
newVersionReleaseNotes: releaseNotes, newVersionReleaseNotes: releaseNotes,
checkingForUpdate: null, checkingForUpdate: null,
}); });
}, }
onSendEvent: function(roomId, event) { onSendEvent(roomId, event) {
const cli = MatrixClientPeg.get(); const cli = MatrixClientPeg.get();
if (!cli) { if (!cli) {
dis.dispatch({action: 'message_send_failed'}); dis.dispatch({action: 'message_send_failed'});
@ -1821,9 +1812,9 @@ export default createReactClass({
}, (err) => { }, (err) => {
dis.dispatch({action: 'message_send_failed'}); dis.dispatch({action: 'message_send_failed'});
}); });
}, }
_setPageSubtitle: function(subtitle='') { _setPageSubtitle(subtitle='') {
if (this.state.currentRoomId) { if (this.state.currentRoomId) {
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
const room = client && client.getRoom(this.state.currentRoomId); const room = client && client.getRoom(this.state.currentRoomId);
@ -1834,9 +1825,9 @@ export default createReactClass({
subtitle = `${this.subTitleStatus} ${subtitle}`; subtitle = `${this.subTitleStatus} ${subtitle}`;
} }
document.title = `${SdkConfig.get().brand || 'Riot'} ${subtitle}`; document.title = `${SdkConfig.get().brand || 'Riot'} ${subtitle}`;
}, }
updateStatusIndicator: function(state, prevState) { updateStatusIndicator(state, prevState) {
const notifCount = countRoomsWithNotif(MatrixClientPeg.get().getRooms()).count; const notifCount = countRoomsWithNotif(MatrixClientPeg.get().getRooms()).count;
if (PlatformPeg.get()) { if (PlatformPeg.get()) {
@ -1853,28 +1844,28 @@ export default createReactClass({
} }
this._setPageSubtitle(); this._setPageSubtitle();
}, }
onCloseAllSettings() { onCloseAllSettings() {
dis.dispatch({ action: 'close_settings' }); dis.dispatch({ action: 'close_settings' });
}, }
onServerConfigChange(config) { onServerConfigChange = (config) => {
this.setState({serverConfig: config}); this.setState({serverConfig: config});
}, };
_makeRegistrationUrl: function(params) { _makeRegistrationUrl = (params) => {
if (this.props.startingFragmentQueryParams.referrer) { if (this.props.startingFragmentQueryParams.referrer) {
params.referrer = this.props.startingFragmentQueryParams.referrer; params.referrer = this.props.startingFragmentQueryParams.referrer;
} }
return this.props.makeRegistrationUrl(params); return this.props.makeRegistrationUrl(params);
}, };
_collectLoggedInView: function(ref) { _collectLoggedInView = (ref) => {
this._loggedInView = ref; this._loggedInView = ref;
}, };
async onUserCompletedLoginFlow(credentials, password) { onUserCompletedLoginFlow = async (credentials, password) => {
this._accountPassword = password; this._accountPassword = password;
// self-destruct the password after 5mins // self-destruct the password after 5mins
if (this._accountPasswordTimer !== null) clearTimeout(this._accountPasswordTimer); if (this._accountPasswordTimer !== null) clearTimeout(this._accountPasswordTimer);
@ -1937,14 +1928,14 @@ export default createReactClass({
this.setState({ pendingInitialSync: false }); this.setState({ pendingInitialSync: false });
return setLoggedInPromise; return setLoggedInPromise;
}, };
// complete security / e2e setup has finished // complete security / e2e setup has finished
onCompleteSecurityE2eSetupFinished() { onCompleteSecurityE2eSetupFinished = () => {
this._onLoggedIn(); this._onLoggedIn();
}, };
render: function() { render() {
// console.log(`Rendering MatrixChat with view ${this.state.view}`); // console.log(`Rendering MatrixChat with view ${this.state.view}`);
let view; let view;
@ -1994,13 +1985,13 @@ export default createReactClass({
const LoggedInView = sdk.getComponent('structures.LoggedInView'); const LoggedInView = sdk.getComponent('structures.LoggedInView');
view = ( view = (
<LoggedInView ref={this._collectLoggedInView} matrixClient={MatrixClientPeg.get()} <LoggedInView ref={this._collectLoggedInView} matrixClient={MatrixClientPeg.get()}
onRoomCreated={this.onRoomCreated} onRoomCreated={this.onRoomCreated}
onCloseAllSettings={this.onCloseAllSettings} onCloseAllSettings={this.onCloseAllSettings}
onRegistered={this.onRegistered} onRegistered={this.onRegistered}
currentRoomId={this.state.currentRoomId} currentRoomId={this.state.currentRoomId}
showCookieBar={this.state.showCookieBar} showCookieBar={this.state.showCookieBar}
{...this.props} {...this.props}
{...this.state} {...this.state}
/> />
); );
} else { } else {
@ -2082,5 +2073,5 @@ export default createReactClass({
return <ErrorBoundary> return <ErrorBoundary>
{view} {view}
</ErrorBoundary>; </ErrorBoundary>;
}, }
}); }