imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Store refactor: make it easier to test stores (#9290)

Browse source 
* refactor: convert RoomViewStore from flux Store to standard EventEmitter

Parts of a series of experimental changes to improve the design of stores.

* Use a gen5 store for RoomViewStore for now due to lock handling

* Revert "Use a gen5 store for RoomViewStore for now due to lock handling"

This reverts commit 1076af071d997d87b8ae0b0dcddfd1ae428665af.

* Add untilEmission and tweak untilDispatch; use it in RoomViewStore

* Add more RVS tests; remove custom room ID listener code and use EventEmitter

* Better comments

* Null guard `dis` as tests mock out `defaultDispatcher`

* Additional tests
This commit is contained in:
kegsay 2022-09-20 16:32:39 +01:00 • committed by GitHub
parent 1f1a18f914
commit 06c4ba32cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 289 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/right_panel/TimelineCard.tsx
View file

@ -15,7 +15,6 @@ limitations under the License.
*/
import React from 'react';
import { EventSubscription } from "fbemitter";
import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
import { NotificationCountType, Room } from 'matrix-js-sdk/src/models/room';
@ -42,6 +41,7 @@ import JumpToBottomButton from '../rooms/JumpToBottomButton';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import Measured from '../elements/Measured';
import Heading from '../typography/Heading';
import { UPDATE_EVENT } from '../../../stores/AsyncStore';
interface IProps {
room: Room;
@ -77,7 +77,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
private layoutWatcherRef: string;
private timelinePanel = React.createRef<TimelinePanel>();
private card = React.createRef<HTMLDivElement>();
private roomStoreToken: EventSubscription;
private readReceiptsSettingWatcher: string;
constructor(props: IProps) {
@ -92,7 +91,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
}
public componentDidMount(): void {
this.roomStoreToken = RoomViewStore.instance.addListener(this.onRoomViewStoreUpdate);
RoomViewStore.instance.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
this.dispatcherRef = dis.register(this.onAction);
this.readReceiptsSettingWatcher = SettingsStore.watchSetting("showReadReceipts", null, (...[,,, value]) =>
this.setState({ showReadReceipts: value as boolean }),
@ -103,9 +102,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
}
public componentWillUnmount(): void {
// Remove RoomStore listener
this.roomStoreToken?.remove();
RoomViewStore.instance.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
if (this.readReceiptsSettingWatcher) {
SettingsStore.unwatchSetting(this.readReceiptsSettingWatcher);

7
src/components/views/rooms/RoomList.tsx
View file

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as fbEmitter from "fbemitter";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { Room } from "matrix-js-sdk/src/models/room";
import React, { ComponentType, createRef, ReactComponentElement, RefObject } from "react";
@ -37,6 +36,7 @@ import { UIComponent } from "../../../settings/UIFeature";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
import { ITagMap } from "../../../stores/room-list/algorithms/models";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
import { RoomViewStore } from "../../../stores/RoomViewStore";
import {
@ -403,7 +403,6 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
export default class RoomList extends React.PureComponent<IProps, IState> {
private dispatcherRef;
private roomStoreToken: fbEmitter.EventSubscription;
private treeRef = createRef<HTMLDivElement>();
private favouriteMessageWatcher: string;
@ -422,7 +421,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
public componentDidMount(): void {
this.dispatcherRef = defaultDispatcher.register(this.onAction);
this.roomStoreToken = RoomViewStore.instance.addListener(this.onRoomViewStoreUpdate);
RoomViewStore.instance.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
SpaceStore.instance.on(UPDATE_SUGGESTED_ROOMS, this.updateSuggestedRooms);
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
this.favouriteMessageWatcher =
@ -437,7 +436,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
SettingsStore.unwatchSetting(this.favouriteMessageWatcher);
defaultDispatcher.unregister(this.dispatcherRef);
if (this.roomStoreToken) this.roomStoreToken.remove();
RoomViewStore.instance.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
}
private onRoomViewStoreUpdate = () => {

7
src/components/views/voip/PipView.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
import React, { createRef } from 'react';
import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import { EventSubscription } from 'fbemitter';
import { logger } from "matrix-js-sdk/src/logger";
import classNames from 'classnames';
import { Room } from "matrix-js-sdk/src/models/room";
@ -35,6 +34,7 @@ import LegacyCallViewHeader from './LegacyCallView/LegacyCallViewHeader';
import ActiveWidgetStore, { ActiveWidgetStoreEvent } from '../../../stores/ActiveWidgetStore';
import WidgetStore, { IApp } from "../../../stores/WidgetStore";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { UPDATE_EVENT } from '../../../stores/AsyncStore';
const SHOW_CALL_IN_STATES = [
CallState.Connected,
@ -116,7 +116,6 @@ function getPrimarySecondaryCallsForPip(roomId: string): [MatrixCall, MatrixCall
*/
export default class PipView extends React.Component<IProps, IState> {
private roomStoreToken: EventSubscription;
private settingsWatcherRef: string;
private movePersistedElement = createRef<() => void>();
@ -141,7 +140,7 @@ export default class PipView extends React.Component<IProps, IState> {
public componentDidMount() {
LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
this.roomStoreToken = RoomViewStore.instance.addListener(this.onRoomViewStoreUpdate);
RoomViewStore.instance.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
const room = MatrixClientPeg.get()?.getRoom(this.state.viewedRoomId);
if (room) {
@ -157,7 +156,7 @@ export default class PipView extends React.Component<IProps, IState> {
LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
this.roomStoreToken?.remove();
RoomViewStore.instance.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
SettingsStore.unwatchSetting(this.settingsWatcherRef);
const room = MatrixClientPeg.get().getRoom(this.state.viewedRoomId);
if (room) {