mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 20:38:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Convert RoomViewStore and ActiveRoomObserver to typescript

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-21 10:14:12 +01:00
parent 4de1645ac7
commit 8cacf1ff97
3 changed files with 95 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/@types/global.d.ts vendored
View file

@ -24,6 +24,7 @@ import { RoomListStoreClass } from "../stores/room-list/RoomListStore";
import { PlatformPeg } from "../PlatformPeg"; import { PlatformPeg } from "../PlatformPeg";
import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore"; import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
import {IntegrationManagers} from "../integrations/IntegrationManagers"; import {IntegrationManagers} from "../integrations/IntegrationManagers";
import {ActiveRoomObserver} from "../ActiveRoomObserver";
declare global { declare global {
interface Window { interface Window {
@ -39,6 +40,8 @@ declare global {
mx_RebrandListener: RebrandListener; mx_RebrandListener: RebrandListener;
mx_RoomListStore: RoomListStoreClass; mx_RoomListStore: RoomListStoreClass;
mx_RoomListLayoutStore: RoomListLayoutStore; mx_RoomListLayoutStore: RoomListLayoutStore;
mx_ActiveRoomObserver: ActiveRoomObserver;
mxPlatformPeg: PlatformPeg; mxPlatformPeg: PlatformPeg;
mxIntegrationManagers: typeof IntegrationManagers; mxIntegrationManagers: typeof IntegrationManagers;
} }

52
src/ActiveRoomObserver.js → src/ActiveRoomObserver.ts
View file

@ -16,6 +16,8 @@ limitations under the License.
import RoomViewStore from './stores/RoomViewStore'; import RoomViewStore from './stores/RoomViewStore';
type Listener = (isActive: boolean) => void;
/** /**
* Consumes changes from the RoomViewStore and notifies specific things * Consumes changes from the RoomViewStore and notifies specific things
* about when the active room changes. Unlike listening for RoomViewStore * about when the active room changes. Unlike listening for RoomViewStore
@ -25,57 +27,57 @@ import RoomViewStore from './stores/RoomViewStore';
* TODO: If we introduce an observer for something else, factor out * TODO: If we introduce an observer for something else, factor out
* the adding / removing of listeners & emitting into a common class. * the adding / removing of listeners & emitting into a common class.
*/ */
class ActiveRoomObserver { export class ActiveRoomObserver {
constructor() { private listeners: {[key: string]: Listener[]} = {};
this._listeners = {}; // key=roomId, value=function(isActive:boolean) private _activeRoomId = RoomViewStore.getRoomId(); // TODO
private readonly roomStoreToken: string;
this._activeRoomId = RoomViewStore.getRoomId(); constructor() {
// TODO: We could self-destruct when the last listener goes away, or at least // TODO: We could self-destruct when the last listener goes away, or at least stop listening.
// stop listening. this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate.bind(this));
} }
get activeRoomId(): string { public get activeRoomId(): string {
return this._activeRoomId; return this._activeRoomId;
} }
addListener(roomId, listener) { public addListener(roomId, listener) {
if (!this._listeners[roomId]) this._listeners[roomId] = []; if (!this.listeners[roomId]) this.listeners[roomId] = [];
this._listeners[roomId].push(listener); this.listeners[roomId].push(listener);
} }
removeListener(roomId, listener) { public removeListener(roomId, listener) {
if (this._listeners[roomId]) { if (this.listeners[roomId]) {
const i = this._listeners[roomId].indexOf(listener); const i = this.listeners[roomId].indexOf(listener);
if (i > -1) { if (i > -1) {
this._listeners[roomId].splice(i, 1); this.listeners[roomId].splice(i, 1);
} }
} else { } else {
console.warn("Unregistering unrecognised listener (roomId=" + roomId + ")"); console.warn("Unregistering unrecognised listener (roomId=" + roomId + ")");
} }
} }
_emit(roomId, isActive: boolean) { private emit(roomId, isActive: boolean) {
if (!this._listeners[roomId]) return; if (!this.listeners[roomId]) return;
for (const l of this._listeners[roomId]) { for (const l of this.listeners[roomId]) {
l.call(null, isActive); l.call(null, isActive);
} }
} }
_onRoomViewStoreUpdate() { private onRoomViewStoreUpdate = () => {
// emit for the old room ID // emit for the old room ID
if (this._activeRoomId) this._emit(this._activeRoomId, false); if (this._activeRoomId) this.emit(this._activeRoomId, false);
// update our cache // update our cache
this._activeRoomId = RoomViewStore.getRoomId(); this._activeRoomId = RoomViewStore.getRoomId();
// and emit for the new one // and emit for the new one
if (this._activeRoomId) this._emit(this._activeRoomId, true); if (this._activeRoomId) this.emit(this._activeRoomId, true);
} };
} }
if (global.mx_ActiveRoomObserver === undefined) { if (window.mx_ActiveRoomObserver === undefined) {
global.mx_ActiveRoomObserver = new ActiveRoomObserver(); window.mx_ActiveRoomObserver = new ActiveRoomObserver();
} }
export default global.mx_ActiveRoomObserver; export default window.mx_ActiveRoomObserver;

122
src/stores/RoomViewStore.js → src/stores/RoomViewStore.tsx
View file

@ -15,13 +15,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import dis from '../dispatcher/dispatcher';
import React from "react";
import {Store} from 'flux/utils'; import {Store} from 'flux/utils';
import dis from '../dispatcher/dispatcher';
import {MatrixClientPeg} from '../MatrixClientPeg'; import {MatrixClientPeg} from '../MatrixClientPeg';
import * as sdk from '../index'; import * as sdk from '../index';
import Modal from '../Modal'; import Modal from '../Modal';
import { _t } from '../languageHandler'; import { _t } from '../languageHandler';
import { getCachedRoomIDForAlias, storeRoomAliasInCache } from '../RoomAliasCache'; import { getCachedRoomIDForAlias, storeRoomAliasInCache } from '../RoomAliasCache';
import {ActionPayload} from "../dispatcher/payloads";
const INITIAL_STATE = { const INITIAL_STATE = {
// Whether we're joining the currently viewed room (see isJoining()) // Whether we're joining the currently viewed room (see isJoining())
@ -33,6 +37,7 @@ const INITIAL_STATE = {
// The event to scroll to when the room is first viewed // The event to scroll to when the room is first viewed
initialEventId: null, initialEventId: null,
initialEventPixelOffset: null,
// Whether to highlight the initial event // Whether to highlight the initial event
isInitialEventHighlighted: false, isInitialEventHighlighted: false,
@ -46,6 +51,10 @@ const INITIAL_STATE = {
forwardingEvent: null, forwardingEvent: null,
quotingEvent: null, quotingEvent: null,
replyingToEvent: null,
shouldPeek: false,
}; };
/** /**
@ -53,21 +62,20 @@ const INITIAL_STATE = {
* with a subset of the js-sdk. * with a subset of the js-sdk.
* ``` * ```
*/ */
class RoomViewStore extends Store { class RoomViewStore extends Store<ActionPayload> {
private state = INITIAL_STATE; // initialize state
constructor() { constructor() {
super(dis); super(dis);
// Initialise state
this._state = INITIAL_STATE;
} }
_setState(newState) { setState(newState: Partial<typeof INITIAL_STATE>) {
// If values haven't changed, there's nothing to do. // If values haven't changed, there's nothing to do.
// This only tries a shallow comparison, so unchanged objects will slip // This only tries a shallow comparison, so unchanged objects will slip
// through, but that's probably okay for now. // through, but that's probably okay for now.
let stateChanged = false; let stateChanged = false;
for (const key of Object.keys(newState)) { for (const key of Object.keys(newState)) {
if (this._state[key] !== newState[key]) { if (this.state[key] !== newState[key]) {
stateChanged = true; stateChanged = true;
break; break;
} }
@ -76,7 +84,7 @@ class RoomViewStore extends Store {
return; return;
} }
this._state = Object.assign(this._state, newState); this.state = Object.assign(this.state, newState);
this.__emitChange(); this.__emitChange();
} }
@ -89,59 +97,59 @@ class RoomViewStore extends Store {
// - event_offset: 100 // - event_offset: 100
// - highlighted: true // - highlighted: true
case 'view_room': case 'view_room':
this._viewRoom(payload); this.viewRoom(payload);
break; break;
case 'view_my_groups': case 'view_my_groups':
case 'view_group': case 'view_group':
this._setState({ this.setState({
roomId: null, roomId: null,
roomAlias: null, roomAlias: null,
}); });
break; break;
case 'view_room_error': case 'view_room_error':
this._viewRoomError(payload); this.viewRoomError(payload);
break; break;
case 'will_join': case 'will_join':
this._setState({ this.setState({
joining: true, joining: true,
}); });
break; break;
case 'cancel_join': case 'cancel_join':
this._setState({ this.setState({
joining: false, joining: false,
}); });
break; break;
// join_room: // join_room:
// - opts: options for joinRoom // - opts: options for joinRoom
case 'join_room': case 'join_room':
this._joinRoom(payload); this.joinRoom(payload);
break; break;
case 'join_room_error': case 'join_room_error':
this._joinRoomError(payload); this.joinRoomError(payload);
break; break;
case 'join_room_ready': case 'join_room_ready':
this._setState({ shouldPeek: false }); this.setState({ shouldPeek: false });
break; break;
case 'on_client_not_viable': case 'on_client_not_viable':
case 'on_logged_out': case 'on_logged_out':
this.reset(); this.reset();
break; break;
case 'forward_event': case 'forward_event':
this._setState({ this.setState({
forwardingEvent: payload.event, forwardingEvent: payload.event,
}); });
break; break;
case 'reply_to_event': case 'reply_to_event':
// If currently viewed room does not match the room in which we wish to reply then change rooms // If currently viewed room does not match the room in which we wish to reply then change rooms
// this can happen when performing a search across all rooms // this can happen when performing a search across all rooms
if (payload.event && payload.event.getRoomId() !== this._state.roomId) { if (payload.event && payload.event.getRoomId() !== this.state.roomId) {
dis.dispatch({ dis.dispatch({
action: 'view_room', action: 'view_room',
room_id: payload.event.getRoomId(), room_id: payload.event.getRoomId(),
replyingToEvent: payload.event, replyingToEvent: payload.event,
}); });
} else { } else {
this._setState({ this.setState({
replyingToEvent: payload.event, replyingToEvent: payload.event,
}); });
} }
@ -149,14 +157,14 @@ class RoomViewStore extends Store {
case 'open_room_settings': { case 'open_room_settings': {
const RoomSettingsDialog = sdk.getComponent("dialogs.RoomSettingsDialog"); const RoomSettingsDialog = sdk.getComponent("dialogs.RoomSettingsDialog");
Modal.createTrackedDialog('Room settings', '', RoomSettingsDialog, { Modal.createTrackedDialog('Room settings', '', RoomSettingsDialog, {
roomId: payload.room_id || this._state.roomId, roomId: payload.room_id || this.state.roomId,
}, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true); }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
break; break;
} }
} }
} }
async _viewRoom(payload) { private async viewRoom(payload) {
if (payload.room_id) { if (payload.room_id) {
const newState = { const newState = {
roomId: payload.room_id, roomId: payload.room_id,
@ -181,18 +189,18 @@ class RoomViewStore extends Store {
newState.replyingToEvent = payload.replyingToEvent; newState.replyingToEvent = payload.replyingToEvent;
} }
if (this._state.forwardingEvent) { if (this.state.forwardingEvent) {
dis.dispatch({ dis.dispatch({
action: 'send_event', action: 'send_event',
room_id: newState.roomId, room_id: newState.roomId,
event: this._state.forwardingEvent, event: this.state.forwardingEvent,
}); });
} }
this._setState(newState); this.setState(newState);
if (payload.auto_join) { if (payload.auto_join) {
this._joinRoom(payload); this.joinRoom(payload);
} }
} else if (payload.room_alias) { } else if (payload.room_alias) {
// Try the room alias to room ID navigation cache first to avoid // Try the room alias to room ID navigation cache first to avoid
@ -201,7 +209,7 @@ class RoomViewStore extends Store {
if (!roomId) { if (!roomId) {
// Room alias cache miss, so let's ask the homeserver. Resolve the alias // Room alias cache miss, so let's ask the homeserver. Resolve the alias
// and then do a second dispatch with the room ID acquired. // and then do a second dispatch with the room ID acquired.
this._setState({ this.setState({
roomId: null, roomId: null,
initialEventId: null, initialEventId: null,
initialEventPixelOffset: null, initialEventPixelOffset: null,
@ -238,8 +246,8 @@ class RoomViewStore extends Store {
} }
} }
_viewRoomError(payload) { private viewRoomError(payload) {
this._setState({ this.setState({
roomId: payload.room_id, roomId: payload.room_id,
roomAlias: payload.room_alias, roomAlias: payload.room_alias,
roomLoading: false, roomLoading: false,
@ -247,12 +255,12 @@ class RoomViewStore extends Store {
}); });
} }
_joinRoom(payload) { private joinRoom(payload) {
this._setState({ this.setState({
joining: true, joining: true,
}); });
MatrixClientPeg.get().joinRoom( MatrixClientPeg.get().joinRoom(
this._state.roomAlias || this._state.roomId, payload.opts, this.state.roomAlias || this.state.roomId, payload.opts,
).then(() => { ).then(() => {
// We do *not* clear the 'joining' flag because the Room object and/or our 'joined' member event may not // We do *not* clear the 'joining' flag because the Room object and/or our 'joined' member event may not
// have come down the sync stream yet, and that's the point at which we'd consider the user joined to the // have come down the sync stream yet, and that's the point at which we'd consider the user joined to the
@ -282,45 +290,45 @@ class RoomViewStore extends Store {
}); });
} }
_joinRoomError(payload) { private joinRoomError(payload) {
this._setState({ this.setState({
joining: false, joining: false,
joinError: payload.err, joinError: payload.err,
}); });
} }
reset() { public reset() {
this._state = Object.assign({}, INITIAL_STATE); this.state = Object.assign({}, INITIAL_STATE);
} }
// The room ID of the room currently being viewed // The room ID of the room currently being viewed
getRoomId() { public getRoomId() {
return this._state.roomId; return this.state.roomId;
} }
// The event to scroll to when the room is first viewed // The event to scroll to when the room is first viewed
getInitialEventId() { public getInitialEventId() {
return this._state.initialEventId; return this.state.initialEventId;
} }
// Whether to highlight the initial event // Whether to highlight the initial event
isInitialEventHighlighted() { public isInitialEventHighlighted() {
return this._state.isInitialEventHighlighted; return this.state.isInitialEventHighlighted;
} }
// The room alias of the room (or null if not originally specified in view_room) // The room alias of the room (or null if not originally specified in view_room)
getRoomAlias() { public getRoomAlias() {
return this._state.roomAlias; return this.state.roomAlias;
} }
// Whether the current room is loading (true whilst resolving an alias) // Whether the current room is loading (true whilst resolving an alias)
isRoomLoading() { public isRoomLoading() {
return this._state.roomLoading; return this.state.roomLoading;
} }
// Any error that has occurred during loading // Any error that has occurred during loading
getRoomLoadError() { public getRoomLoadError() {
return this._state.roomLoadError; return this.state.roomLoadError;
} }
// True if we're expecting the user to be joined to the room currently being // True if we're expecting the user to be joined to the room currently being
@ -346,27 +354,27 @@ class RoomViewStore extends Store {
// // show join prompt // // show join prompt
// } // }
// } // }
isJoining() { public isJoining() {
return this._state.joining; return this.state.joining;
} }
// Any error that has occurred during joining // Any error that has occurred during joining
getJoinError() { public getJoinError() {
return this._state.joinError; return this.state.joinError;
} }
// The mxEvent if one is about to be forwarded // The mxEvent if one is about to be forwarded
getForwardingEvent() { public getForwardingEvent() {
return this._state.forwardingEvent; return this.state.forwardingEvent;
} }
// The mxEvent if one is currently being replied to/quoted // The mxEvent if one is currently being replied to/quoted
getQuotingEvent() { public getQuotingEvent() {
return this._state.replyingToEvent; return this.state.replyingToEvent;
} }
shouldPeek() { public shouldPeek() {
return this._state.shouldPeek; return this.state.shouldPeek;
} }
} }