From 344185a3758eee109e9725581291bdaa78993a97 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 16:34:48 +0530 Subject: [PATCH 01/27] Translate right panel stuff to ts Add actions for right panel --- .../{HeaderButton.js => HeaderButton.tsx} | 41 +++--- .../{HeaderButtons.js => HeaderButtons.tsx} | 52 +++++--- src/dispatcher/actions.ts | 15 +++ .../AfterRightPanelPhaseChangePayload.ts | 28 ++++ .../payloads/SetRightPanelPhasePayload.ts | 36 ++++++ .../payloads/ToggleRightPanelPayload.ts | 27 ++++ ...{RightPanelStore.js => RightPanelStore.ts} | 121 ++++++++++-------- ...torePhases.js => RightPanelStorePhases.ts} | 34 ++--- 8 files changed, 247 insertions(+), 107 deletions(-) rename src/components/views/right_panel/{HeaderButton.js => HeaderButton.tsx} (79%) rename src/components/views/right_panel/{HeaderButtons.js => HeaderButtons.tsx} (57%) create mode 100644 src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts create mode 100644 src/dispatcher/payloads/SetRightPanelPhasePayload.ts create mode 100644 src/dispatcher/payloads/ToggleRightPanelPayload.ts rename src/stores/{RightPanelStore.js => RightPanelStore.ts} (59%) rename src/stores/{RightPanelStorePhases.js => RightPanelStorePhases.ts} (57%) diff --git a/src/components/views/right_panel/HeaderButton.js b/src/components/views/right_panel/HeaderButton.tsx similarity index 79% rename from src/components/views/right_panel/HeaderButton.js rename to src/components/views/right_panel/HeaderButton.tsx index 2cfc060bba..a64ed0a980 100644 --- a/src/components/views/right_panel/HeaderButton.js +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -19,18 +19,33 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; import Analytics from '../../../Analytics'; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; -export default class HeaderButton extends React.Component { - constructor() { - super(); +interface IProps { + // Whether this button is highlighted + isHighlighted: boolean; + // click handler + onClick: () => void; + // The badge to display above the icon + badge: React.ReactNode; + // The parameters to track the click event + analytics: string[]; + + // Button name + name: string; + // Button title + title: string; +}; + +export default class HeaderButton extends React.Component { + constructor(props: IProps) { + super(props); this.onClick = this.onClick.bind(this); } - onClick(ev) { + onClick(_ev: React.KeyboardEvent) { Analytics.trackEvent(...this.props.analytics); this.props.onClick(); } @@ -51,19 +66,3 @@ export default class HeaderButton extends React.Component { />; } } - -HeaderButton.propTypes = { - // Whether this button is highlighted - isHighlighted: PropTypes.bool.isRequired, - // click handler - onClick: PropTypes.func.isRequired, - // The badge to display above the icon - badge: PropTypes.node, - // The parameters to track the click event - analytics: PropTypes.arrayOf(PropTypes.string).isRequired, - - // Button name - name: PropTypes.string.isRequired, - // Button title - title: PropTypes.string.isRequired, -}; diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.tsx similarity index 57% rename from src/components/views/right_panel/HeaderButtons.js rename to src/components/views/right_panel/HeaderButtons.tsx index 1c66fe5828..099e785ada 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -21,42 +21,52 @@ limitations under the License. import React from 'react'; import dis from '../../../dispatcher/dispatcher'; import RightPanelStore from "../../../stores/RightPanelStore"; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; +import {Action} from '../../../dispatcher/actions'; -export const HEADER_KIND_ROOM = "room"; -export const HEADER_KIND_GROUP = "group"; +export enum HeaderKind { + Room = "room", + Group = "group", +} -const HEADER_KINDS = [HEADER_KIND_GROUP, HEADER_KIND_ROOM]; +interface IState { + headerKind: HeaderKind; + phase: RightPanelPhases; +} -export default class HeaderButtons extends React.Component { - constructor(props, kind) { +interface IProps {} + +export default class HeaderButtons extends React.Component { + private storeToken: ReturnType; + private dispatcherRef: string; + + constructor(props: IProps, kind: HeaderKind) { super(props); - if (!HEADER_KINDS.includes(kind)) throw new Error(`Invalid header kind: ${kind}`); - const rps = RightPanelStore.getSharedInstance(); this.state = { headerKind: kind, - phase: kind === HEADER_KIND_ROOM ? rps.visibleRoomPanelPhase : rps.visibleGroupPanelPhase, + phase: kind === HeaderKind.Room ? rps.visibleRoomPanelPhase : rps.visibleGroupPanelPhase, }; } componentDidMount() { - this._storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this)); - this._dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses + this.storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this)); + this.dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses } componentWillUnmount() { - if (this._storeToken) this._storeToken.remove(); - if (this._dispatcherRef) dis.unregister(this._dispatcherRef); + if (this.storeToken) this.storeToken.remove(); + if (this.dispatcherRef) dis.unregister(this.dispatcherRef); } onAction(payload) { // Ignore - intended to be overridden by subclasses } - setPhase(phase, extras) { + setPhase(phase: RightPanelPhases, extras) { dis.dispatch({ - action: 'set_right_panel_phase', + action: Action.SetRightPanelPhase, phase: phase, refireParams: extras, }); @@ -72,13 +82,23 @@ export default class HeaderButtons extends React.Component { onRightPanelUpdate() { const rps = RightPanelStore.getSharedInstance(); - if (this.state.headerKind === HEADER_KIND_ROOM) { + if (this.state.headerKind === HeaderKind.Room) { this.setState({phase: rps.visibleRoomPanelPhase}); - } else if (this.state.headerKind === HEADER_KIND_GROUP) { + } else if (this.state.headerKind === HeaderKind.Group) { this.setState({phase: rps.visibleGroupPanelPhase}); } } + // XXX: Make renderButtons a prop + renderButtons(): JSX.Element[] { + // Ignore - intended to be overridden by subclasses + // Return empty fragment to satisfy the type + return [ + + + ]; + } + render() { // inline style as this will be swapped around in future commits return
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts index 519a799e67..6fb71df30d 100644 --- a/src/dispatcher/actions.ts +++ b/src/dispatcher/actions.ts @@ -79,4 +79,19 @@ export enum Action { * Changes room based on room list order and payload parameters. Should be used with ViewRoomDeltaPayload. */ ViewRoomDelta = "view_room_delta", + + /** + * Sets the phase for the right panel. Should be used with SetRightPanelPhasePayload. + */ + SetRightPanelPhase = "set_right_panel_phase", + + /** + * Toggles the right panel. Should be used with ToggleRightPanelPayload. + */ + ToggleRightPanel = "toggle_right_panel", + + /** + * Trigged after the phase of the right panel is set. Should be used with AfterRightPanelPhaseChangePayload. + */ + AfterRightPanelPhaseChange = "after_right_panel_phase_change", } diff --git a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts new file mode 100644 index 0000000000..3193f9043b --- /dev/null +++ b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts @@ -0,0 +1,28 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +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 { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import { SetRightPanelPhaseRefireParams } from "./SetRightPanelPhasePayload"; +import { ActionPayload } from "../payloads"; +import { Action } from "../actions"; + +interface AfterRightPanelPhaseChangeAction extends ActionPayload { + action: Action.AfterRightPanelPhaseChange; + phase: RightPanelPhases; +} + +export type AfterRightPanelPhaseChangePayload + = AfterRightPanelPhaseChangeAction & SetRightPanelPhaseRefireParams; diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts new file mode 100644 index 0000000000..8d8eca762c --- /dev/null +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -0,0 +1,36 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +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 {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import { ActionPayload } from "../payloads"; +import { Action } from "../actions"; + +export interface SetRightPanelPhasePayload extends ActionPayload { + action: Action.SetRightPanelPhase; + + phase: RightPanelPhases; + refireParams?: SetRightPanelPhaseRefireParams; +} + +export interface SetRightPanelPhaseRefireParams { + // XXX: Fix after the types are defiend in matrix-js-sdk + // No appropriate types exist yet for the fields + members: any; + verificationRequest: typeof VerificationRequest; + groudId: string; + groupRoomId: string; +} diff --git a/src/dispatcher/payloads/ToggleRightPanelPayload.ts b/src/dispatcher/payloads/ToggleRightPanelPayload.ts new file mode 100644 index 0000000000..0635194890 --- /dev/null +++ b/src/dispatcher/payloads/ToggleRightPanelPayload.ts @@ -0,0 +1,27 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +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 { ActionPayload } from "../payloads"; +import { Action } from "../actions"; + +export interface ToggleRightPanelPayload extends ActionPayload { + action: Action.ToggleRightPanel; + + /** + * The type of room that the panel is toggled in. + */ + type: "group" | "room"; +} diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.ts similarity index 59% rename from src/stores/RightPanelStore.js rename to src/stores/RightPanelStore.ts index a73f3befbb..6ed5d7fe9a 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.ts @@ -15,31 +15,45 @@ limitations under the License. */ import dis from '../dispatcher/dispatcher'; +import {Action} from '../dispatcher/actions'; import {pendingVerificationRequestForUser} from '../verification'; import {Store} from 'flux/utils'; import SettingsStore, {SettingLevel} from "../settings/SettingsStore"; -import {RIGHT_PANEL_PHASES, RIGHT_PANEL_PHASES_NO_ARGS} from "./RightPanelStorePhases"; +import {RightPanelPhases, RIGHT_PANEL_PHASES_NO_ARGS} from "./RightPanelStorePhases"; -const INITIAL_STATE = { +interface RightPanelStoreState { // Whether or not to show the right panel at all. We split out rooms and groups // because they're different flows for the user to follow. - showRoomPanel: SettingsStore.getValue("showRightPanelInRoom"), - showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), + showRoomPanel: boolean; + showGroupPanel: boolean; // The last phase (screen) the right panel was showing - lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), - lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), + lastRoomPhase: RightPanelPhases; + lastGroupPhase: RightPanelPhases; // Extra information about the last phase + lastRoomPhaseParams: {[key: string]: any}; +} + +const INITIAL_STATE: RightPanelStoreState = { + showRoomPanel: SettingsStore.getValue("showRightPanelInRoom"), + showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), + lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), + lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), lastRoomPhaseParams: {}, }; -const GROUP_PHASES = Object.keys(RIGHT_PANEL_PHASES).filter(k => k.startsWith("Group")); +const GROUP_PHASES = [ + RightPanelPhases.GroupMemberList, + RightPanelPhases.GroupRoomList, + RightPanelPhases.GroupRoomInfo, + RightPanelPhases.GroupMemberInfo, +]; const MEMBER_INFO_PHASES = [ - RIGHT_PANEL_PHASES.RoomMemberInfo, - RIGHT_PANEL_PHASES.Room3pidMemberInfo, - RIGHT_PANEL_PHASES.EncryptionPanel, + RightPanelPhases.RoomMemberInfo, + RightPanelPhases.Room3pidMemberInfo, + RightPanelPhases.EncryptionPanel, ]; /** @@ -47,132 +61,133 @@ const MEMBER_INFO_PHASES = [ * sessions. */ export default class RightPanelStore extends Store { - static _instance; + private static instance: RightPanelStore; + private state: RightPanelStoreState; constructor() { super(dis); // Initialise state - this._state = INITIAL_STATE; + this.state = INITIAL_STATE; } get isOpenForRoom(): boolean { - return this._state.showRoomPanel; + return this.state.showRoomPanel; } get isOpenForGroup(): boolean { - return this._state.showGroupPanel; + return this.state.showGroupPanel; } - get roomPanelPhase(): string { - return this._state.lastRoomPhase; + get roomPanelPhase(): RightPanelPhases { + return this.state.lastRoomPhase; } - get groupPanelPhase(): string { - return this._state.lastGroupPhase; + get groupPanelPhase(): RightPanelPhases { + return this.state.lastGroupPhase; } - get visibleRoomPanelPhase(): string { + get visibleRoomPanelPhase(): RightPanelPhases { return this.isOpenForRoom ? this.roomPanelPhase : null; } - get visibleGroupPanelPhase(): string { + get visibleGroupPanelPhase(): RightPanelPhases { return this.isOpenForGroup ? this.groupPanelPhase : null; } get roomPanelPhaseParams(): any { - return this._state.lastRoomPhaseParams || {}; + return this.state.lastRoomPhaseParams || {}; } - _setState(newState) { - this._state = Object.assign(this._state, newState); + private setState(newState: Partial) { + this.state = Object.assign(this.state, newState); SettingsStore.setValue( "showRightPanelInRoom", null, SettingLevel.DEVICE, - this._state.showRoomPanel, + this.state.showRoomPanel, ); SettingsStore.setValue( "showRightPanelInGroup", null, SettingLevel.DEVICE, - this._state.showGroupPanel, + this.state.showGroupPanel, ); - if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this._state.lastRoomPhase)) { + if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastRoomPhase)) { SettingsStore.setValue( "lastRightPanelPhaseForRoom", null, SettingLevel.DEVICE, - this._state.lastRoomPhase, + this.state.lastRoomPhase, ); } - if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this._state.lastGroupPhase)) { + if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastGroupPhase)) { SettingsStore.setValue( "lastRightPanelPhaseForGroup", null, SettingLevel.DEVICE, - this._state.lastGroupPhase, + this.state.lastGroupPhase, ); } this.__emitChange(); } - __onDispatch(payload) { + __onDispatch(payload: ActionPayload) { switch (payload.action) { case 'view_room': case 'view_group': // Reset to the member list if we're viewing member info - if (MEMBER_INFO_PHASES.includes(this._state.lastRoomPhase)) { - this._setState({lastRoomPhase: RIGHT_PANEL_PHASES.RoomMemberList, lastRoomPhaseParams: {}}); + if (MEMBER_INFO_PHASES.includes(this.state.lastRoomPhase)) { + this.setState({lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {}}); } // Do the same for groups - if (this._state.lastGroupPhase === RIGHT_PANEL_PHASES.GroupMemberInfo) { - this._setState({lastGroupPhase: RIGHT_PANEL_PHASES.GroupMemberList}); + if (this.state.lastGroupPhase === RightPanelPhases.GroupMemberInfo) { + this.setState({lastGroupPhase: RightPanelPhases.GroupMemberList}); } break; - case 'set_right_panel_phase': { + case Action.SetRightPanelPhase: { let targetPhase = payload.phase; let refireParams = payload.refireParams; // redirect to EncryptionPanel if there is an ongoing verification request - if (targetPhase === RIGHT_PANEL_PHASES.RoomMemberInfo && payload.refireParams) { + if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { const {member} = payload.refireParams; const pendingRequest = pendingVerificationRequestForUser(member); if (pendingRequest) { - targetPhase = RIGHT_PANEL_PHASES.EncryptionPanel; + targetPhase = RightPanelPhases.EncryptionPanel; refireParams = { verificationRequest: pendingRequest, member, }; } } - if (!RIGHT_PANEL_PHASES[targetPhase]) { + if (!RightPanelPhases[targetPhase]) { console.warn(`Tried to switch right panel to unknown phase: ${targetPhase}`); return; } if (GROUP_PHASES.includes(targetPhase)) { - if (targetPhase === this._state.lastGroupPhase) { - this._setState({ - showGroupPanel: !this._state.showGroupPanel, + if (targetPhase === this.state.lastGroupPhase) { + this.setState({ + showGroupPanel: !this.state.showGroupPanel, }); } else { - this._setState({ + this.setState({ lastGroupPhase: targetPhase, showGroupPanel: true, }); } } else { - if (targetPhase === this._state.lastRoomPhase && !refireParams) { - this._setState({ - showRoomPanel: !this._state.showRoomPanel, + if (targetPhase === this.state.lastRoomPhase && !refireParams) { + this.setState({ + showRoomPanel: !this.state.showRoomPanel, }); } else { - this._setState({ + this.setState({ lastRoomPhase: targetPhase, showRoomPanel: true, lastRoomPhaseParams: refireParams || {}, @@ -182,27 +197,27 @@ export default class RightPanelStore extends Store { // Let things like the member info panel actually open to the right member. dis.dispatch({ - action: 'after_right_panel_phase_change', + action: Action.AfterRightPanelPhaseChange, phase: targetPhase, ...(refireParams || {}), }); break; } - case 'toggle_right_panel': + case Action.ToggleRightPanel: if (payload.type === "room") { - this._setState({ showRoomPanel: !this._state.showRoomPanel }); + this.setState({ showRoomPanel: !this.state.showRoomPanel }); } else { // group - this._setState({ showGroupPanel: !this._state.showGroupPanel }); + this.setState({ showGroupPanel: !this.state.showGroupPanel }); } break; } } static getSharedInstance(): RightPanelStore { - if (!RightPanelStore._instance) { - RightPanelStore._instance = new RightPanelStore(); + if (!RightPanelStore.instance) { + RightPanelStore.instance = new RightPanelStore(); } - return RightPanelStore._instance; + return RightPanelStore.instance; } } diff --git a/src/stores/RightPanelStorePhases.js b/src/stores/RightPanelStorePhases.ts similarity index 57% rename from src/stores/RightPanelStorePhases.js rename to src/stores/RightPanelStorePhases.ts index d9af320233..4d05738425 100644 --- a/src/stores/RightPanelStorePhases.js +++ b/src/stores/RightPanelStorePhases.ts @@ -15,28 +15,28 @@ limitations under the License. */ // These are in their own file because of circular imports being a problem. -export const RIGHT_PANEL_PHASES = Object.freeze({ +export enum RightPanelPhases { // Room stuff - RoomMemberList: 'RoomMemberList', - FilePanel: 'FilePanel', - NotificationPanel: 'NotificationPanel', - RoomMemberInfo: 'RoomMemberInfo', - EncryptionPanel: 'EncryptionPanel', + RoomMemberList = 'RoomMemberList', + FilePanel = 'FilePanel', + NotificationPanel = 'NotificationPanel', + RoomMemberInfo = 'RoomMemberInfo', + EncryptionPanel = 'EncryptionPanel', - Room3pidMemberInfo: 'Room3pidMemberInfo', + Room3pidMemberInfo = 'Room3pidMemberInfo', // Group stuff - GroupMemberList: 'GroupMemberList', - GroupRoomList: 'GroupRoomList', - GroupRoomInfo: 'GroupRoomInfo', - GroupMemberInfo: 'GroupMemberInfo', -}); + GroupMemberList = 'GroupMemberList', + GroupRoomList = 'GroupRoomList', + GroupRoomInfo = 'GroupRoomInfo', + GroupMemberInfo = 'GroupMemberInfo', +}; // These are the phases that are safe to persist (the ones that don't require additional // arguments). export const RIGHT_PANEL_PHASES_NO_ARGS = [ - RIGHT_PANEL_PHASES.NotificationPanel, - RIGHT_PANEL_PHASES.FilePanel, - RIGHT_PANEL_PHASES.RoomMemberList, - RIGHT_PANEL_PHASES.GroupMemberList, - RIGHT_PANEL_PHASES.GroupRoomList, + RightPanelPhases.NotificationPanel, + RightPanelPhases.FilePanel, + RightPanelPhases.RoomMemberList, + RightPanelPhases.GroupMemberList, + RightPanelPhases.GroupRoomList, ]; From 1d3635e1c8c9758c9aa9720e4439749d7744c5bd Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 16:38:20 +0530 Subject: [PATCH 02/27] Replaced string actions with their corresponding types --- src/components/structures/LoggedInView.tsx | 5 ++- src/components/structures/RightPanel.js | 42 +++++++++---------- .../views/messages/MKeyVerificationRequest.js | 7 ++-- .../views/right_panel/GroupHeaderButtons.js | 36 ++++++++-------- .../views/right_panel/HeaderButtons.tsx | 3 +- .../views/right_panel/RoomHeaderButtons.js | 36 ++++++++-------- src/components/views/right_panel/UserInfo.js | 10 ++--- src/components/views/rooms/Stickerpicker.js | 3 +- .../views/toasts/VerificationRequestToast.tsx | 7 ++-- src/settings/Settings.js | 6 +-- src/stores/RightPanelStore.ts | 5 ++- src/verification.js | 15 +++---- 12 files changed, 91 insertions(+), 84 deletions(-) diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 1f561e68ef..760ea52855 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -54,6 +54,7 @@ import LeftPanel from "./LeftPanel"; import CallContainer from '../views/voip/CallContainer'; import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload"; import RoomListStore from "../../stores/room-list/RoomListStore"; +import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload"; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. @@ -472,8 +473,8 @@ class LoggedInView extends React.Component { case Key.PERIOD: if (ctrlCmdOnly && (this.props.page_type === "room_view" || this.props.page_type === "group_view")) { - dis.dispatch({ - action: 'toggle_right_panel', + dis.dispatch({ + action: Action.ToggleRightPanel, type: this.props.page_type === "room_view" ? "room" : "group", }); handled = true; diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 776130e709..a4e3254e4c 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -26,7 +26,7 @@ import dis from '../../dispatcher/dispatcher'; import RateLimitedFunc from '../../ratelimitedfunc'; import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker'; import GroupStore from '../../stores/GroupStore'; -import {RIGHT_PANEL_PHASES, RIGHT_PANEL_PHASES_NO_ARGS} from "../../stores/RightPanelStorePhases"; +import {RightPanelPhases, RIGHT_PANEL_PHASES_NO_ARGS} from "../../stores/RightPanelStorePhases"; import RightPanelStore from "../../stores/RightPanelStore"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import {Action} from "../../dispatcher/actions"; @@ -75,8 +75,8 @@ export default class RightPanel extends React.Component { const userForPanel = this._getUserForPanel(); if (this.props.groupId) { if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) { - dis.dispatch({action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.GroupMemberList}); - return RIGHT_PANEL_PHASES.GroupMemberList; + dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList}); + return RightPanelPhases.GroupMemberList; } return rps.groupPanelPhase; } else if (userForPanel) { @@ -98,11 +98,11 @@ export default class RightPanel extends React.Component { ) { return rps.roomPanelPhase; } - return RIGHT_PANEL_PHASES.RoomMemberInfo; + return RightPanelPhases.RoomMemberInfo; } else { if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.roomPanelPhase)) { - dis.dispatch({action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.RoomMemberList}); - return RIGHT_PANEL_PHASES.RoomMemberList; + dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList}); + return RightPanelPhases.RoomMemberList; } return rps.roomPanelPhase; } @@ -149,7 +149,7 @@ export default class RightPanel extends React.Component { onInviteToGroupButtonClick() { showGroupInviteDialog(this.props.groupId).then(() => { this.setState({ - phase: RIGHT_PANEL_PHASES.GroupMemberList, + phase: RightPanelPhases.GroupMemberList, }); }); } @@ -165,9 +165,9 @@ export default class RightPanel extends React.Component { return; } // redraw the badge on the membership list - if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberList && member.roomId === this.props.roomId) { + if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.roomId) { this._delayedUpdate(); - } else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo && member.roomId === this.props.roomId && + } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.roomId && member.userId === this.state.member.userId) { // refresh the member info (e.g. new power level) this._delayedUpdate(); @@ -175,7 +175,7 @@ export default class RightPanel extends React.Component { } onAction(payload) { - if (payload.action === "after_right_panel_phase_change") { + if (payload.action === Action.AfterRightPanelPhaseChange) { this.setState({ phase: payload.phase, groupRoomId: payload.groupRoomId, @@ -206,7 +206,7 @@ export default class RightPanel extends React.Component { // or the member list if we were in the member panel... phew. dis.dispatch({ action: Action.ViewUser, - member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null, + member: this.state.phase === RightPanelPhases.EncryptionPanel ? this.state.member : null, }); } }; @@ -225,21 +225,21 @@ export default class RightPanel extends React.Component { let panel =
; switch (this.state.phase) { - case RIGHT_PANEL_PHASES.RoomMemberList: + case RightPanelPhases.RoomMemberList: if (this.props.roomId) { panel = ; } break; - case RIGHT_PANEL_PHASES.GroupMemberList: + case RightPanelPhases.GroupMemberList: if (this.props.groupId) { panel = ; } break; - case RIGHT_PANEL_PHASES.GroupRoomList: + case RightPanelPhases.GroupRoomList: panel = ; break; - case RIGHT_PANEL_PHASES.RoomMemberInfo: - case RIGHT_PANEL_PHASES.EncryptionPanel: + case RightPanelPhases.RoomMemberInfo: + case RightPanelPhases.EncryptionPanel: panel = ; break; - case RIGHT_PANEL_PHASES.Room3pidMemberInfo: + case RightPanelPhases.Room3pidMemberInfo: panel = ; break; - case RIGHT_PANEL_PHASES.GroupMemberInfo: + case RightPanelPhases.GroupMemberInfo: panel = ; break; - case RIGHT_PANEL_PHASES.GroupRoomInfo: + case RightPanelPhases.GroupRoomInfo: panel = ; break; - case RIGHT_PANEL_PHASES.NotificationPanel: + case RightPanelPhases.NotificationPanel: panel = ; break; - case RIGHT_PANEL_PHASES.FilePanel: + case RightPanelPhases.FilePanel: panel = ; break; } diff --git a/src/components/views/messages/MKeyVerificationRequest.js b/src/components/views/messages/MKeyVerificationRequest.js index a5b1ae26bb..01a5c2663e 100644 --- a/src/components/views/messages/MKeyVerificationRequest.js +++ b/src/components/views/messages/MKeyVerificationRequest.js @@ -22,7 +22,8 @@ import { _t } from '../../../languageHandler'; import {getNameForEventRoom, userLabelForEventRoom} from '../../../utils/KeyVerificationStateObserver'; import dis from "../../../dispatcher/dispatcher"; -import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; +import {Action} from "../../../dispatcher/actions"; export default class MKeyVerificationRequest extends React.Component { constructor(props) { @@ -48,8 +49,8 @@ export default class MKeyVerificationRequest extends React.Component { const {verificationRequest} = this.props.mxEvent; const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId); dis.dispatch({ - action: "set_right_panel_phase", - phase: RIGHT_PANEL_PHASES.EncryptionPanel, + action: Action.SetRightPanelPhase, + phase: RightPanelPhases.EncryptionPanel, refireParams: {verificationRequest, member}, }); }; diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index 33d9325433..fb589b1a0f 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -21,23 +21,23 @@ limitations under the License. import React from 'react'; import { _t } from '../../../languageHandler'; import HeaderButton from './HeaderButton'; -import HeaderButtons, {HEADER_KIND_GROUP} from './HeaderButtons'; -import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; +import HeaderButtons, {HeaderKind} from './HeaderButtons'; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from "../../../dispatcher/actions"; import {ActionPayload} from "../../../dispatcher/payloads"; const GROUP_PHASES = [ - RIGHT_PANEL_PHASES.GroupMemberInfo, - RIGHT_PANEL_PHASES.GroupMemberList, + RightPanelPhases.GroupMemberInfo, + RightPanelPhases.GroupMemberList, ]; const ROOM_PHASES = [ - RIGHT_PANEL_PHASES.GroupRoomList, - RIGHT_PANEL_PHASES.GroupRoomInfo, + RightPanelPhases.GroupRoomList, + RightPanelPhases.GroupRoomInfo, ]; export default class GroupHeaderButtons extends HeaderButtons { constructor(props) { - super(props, HEADER_KIND_GROUP); + super(props, HeaderKind.Group); this._onMembersClicked = this._onMembersClicked.bind(this); this._onRoomsClicked = this._onRoomsClicked.bind(this); } @@ -47,39 +47,39 @@ export default class GroupHeaderButtons extends HeaderButtons { if (payload.action === Action.ViewUser) { if (payload.member) { - this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, {member: payload.member}); + this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member}); } else { - this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); + this.setPhase(RightPanelPhases.GroupMemberList); } } else if (payload.action === "view_group") { - this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); + this.setPhase(RightPanelPhases.GroupMemberList); } else if (payload.action === "view_group_room") { this.setPhase( - RIGHT_PANEL_PHASES.GroupRoomInfo, + RightPanelPhases.GroupRoomInfo, {groupRoomId: payload.groupRoomId, groupId: payload.groupId}, ); } else if (payload.action === "view_group_room_list") { - this.setPhase(RIGHT_PANEL_PHASES.GroupRoomList); + this.setPhase(RightPanelPhases.GroupRoomList); } else if (payload.action === "view_group_member_list") { - this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); + this.setPhase(RightPanelPhases.GroupMemberList); } else if (payload.action === "view_group_user") { - this.setPhase(RIGHT_PANEL_PHASES.GroupMemberInfo, {member: payload.member}); + this.setPhase(RightPanelPhases.GroupMemberInfo, {member: payload.member}); } } _onMembersClicked() { - if (this.state.phase === RIGHT_PANEL_PHASES.GroupMemberInfo) { + if (this.state.phase === RightPanelPhases.GroupMemberInfo) { // send the active phase to trigger a toggle - this.setPhase(RIGHT_PANEL_PHASES.GroupMemberInfo); + this.setPhase(RightPanelPhases.GroupMemberInfo); } else { // This toggles for us, if needed - this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); + this.setPhase(RightPanelPhases.GroupMemberList); } } _onRoomsClicked() { // This toggles for us, if needed - this.setPhase(RIGHT_PANEL_PHASES.GroupRoomList); + this.setPhase(RightPanelPhases.GroupRoomList); } renderButtons() { diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 099e785ada..9e57eab5eb 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -23,6 +23,7 @@ import dis from '../../../dispatcher/dispatcher'; import RightPanelStore from "../../../stores/RightPanelStore"; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from '../../../dispatcher/actions'; +import {SetRightPanelPhasePayload} from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; export enum HeaderKind { Room = "room", @@ -65,7 +66,7 @@ export default class HeaderButtons extends React.Component { } setPhase(phase: RightPanelPhases, extras) { - dis.dispatch({ + dis.dispatch({ action: Action.SetRightPanelPhase, phase: phase, refireParams: extras, diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 838727981d..8620d5b485 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -21,21 +21,21 @@ limitations under the License. import React from 'react'; import { _t } from '../../../languageHandler'; import HeaderButton from './HeaderButton'; -import HeaderButtons, {HEADER_KIND_ROOM} from './HeaderButtons'; -import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; +import HeaderButtons, {HeaderKind} from './HeaderButtons'; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from "../../../dispatcher/actions"; import {ActionPayload} from "../../../dispatcher/payloads"; const MEMBER_PHASES = [ - RIGHT_PANEL_PHASES.RoomMemberList, - RIGHT_PANEL_PHASES.RoomMemberInfo, - RIGHT_PANEL_PHASES.EncryptionPanel, - RIGHT_PANEL_PHASES.Room3pidMemberInfo, + RightPanelPhases.RoomMemberList, + RightPanelPhases.RoomMemberInfo, + RightPanelPhases.EncryptionPanel, + RightPanelPhases.Room3pidMemberInfo, ]; export default class RoomHeaderButtons extends HeaderButtons { constructor(props) { - super(props, HEADER_KIND_ROOM); + super(props, HeaderKind.Room); this._onMembersClicked = this._onMembersClicked.bind(this); this._onFilesClicked = this._onFilesClicked.bind(this); this._onNotificationsClicked = this._onNotificationsClicked.bind(this); @@ -45,38 +45,38 @@ export default class RoomHeaderButtons extends HeaderButtons { super.onAction(payload); if (payload.action === Action.ViewUser) { if (payload.member) { - this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, {member: payload.member}); + this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member}); } else { - this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); + this.setPhase(RightPanelPhases.RoomMemberList); } } else if (payload.action === "view_3pid_invite") { if (payload.event) { - this.setPhase(RIGHT_PANEL_PHASES.Room3pidMemberInfo, {event: payload.event}); + this.setPhase(RightPanelPhases.Room3pidMemberInfo, {event: payload.event}); } else { - this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); + this.setPhase(RightPanelPhases.RoomMemberList); } } } _onMembersClicked() { - if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo) { + if (this.state.phase === RightPanelPhases.RoomMemberInfo) { // send the active phase to trigger a toggle // XXX: we should pass refireParams here but then it won't collapse as we desire it to - this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo); + this.setPhase(RightPanelPhases.RoomMemberInfo); } else { // This toggles for us, if needed - this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); + this.setPhase(RightPanelPhases.RoomMemberList); } } _onFilesClicked() { // This toggles for us, if needed - this.setPhase(RIGHT_PANEL_PHASES.FilePanel); + this.setPhase(RightPanelPhases.FilePanel); } _onNotificationsClicked() { // This toggles for us, if needed - this.setPhase(RIGHT_PANEL_PHASES.NotificationPanel); + this.setPhase(RightPanelPhases.NotificationPanel); } renderButtons() { @@ -89,13 +89,13 @@ export default class RoomHeaderButtons extends HeaderButtons { />, , , diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index 719a64063d..20168faede 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -40,7 +40,7 @@ import E2EIcon from "../rooms/E2EIcon"; import {useEventEmitter} from "../../../hooks/useEventEmitter"; import {textualPowerLevel} from '../../../Roles'; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import EncryptionPanel from "./EncryptionPanel"; import { useAsyncMemo } from '../../../hooks/useAsyncMemo'; import { verifyUser, legacyVerifyUser, verifyDevice } from '../../../verification'; @@ -1480,7 +1480,7 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => { ; }; -const UserInfo = ({user, groupId, roomId, onClose, phase=RIGHT_PANEL_PHASES.RoomMemberInfo, ...props}) => { +const UserInfo = ({user, groupId, roomId, onClose, phase=RightPanelPhases.RoomMemberInfo, ...props}) => { const cli = useContext(MatrixClientContext); // Load room if we are given a room id and memoize it @@ -1500,8 +1500,8 @@ const UserInfo = ({user, groupId, roomId, onClose, phase=RIGHT_PANEL_PHASES.Room let content; switch (phase) { - case RIGHT_PANEL_PHASES.RoomMemberInfo: - case RIGHT_PANEL_PHASES.GroupMemberInfo: + case RightPanelPhases.RoomMemberInfo: + case RightPanelPhases.GroupMemberInfo: content = ( ); break; - case RIGHT_PANEL_PHASES.EncryptionPanel: + case RightPanelPhases.EncryptionPanel: classes.push("mx_UserInfo_smallAvatar"); content = ( diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 2e56e49be1..b73f03a9c5 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -28,6 +28,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import {ContextMenu} from "../../structures/ContextMenu"; import {WidgetType} from "../../../widgets/WidgetType"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import {Action} from "../../../dispatcher/actions"; // This should be below the dialog level (4000), but above the rest of the UI (1000-2000). // We sit in a context menu, so this should be given to the context menu. @@ -181,7 +182,7 @@ export default class Stickerpicker extends React.Component { case "stickerpicker_close": this.setState({showStickers: false}); break; - case "after_right_panel_phase_change": + case Action.AfterRightPanelPhaseChange: case "show_left_panel": case "hide_left_panel": this.setState({showStickers: false}); diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index cc41e81b33..89c826eac4 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -19,7 +19,7 @@ import React from "react"; import * as sdk from "../../../index"; import { _t } from '../../../languageHandler'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; -import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver"; import dis from "../../../dispatcher/dispatcher"; import ToastStore from "../../../stores/ToastStore"; @@ -27,6 +27,7 @@ import Modal from "../../../Modal"; import GenericToast from "./GenericToast"; import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import {DeviceInfo} from "matrix-js-sdk/src/crypto/deviceinfo"; +import {Action} from "../../../dispatcher/actions"; interface IProps { toastKey: string; @@ -105,8 +106,8 @@ export default class VerificationRequestToast extends React.PureComponent { private static instance: RightPanelStore; private state: RightPanelStoreState; diff --git a/src/verification.js b/src/verification.js index 1dccb7dc28..36fb8b0e4f 100644 --- a/src/verification.js +++ b/src/verification.js @@ -19,10 +19,11 @@ import dis from "./dispatcher/dispatcher"; import Modal from './Modal'; import * as sdk from './index'; import { _t } from './languageHandler'; -import {RIGHT_PANEL_PHASES} from "./stores/RightPanelStorePhases"; +import {RightPanelPhases} from "./stores/RightPanelStorePhases"; import {findDMForUser} from './createRoom'; import {accessSecretStorage} from './CrossSigningManager'; import {verificationMethods} from 'matrix-js-sdk/src/crypto'; +import {Action} from './dispatcher/actions'; async function enable4SIfNeeded() { const cli = MatrixClientPeg.get(); @@ -91,8 +92,8 @@ export async function verifyDevice(user, device) { verificationMethods.SAS, ); dis.dispatch({ - action: "set_right_panel_phase", - phase: RIGHT_PANEL_PHASES.EncryptionPanel, + action: Action.SetRightPanelPhase, + phase: RightPanelPhases.EncryptionPanel, refireParams: {member: user, verificationRequestPromise}, }); } else if (action === "legacy") { @@ -120,8 +121,8 @@ export async function legacyVerifyUser(user) { } const verificationRequestPromise = cli.requestVerification(user.userId); dis.dispatch({ - action: "set_right_panel_phase", - phase: RIGHT_PANEL_PHASES.EncryptionPanel, + action: Action.SetRightPanelPhase, + phase: RightPanelPhases.EncryptionPanel, refireParams: {member: user, verificationRequestPromise}, }); } @@ -132,8 +133,8 @@ export async function verifyUser(user) { } const existingRequest = pendingVerificationRequestForUser(user); dis.dispatch({ - action: "set_right_panel_phase", - phase: RIGHT_PANEL_PHASES.EncryptionPanel, + action: Action.SetRightPanelPhase, + phase: RightPanelPhases.EncryptionPanel, refireParams: { member: user, verificationRequest: existingRequest, From 2c8b5b49ed1d26ffb0f1c35b5f0346788c579aa1 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 16:41:57 +0530 Subject: [PATCH 03/27] lint --- src/components/views/right_panel/HeaderButton.tsx | 2 +- src/stores/RightPanelStorePhases.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index a64ed0a980..563af90432 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -37,7 +37,7 @@ interface IProps { name: string; // Button title title: string; -}; +} export default class HeaderButton extends React.Component { constructor(props: IProps) { diff --git a/src/stores/RightPanelStorePhases.ts b/src/stores/RightPanelStorePhases.ts index 4d05738425..9045b17193 100644 --- a/src/stores/RightPanelStorePhases.ts +++ b/src/stores/RightPanelStorePhases.ts @@ -29,7 +29,7 @@ export enum RightPanelPhases { GroupRoomList = 'GroupRoomList', GroupRoomInfo = 'GroupRoomInfo', GroupMemberInfo = 'GroupMemberInfo', -}; +} // These are the phases that are safe to persist (the ones that don't require additional // arguments). From 1c913b85e2217813402b013d76fc4267085f11fc Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 16:47:07 +0530 Subject: [PATCH 04/27] Replace strings action with correspoding type --- src/components/views/groups/GroupMemberList.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 7b643c7346..31c6fe5d07 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -25,7 +25,10 @@ import PropTypes from 'prop-types'; import { showGroupInviteDialog } from '../../../GroupAddressPicker'; import AccessibleButton from '../elements/AccessibleButton'; import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; +import TintableSvg from '../elements/TintableSvg'; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; +import {Action} from "../../../dispatcher/actions"; const INITIAL_LOAD_NUM_MEMBERS = 30; @@ -164,8 +167,8 @@ export default createReactClass({ onInviteToGroupButtonClick() { showGroupInviteDialog(this.props.groupId).then(() => { dis.dispatch({ - action: 'set_right_panel_phase', - phase: RIGHT_PANEL_PHASES.GroupMemberList, + action: Action.SetRightPanelPhase, + phase: RightPanelPhases.GroupMemberList, groupId: this.props.groupId, }); }); From 0f59e34a3a12d08413e57b4e3031016cb373228e Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 16:47:44 +0530 Subject: [PATCH 05/27] Nest groupId in refireParams to match types --- src/components/views/groups/GroupMemberList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 31c6fe5d07..e7143f0dd2 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -169,7 +169,7 @@ export default createReactClass({ dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList, - groupId: this.props.groupId, + refireParams: { groupId: this.props.groupId }, }); }); }, From 23e4b67a69a61cd406012ee4b1c4344734e99664 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 17:14:20 +0530 Subject: [PATCH 06/27] Convert HeaderButton to TS --- src/components/views/right_panel/HeaderButton.tsx | 2 +- src/components/views/right_panel/HeaderButtons.tsx | 4 ++-- .../{RoomHeaderButtons.js => RoomHeaderButtons.tsx} | 0 src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 10 ++++++---- 4 files changed, 9 insertions(+), 7 deletions(-) rename src/components/views/right_panel/{RoomHeaderButtons.js => RoomHeaderButtons.tsx} (100%) diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index 563af90432..022a993c65 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -29,7 +29,7 @@ interface IProps { // click handler onClick: () => void; // The badge to display above the icon - badge: React.ReactNode; + badge?: React.ReactNode; // The parameters to track the click event analytics: string[]; diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 9e57eab5eb..8141e8a9cc 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -23,7 +23,7 @@ import dis from '../../../dispatcher/dispatcher'; import RightPanelStore from "../../../stores/RightPanelStore"; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from '../../../dispatcher/actions'; -import {SetRightPanelPhasePayload} from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; +import {SetRightPanelPhasePayload, SetRightPanelPhaseRefireParams} from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; export enum HeaderKind { Room = "room", @@ -65,7 +65,7 @@ export default class HeaderButtons extends React.Component { // Ignore - intended to be overridden by subclasses } - setPhase(phase: RightPanelPhases, extras) { + setPhase(phase: RightPanelPhases, extras?: Partial) { dis.dispatch({ action: Action.SetRightPanelPhase, phase: phase, diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.tsx similarity index 100% rename from src/components/views/right_panel/RoomHeaderButtons.js rename to src/components/views/right_panel/RoomHeaderButtons.tsx diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index 8d8eca762c..94e38b7ce6 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -29,8 +29,10 @@ export interface SetRightPanelPhasePayload extends ActionPayload { export interface SetRightPanelPhaseRefireParams { // XXX: Fix after the types are defiend in matrix-js-sdk // No appropriate types exist yet for the fields - members: any; - verificationRequest: typeof VerificationRequest; - groudId: string; - groupRoomId: string; + members?: any; + verificationRequest?: typeof VerificationRequest; + groudId?: string; + groupRoomId?: string; + // XXX: 'view_3pid_invite' action's payload + event?: any; } From 887d507772af9c464e193de10cc07c3d04e4cb3c Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 17:15:12 +0530 Subject: [PATCH 07/27] Fix key to match SetRightPanelPhasePayload's key member -> members --- src/components/views/right_panel/RoomHeaderButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 8620d5b485..74bd2c51fc 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -45,7 +45,7 @@ export default class RoomHeaderButtons extends HeaderButtons { super.onAction(payload); if (payload.action === Action.ViewUser) { if (payload.member) { - this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member}); + this.setPhase(RightPanelPhases.RoomMemberInfo, {members: payload.member}); } else { this.setPhase(RightPanelPhases.RoomMemberList); } From a4959f43d2882cf42bdd06385657e0f11db7c55a Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 17:56:53 +0530 Subject: [PATCH 08/27] Convert GroupHeaderButtons to TS Fix typo in SetRightPanelPhasePayload --- .../{GroupHeaderButtons.js => GroupHeaderButtons.tsx} | 11 +++++++---- src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) rename src/components/views/right_panel/{GroupHeaderButtons.js => GroupHeaderButtons.tsx} (93%) diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.tsx similarity index 93% rename from src/components/views/right_panel/GroupHeaderButtons.js rename to src/components/views/right_panel/GroupHeaderButtons.tsx index fb589b1a0f..7bd6d90038 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -25,6 +25,7 @@ import HeaderButtons, {HeaderKind} from './HeaderButtons'; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from "../../../dispatcher/actions"; import {ActionPayload} from "../../../dispatcher/payloads"; +import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload"; const GROUP_PHASES = [ RightPanelPhases.GroupMemberInfo, @@ -35,8 +36,10 @@ const ROOM_PHASES = [ RightPanelPhases.GroupRoomInfo, ]; +interface IProps {} + export default class GroupHeaderButtons extends HeaderButtons { - constructor(props) { + constructor(props: IProps) { super(props, HeaderKind.Group); this._onMembersClicked = this._onMembersClicked.bind(this); this._onRoomsClicked = this._onRoomsClicked.bind(this); @@ -46,8 +49,8 @@ export default class GroupHeaderButtons extends HeaderButtons { super.onAction(payload); if (payload.action === Action.ViewUser) { - if (payload.member) { - this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member}); + if ((payload as ViewUserPayload).member) { + this.setPhase(RightPanelPhases.RoomMemberInfo, {members: payload.member}); } else { this.setPhase(RightPanelPhases.GroupMemberList); } @@ -63,7 +66,7 @@ export default class GroupHeaderButtons extends HeaderButtons { } else if (payload.action === "view_group_member_list") { this.setPhase(RightPanelPhases.GroupMemberList); } else if (payload.action === "view_group_user") { - this.setPhase(RightPanelPhases.GroupMemberInfo, {member: payload.member}); + this.setPhase(RightPanelPhases.GroupMemberInfo, {members: payload.member}); } } diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index 94e38b7ce6..4b360d294a 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -31,7 +31,7 @@ export interface SetRightPanelPhaseRefireParams { // No appropriate types exist yet for the fields members?: any; verificationRequest?: typeof VerificationRequest; - groudId?: string; + groupId?: string; groupRoomId?: string; // XXX: 'view_3pid_invite' action's payload event?: any; From dac19cffce4ffc4a329aad424900187755a3cddc Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 22:44:56 +0530 Subject: [PATCH 09/27] Convert EncryptionInfo to TS --- .../{EncryptionInfo.js => EncryptionInfo.tsx} | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) rename src/components/views/right_panel/{EncryptionInfo.js => EncryptionInfo.tsx} (87%) diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.tsx similarity index 87% rename from src/components/views/right_panel/EncryptionInfo.js rename to src/components/views/right_panel/EncryptionInfo.tsx index 007e2831ce..2d0e3f7d46 100644 --- a/src/components/views/right_panel/EncryptionInfo.js +++ b/src/components/views/right_panel/EncryptionInfo.tsx @@ -15,10 +15,10 @@ limitations under the License. */ import React from "react"; -import PropTypes from "prop-types"; import * as sdk from "../../../index"; import {_t} from "../../../languageHandler"; +import {RoomMember} from "matrix-js-sdk/src/models/room-member" export const PendingActionSpinner = ({text}) => { const Spinner = sdk.getComponent('elements.Spinner'); @@ -28,7 +28,17 @@ export const PendingActionSpinner = ({text}) => {
; }; -const EncryptionInfo = ({ +interface IProps { + waitingForOtherParty: boolean; + waitingForNetwork: boolean; + member: RoomMember; + onStartVerification: () => Promise; + isRoomEncrypted: boolean; + inDialog: boolean; + isSelfVerification: boolean; +} + +const EncryptionInfo: React.FC = ({ waitingForOtherParty, waitingForNetwork, member, @@ -36,10 +46,10 @@ const EncryptionInfo = ({ isRoomEncrypted, inDialog, isSelfVerification, -}) => { - let content; +}: IProps) => { + let content: JSX.Element; if (waitingForOtherParty || waitingForNetwork) { - let text; + let text: string; if (waitingForOtherParty) { if (isSelfVerification) { text = _t("Waiting for you to accept on your other session…"); @@ -61,7 +71,7 @@ const EncryptionInfo = ({ ); } - let description; + let description: JSX.Element; if (isRoomEncrypted) { description = (
@@ -97,10 +107,5 @@ const EncryptionInfo = ({
; }; -EncryptionInfo.propTypes = { - member: PropTypes.object.isRequired, - onStartVerification: PropTypes.func.isRequired, - request: PropTypes.object, -}; export default EncryptionInfo; From 2f0caab8514261f28ef58a9a2a70668bcf61ffc8 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 22:45:22 +0530 Subject: [PATCH 10/27] "fix" type for members in SetRightPanelPhasePayload --- src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index 4b360d294a..49e3032d4f 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -14,7 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import { ActionPayload } from "../payloads"; import { Action } from "../actions"; @@ -29,7 +30,7 @@ export interface SetRightPanelPhasePayload extends ActionPayload { export interface SetRightPanelPhaseRefireParams { // XXX: Fix after the types are defiend in matrix-js-sdk // No appropriate types exist yet for the fields - members?: any; + members?: RoomMember; verificationRequest?: typeof VerificationRequest; groupId?: string; groupRoomId?: string; From 36974c423162eb25b52c7d0c572a8582f72bebce Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 23:09:11 +0530 Subject: [PATCH 11/27] Convert EncryptionPanel to TS --- ...EncryptionPanel.js => EncryptionPanel.tsx} | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) rename src/components/views/right_panel/{EncryptionPanel.js => EncryptionPanel.tsx} (91%) diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.tsx similarity index 91% rename from src/components/views/right_panel/EncryptionPanel.js rename to src/components/views/right_panel/EncryptionPanel.tsx index e9f94729fa..77af180db1 100644 --- a/src/components/views/right_panel/EncryptionPanel.js +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -15,7 +15,6 @@ limitations under the License. */ import React, {useCallback, useEffect, useState} from "react"; -import PropTypes from "prop-types"; import EncryptionInfo from "./EncryptionInfo"; import VerificationPanel from "./VerificationPanel"; @@ -26,11 +25,23 @@ import Modal from "../../../Modal"; import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import * as sdk from "../../../index"; import {_t} from "../../../languageHandler"; +import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; // cancellation codes which constitute a key mismatch const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"]; -const EncryptionPanel = (props) => { +interface IProps { + member: RoomMember; + onClose: () => void; + verificationRequest: VerificationRequest; + verificationRequestPromise: Promise; + layout: string; + inDialog: boolean; + isRoomEncrypted: boolean; +} + +const EncryptionPanel: React.FC = (props: IProps) => { const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props; const [request, setRequest] = useState(verificationRequest); // state to show a spinner immediately after clicking "start verification", @@ -90,7 +101,7 @@ const EncryptionPanel = (props) => { } }, [request]); - let cancelButton; + let cancelButton: JSX.Element; if (layout !== "dialog" && request && request.pending) { const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); cancelButton = ( { ); } }; -EncryptionPanel.propTypes = { - member: PropTypes.object.isRequired, - onClose: PropTypes.func.isRequired, - verificationRequest: PropTypes.object, - layout: PropTypes.string, - inDialog: PropTypes.bool, -}; export default EncryptionPanel; From 3e64ec11c01c06668e5d63f941e551a1f18d3ebf Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 23:09:24 +0530 Subject: [PATCH 12/27] lint --- src/components/views/right_panel/EncryptionInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/EncryptionInfo.tsx b/src/components/views/right_panel/EncryptionInfo.tsx index 2d0e3f7d46..f62af65543 100644 --- a/src/components/views/right_panel/EncryptionInfo.tsx +++ b/src/components/views/right_panel/EncryptionInfo.tsx @@ -18,7 +18,7 @@ import React from "react"; import * as sdk from "../../../index"; import {_t} from "../../../languageHandler"; -import {RoomMember} from "matrix-js-sdk/src/models/room-member" +import {RoomMember} from "matrix-js-sdk/src/models/room-member"; export const PendingActionSpinner = ({text}) => { const Spinner = sdk.getComponent('elements.Spinner'); From 8fac7a81672a7ee5aa4612abca4c0dc2f4bd580c Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 23:51:46 +0530 Subject: [PATCH 13/27] Convert VerificationPanel to TS --- ...ficationPanel.js => VerificationPanel.tsx} | 153 +++++++++++------- 1 file changed, 93 insertions(+), 60 deletions(-) rename src/components/views/right_panel/{VerificationPanel.js => VerificationPanel.tsx} (79%) diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.tsx similarity index 79% rename from src/components/views/right_panel/VerificationPanel.js rename to src/components/views/right_panel/VerificationPanel.tsx index 0b6790eac8..c2c065c022 100644 --- a/src/components/views/right_panel/VerificationPanel.js +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -15,12 +15,15 @@ limitations under the License. */ import React from "react"; -import PropTypes from "prop-types"; import {MatrixClientPeg} from "../../../MatrixClientPeg"; import * as sdk from '../../../index'; import {verificationMethods} from 'matrix-js-sdk/src/crypto'; import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode"; +import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import {RoomMember} from "matrix-js-sdk/src/models/room-member"; +import {ReciprocateQRCode} from "matrix-js-sdk/src/crypto/verification/QRCode"; +import {SAS} from "matrix-js-sdk/src/crypto/verification/SAS"; import VerificationQRCode from "../elements/crypto/VerificationQRCode"; import {_t} from "../../../languageHandler"; @@ -36,37 +39,67 @@ import { } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import Spinner from "../elements/Spinner"; -export default class VerificationPanel extends React.PureComponent { - static propTypes = { - layout: PropTypes.string, - request: PropTypes.object.isRequired, - member: PropTypes.object.isRequired, - phase: PropTypes.oneOf([ - PHASE_UNSENT, - PHASE_REQUESTED, - PHASE_READY, - PHASE_STARTED, - PHASE_CANCELLED, - PHASE_DONE, - ]).isRequired, - onClose: PropTypes.func.isRequired, - isRoomEncrypted: PropTypes.bool, - }; +// XXX: Should be defined in matrix-js-sdk +enum VerificationPhase { + PHASE_UNSENT, + PHASE_REQUESTED, + PHASE_READY, + PHASE_DONE, + PHASE_STARTED, + PHASE_CANCELLED, +} - constructor(props) { +interface IProps { + layout: string; + request: VerificationRequest; + member: RoomMember; + phase: VerificationPhase; + onClose: () => void; + isRoomEncrypted: boolean; + inDialog: boolean; + key: any; +} + +interface IState { + sasEvent?: SAS; + emojiButtonClicked?: boolean; + reciprocateButtonClicked?: boolean; + reciprocateQREvent?: ReciprocateQRCode; +} + +export default class VerificationPanel extends React.PureComponent { + /* static propTypes = { */ + /* layout: PropTypes.string, */ + /* request: PropTypes.object.isRequired, */ + /* member: PropTypes.object.isRequired, */ + /* phase: PropTypes.oneOf([ */ + /* PHASE_UNSENT, */ + /* PHASE_REQUESTED, */ + /* PHASE_READY, */ + /* PHASE_STARTED, */ + /* PHASE_CANCELLED, */ + /* PHASE_DONE, */ + /* ]).isRequired, */ + /* onClose: PropTypes.func.isRequired, */ + /* isRoomEncrypted: PropTypes.bool, */ + /* }; */ + + private hasVerifier: boolean; + + constructor(props: IProps) { super(props); this.state = {}; - this._hasVerifier = false; + this.hasVerifier = false; } renderQRPhase() { const {member, request} = this.props; - const showSAS = request.otherPartySupportsMethod(verificationMethods.SAS); - const showQR = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD); + const showSAS: boolean = request.otherPartySupportsMethod(verificationMethods.SAS); + const showQR: boolean = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD); const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const brand = SdkConfig.get().brand; - const noCommonMethodError = !showSAS && !showQR ? + const noCommonMethodError: JSX.Element = !showSAS && !showQR ?

{_t( "The session you are trying to verify doesn't support scanning a " + "QR code or emoji verification, which is what %(brand)s supports. Try " + @@ -77,8 +110,8 @@ export default class VerificationPanel extends React.PureComponent { if (this.props.layout === 'dialog') { // HACK: This is a terrible idea. - let qrBlock; - let sasBlock; + let qrBlock: JSX.Element; + let sasBlock: JSX.Element; if (showQR) { qrBlock =

@@ -91,7 +124,7 @@ export default class VerificationPanel extends React.PureComponent {

{_t("Compare unique emoji")}

{_t("Compare a unique set of emoji if you don't have a camera on either device")} - + {_t("Start")}
; @@ -111,7 +144,7 @@ export default class VerificationPanel extends React.PureComponent { ); } - let qrBlock; + let qrBlock: JSX.Element; if (showQR) { qrBlock =

{_t("Verify by scanning")}

@@ -125,7 +158,7 @@ export default class VerificationPanel extends React.PureComponent {
; } - let sasBlock; + let sasBlock: JSX.Element; if (showSAS) { const disabled = this.state.emojiButtonClicked; const sasLabel = showQR ? @@ -140,7 +173,7 @@ export default class VerificationPanel extends React.PureComponent { disabled={disabled} kind="primary" className="mx_UserInfo_wideButton mx_VerificationPanel_verifyByEmojiButton" - onClick={this._startSAS} + onClick={this.startSAS} > {_t("Verify by emoji")} @@ -159,17 +192,17 @@ export default class VerificationPanel extends React.PureComponent { ; } - _onReciprocateYesClick = () => { + private onReciprocateYesClick = () => { this.setState({reciprocateButtonClicked: true}); this.state.reciprocateQREvent.confirm(); }; - _onReciprocateNoClick = () => { + private onReciprocateNoClick = () => { this.setState({reciprocateButtonClicked: true}); this.state.reciprocateQREvent.cancel(); }; - _getDevice() { + private getDevice() { const deviceId = this.props.request && this.props.request.channel.deviceId; return MatrixClientPeg.get().getStoredDevice(MatrixClientPeg.get().getUserId(), deviceId); } @@ -189,7 +222,7 @@ export default class VerificationPanel extends React.PureComponent { _t("Almost there! Is %(displayName)s showing the same shield?", { displayName: member.displayName || member.name || member.userId, }); - let body; + let body: JSX.Element; if (this.state.reciprocateQREvent) { // riot web doesn't support scanning yet, so assume here we're the client being scanned. // @@ -202,11 +235,11 @@ export default class VerificationPanel extends React.PureComponent { + onClick={this.onReciprocateNoClick}>{_t("No")} + onClick={this.onReciprocateYesClick}>{_t("Yes")}
; } else { @@ -221,7 +254,7 @@ export default class VerificationPanel extends React.PureComponent { renderVerifiedPhase() { const {member, request} = this.props; - let text; + let text: string; if (!request.isSelfVerification) { if (this.props.isRoomEncrypted) { text = _t("Verify all users in a room to ensure it's secure."); @@ -230,9 +263,9 @@ export default class VerificationPanel extends React.PureComponent { } } - let description; + let description: string; if (request.isSelfVerification) { - const device = this._getDevice(); + const device = this.getDevice(); if (!device) { // This can happen if the device is logged out while we're still showing verification // UI for it. @@ -269,14 +302,14 @@ export default class VerificationPanel extends React.PureComponent { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - let startAgainInstruction; + let startAgainInstruction: string; if (request.isSelfVerification) { startAgainInstruction = _t("Start verification again from the notification."); } else { startAgainInstruction = _t("Start verification again from their profile."); } - let text; + let text: string; if (request.cancellationCode === "m.timeout") { text = _t("Verification timed out.") + ` ${startAgainInstruction}`; } else if (request.cancellingUserId === request.otherUserId) { @@ -321,10 +354,10 @@ export default class VerificationPanel extends React.PureComponent { const emojis = this.state.sasEvent ? : ; @@ -345,7 +378,7 @@ export default class VerificationPanel extends React.PureComponent { return null; } - _startSAS = async () => { + private startSAS = async () => { this.setState({emojiButtonClicked: true}); const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS); try { @@ -355,31 +388,31 @@ export default class VerificationPanel extends React.PureComponent { } }; - _onSasMatchesClick = () => { + private onSasMatchesClick = () => { this.state.sasEvent.confirm(); }; - _onSasMismatchesClick = () => { + private onSasMismatchesClick = () => { this.state.sasEvent.mismatch(); }; - _updateVerifierState = () => { + private updateVerifierState = () => { const {request} = this.props; const {sasEvent, reciprocateQREvent} = request.verifier; - request.verifier.off('show_sas', this._updateVerifierState); - request.verifier.off('show_reciprocate_qr', this._updateVerifierState); + request.verifier.off('show_sas', this.updateVerifierState); + request.verifier.off('show_reciprocate_qr', this.updateVerifierState); this.setState({sasEvent, reciprocateQREvent}); }; - _onRequestChange = async () => { + private onRequestChange = async () => { const {request} = this.props; - const hadVerifier = this._hasVerifier; - this._hasVerifier = !!request.verifier; - if (!hadVerifier && this._hasVerifier) { - request.verifier.on('show_sas', this._updateVerifierState); - request.verifier.on('show_reciprocate_qr', this._updateVerifierState); + const hadVerifier = this.hasVerifier; + this.hasVerifier = !!request.verifier; + if (!hadVerifier && this.hasVerifier) { + request.verifier.on('show_sas', this.updateVerifierState); + request.verifier.on('show_reciprocate_qr', this.updateVerifierState); try { - // on the requester side, this is also awaited in _startSAS, + // on the requester side, this is also awaited in startSAS, // but that's ok as verify should return the same promise. await request.verifier.verify(); } catch (err) { @@ -390,21 +423,21 @@ export default class VerificationPanel extends React.PureComponent { componentDidMount() { const {request} = this.props; - request.on("change", this._onRequestChange); + request.on("change", this.onRequestChange); if (request.verifier) { const {request} = this.props; const {sasEvent, reciprocateQREvent} = request.verifier; this.setState({sasEvent, reciprocateQREvent}); } - this._onRequestChange(); + this.onRequestChange(); } componentWillUnmount() { const {request} = this.props; if (request.verifier) { - request.verifier.off('show_sas', this._updateVerifierState); - request.verifier.off('show_reciprocate_qr', this._updateVerifierState); + request.verifier.off('show_sas', this.updateVerifierState); + request.verifier.off('show_reciprocate_qr', this.updateVerifierState); } - request.off("change", this._onRequestChange); + request.off("change", this.onRequestChange); } } From 5ddae04fb0ac89c3e73900fddd418c5a2cdb7586 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 23:51:56 +0530 Subject: [PATCH 14/27] lint --- src/components/views/right_panel/EncryptionPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index 77af180db1..8d5530cfa3 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -25,8 +25,8 @@ import Modal from "../../../Modal"; import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import * as sdk from "../../../index"; import {_t} from "../../../languageHandler"; -import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; -import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import {RoomMember} from "matrix-js-sdk/src/models/room-member"; // cancellation codes which constitute a key mismatch const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"]; From 0f0b4035b73eb74a1e103ed6f550c7f633c12564 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Sat, 18 Jul 2020 23:52:41 +0530 Subject: [PATCH 15/27] Fix shadow variable errors --- .../views/right_panel/VerificationPanel.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index c2c065c022..d2ee728438 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -110,17 +110,17 @@ export default class VerificationPanel extends React.PureComponent

{_t("Scan this unique code")}

; } if (showSAS) { - sasBlock = + sasBlockDialog =

{_t("Compare unique emoji")}

{_t("Compare a unique set of emoji if you don't have a camera on either device")} @@ -129,15 +129,15 @@ export default class VerificationPanel extends React.PureComponent
; } - const or = qrBlock && sasBlock ? + const or = qrBlockDialog && sasBlockDialog ?
{_t("or")}
: null; return (
{_t("Verify this session by completing one of the following:")}
- {qrBlock} + {qrBlockDialog} {or} - {sasBlock} + {sasBlockDialog} {noCommonMethodError}
@@ -425,7 +425,6 @@ export default class VerificationPanel extends React.PureComponent Date: Sat, 18 Jul 2020 23:55:28 +0530 Subject: [PATCH 16/27] Fix shadow-variable errors in EncryptionPanel --- src/components/views/right_panel/EncryptionPanel.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index 8d5530cfa3..df52e5cabd 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -59,10 +59,10 @@ const EncryptionPanel: React.FC = (props: IProps) => { useEffect(() => { async function awaitPromise() { setRequesting(true); - const request = await verificationRequestPromise; + const requestFromPromise = await verificationRequestPromise; setRequesting(false); - setRequest(request); - setPhase(request.phase); + setRequest(requestFromPromise); + setPhase(requestFromPromise.phase); } if (verificationRequestPromise) { awaitPromise(); @@ -115,9 +115,9 @@ const EncryptionPanel: React.FC = (props: IProps) => { setRequesting(true); const cli = MatrixClientPeg.get(); const roomId = await ensureDMExists(cli, member.userId); - const verificationRequest = await cli.requestVerificationDM(member.userId, roomId); - setRequest(verificationRequest); - setPhase(verificationRequest.phase); + const verificationRequest_ = await cli.requestVerificationDM(member.userId, roomId); + setRequest(verificationRequest_); + setPhase(verificationRequest_.phase); }, [member.userId]); const requested = From d7728881a3bf9053f35bddfaa61d5be74e12d801 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Wed, 22 Jul 2020 15:22:16 +0530 Subject: [PATCH 17/27] lint --- src/components/views/groups/GroupMemberList.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index e7143f0dd2..031b875409 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -24,8 +24,6 @@ import GroupStore from '../../../stores/GroupStore'; import PropTypes from 'prop-types'; import { showGroupInviteDialog } from '../../../GroupAddressPicker'; import AccessibleButton from '../elements/AccessibleButton'; -import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; -import TintableSvg from '../elements/TintableSvg'; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import {Action} from "../../../dispatcher/actions"; From 5ea7be5d530f5ebad14fc7ca9800b0d5c9cb6ce0 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Wed, 22 Jul 2020 21:17:58 +0530 Subject: [PATCH 18/27] Cleanup comments --- .../views/right_panel/VerificationPanel.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index d2ee728438..a4180bcd8a 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -68,22 +68,6 @@ interface IState { } export default class VerificationPanel extends React.PureComponent { - /* static propTypes = { */ - /* layout: PropTypes.string, */ - /* request: PropTypes.object.isRequired, */ - /* member: PropTypes.object.isRequired, */ - /* phase: PropTypes.oneOf([ */ - /* PHASE_UNSENT, */ - /* PHASE_REQUESTED, */ - /* PHASE_READY, */ - /* PHASE_STARTED, */ - /* PHASE_CANCELLED, */ - /* PHASE_DONE, */ - /* ]).isRequired, */ - /* onClose: PropTypes.func.isRequired, */ - /* isRoomEncrypted: PropTypes.bool, */ - /* }; */ - private hasVerifier: boolean; constructor(props: IProps) { From bf450ad075aeb4cebc84f73aca6afda699a260cd Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Wed, 29 Jul 2020 16:59:29 +0530 Subject: [PATCH 19/27] Fix the type for SetRightPanelPhasePayload Fix uses of it as well --- src/components/views/right_panel/GroupHeaderButtons.tsx | 4 ++-- src/components/views/right_panel/RoomHeaderButtons.tsx | 2 +- src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx index 7bd6d90038..b15a93e5a0 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.tsx +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -50,7 +50,7 @@ export default class GroupHeaderButtons extends HeaderButtons { if (payload.action === Action.ViewUser) { if ((payload as ViewUserPayload).member) { - this.setPhase(RightPanelPhases.RoomMemberInfo, {members: payload.member}); + this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member}); } else { this.setPhase(RightPanelPhases.GroupMemberList); } @@ -66,7 +66,7 @@ export default class GroupHeaderButtons extends HeaderButtons { } else if (payload.action === "view_group_member_list") { this.setPhase(RightPanelPhases.GroupMemberList); } else if (payload.action === "view_group_user") { - this.setPhase(RightPanelPhases.GroupMemberInfo, {members: payload.member}); + this.setPhase(RightPanelPhases.GroupMemberInfo, {member: payload.member}); } } diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 74bd2c51fc..8620d5b485 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -45,7 +45,7 @@ export default class RoomHeaderButtons extends HeaderButtons { super.onAction(payload); if (payload.action === Action.ViewUser) { if (payload.member) { - this.setPhase(RightPanelPhases.RoomMemberInfo, {members: payload.member}); + this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member}); } else { this.setPhase(RightPanelPhases.RoomMemberList); } diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index 49e3032d4f..5b78863b35 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -30,7 +30,7 @@ export interface SetRightPanelPhasePayload extends ActionPayload { export interface SetRightPanelPhaseRefireParams { // XXX: Fix after the types are defiend in matrix-js-sdk // No appropriate types exist yet for the fields - members?: RoomMember; + member?: RoomMember; verificationRequest?: typeof VerificationRequest; groupId?: string; groupRoomId?: string; From aa160095fa0413dfa1e43b9dcfaf5f54f1ed31ad Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Wed, 29 Jul 2020 17:26:51 +0530 Subject: [PATCH 20/27] Cleanup --- src/components/views/right_panel/VerificationPanel.tsx | 2 +- src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index a4180bcd8a..0781bcf491 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -57,7 +57,7 @@ interface IProps { onClose: () => void; isRoomEncrypted: boolean; inDialog: boolean; - key: any; + key: number; } interface IState { diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index 5b78863b35..b7dd5d85fc 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -24,16 +24,14 @@ export interface SetRightPanelPhasePayload extends ActionPayload { action: Action.SetRightPanelPhase; phase: RightPanelPhases; - refireParams?: SetRightPanelPhaseRefireParams; + refireParams: SetRightPanelPhaseRefireParams; } export interface SetRightPanelPhaseRefireParams { - // XXX: Fix after the types are defiend in matrix-js-sdk - // No appropriate types exist yet for the fields member?: RoomMember; - verificationRequest?: typeof VerificationRequest; + verificationRequest?: VerificationRequest; groupId?: string; groupRoomId?: string; - // XXX: 'view_3pid_invite' action's payload + // XXX: The type for event should 'view_3pid_invite' action's payload event?: any; } From 8120a26135390c341b1c1e74587b1439bdbf0ce4 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Wed, 29 Jul 2020 17:35:55 +0530 Subject: [PATCH 21/27] A bit more cleanup --- src/components/views/toasts/VerificationRequestToast.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index 89c826eac4..8c8a74b2be 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -20,6 +20,7 @@ import * as sdk from "../../../index"; import { _t } from '../../../languageHandler'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; +import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload" import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver"; import dis from "../../../dispatcher/dispatcher"; import ToastStore from "../../../stores/ToastStore"; @@ -105,7 +106,7 @@ export default class VerificationRequestToast extends React.PureComponent({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.EncryptionPanel, refireParams: { From b8e51076a87f73d2cd9e2ca47baaa3b97191e25d Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Wed, 29 Jul 2020 23:58:32 +0530 Subject: [PATCH 22/27] Fix private functions for RoomHeaderButtons --- .../views/right_panel/RoomHeaderButtons.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 8620d5b485..1b3117d67e 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -36,9 +36,9 @@ const MEMBER_PHASES = [ export default class RoomHeaderButtons extends HeaderButtons { constructor(props) { super(props, HeaderKind.Room); - this._onMembersClicked = this._onMembersClicked.bind(this); - this._onFilesClicked = this._onFilesClicked.bind(this); - this._onNotificationsClicked = this._onNotificationsClicked.bind(this); + this.onMembersClicked = this.onMembersClicked.bind(this); + this.onFilesClicked = this.onFilesClicked.bind(this); + this.onNotificationsClicked = this.onNotificationsClicked.bind(this); } onAction(payload: ActionPayload) { @@ -58,7 +58,7 @@ export default class RoomHeaderButtons extends HeaderButtons { } } - _onMembersClicked() { + private onMembersClicked() { if (this.state.phase === RightPanelPhases.RoomMemberInfo) { // send the active phase to trigger a toggle // XXX: we should pass refireParams here but then it won't collapse as we desire it to @@ -69,12 +69,12 @@ export default class RoomHeaderButtons extends HeaderButtons { } } - _onFilesClicked() { + private onFilesClicked() { // This toggles for us, if needed this.setPhase(RightPanelPhases.FilePanel); } - _onNotificationsClicked() { + private onNotificationsClicked() { // This toggles for us, if needed this.setPhase(RightPanelPhases.NotificationPanel); } @@ -84,19 +84,19 @@ export default class RoomHeaderButtons extends HeaderButtons { , , , ]; From 97cef335e8215c26a5df1d28ee6e241f1337ef75 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Thu, 30 Jul 2020 00:28:12 +0530 Subject: [PATCH 23/27] Cleanup types --- src/components/structures/{RightPanel.js => RightPanel.tsx} | 0 src/components/views/right_panel/HeaderButtons.tsx | 3 ++- src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts | 2 ++ src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 2 +- 4 files changed, 5 insertions(+), 2 deletions(-) rename src/components/structures/{RightPanel.js => RightPanel.tsx} (100%) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.tsx similarity index 100% rename from src/components/structures/RightPanel.js rename to src/components/structures/RightPanel.tsx diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 8141e8a9cc..499fbbd414 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -24,6 +24,7 @@ import RightPanelStore from "../../../stores/RightPanelStore"; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from '../../../dispatcher/actions'; import {SetRightPanelPhasePayload, SetRightPanelPhaseRefireParams} from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; +import {EventSubscription} from "fbemitter"; export enum HeaderKind { Room = "room", @@ -38,7 +39,7 @@ interface IState { interface IProps {} export default class HeaderButtons extends React.Component { - private storeToken: ReturnType; + private storeToken: EventSubscription; private dispatcherRef: string; constructor(props: IProps, kind: HeaderKind) { diff --git a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts index 3193f9043b..cfd4a2d3cc 100644 --- a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts +++ b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts @@ -18,10 +18,12 @@ import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import { SetRightPanelPhaseRefireParams } from "./SetRightPanelPhasePayload"; import { ActionPayload } from "../payloads"; import { Action } from "../actions"; +import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; interface AfterRightPanelPhaseChangeAction extends ActionPayload { action: Action.AfterRightPanelPhaseChange; phase: RightPanelPhases; + verificationRequestPromise?: Promise; } export type AfterRightPanelPhaseChangePayload diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index b7dd5d85fc..75dea9f3df 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -24,7 +24,7 @@ export interface SetRightPanelPhasePayload extends ActionPayload { action: Action.SetRightPanelPhase; phase: RightPanelPhases; - refireParams: SetRightPanelPhaseRefireParams; + refireParams?: SetRightPanelPhaseRefireParams; } export interface SetRightPanelPhaseRefireParams { From 9aa128a6e8075a7e27548a075c84e3f8a8e91da4 Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Thu, 30 Jul 2020 11:45:49 +0530 Subject: [PATCH 24/27] Revert "Cleanup types" This reverts commit 97cef335e8215c26a5df1d28ee6e241f1337ef75. --- src/components/structures/{RightPanel.tsx => RightPanel.js} | 0 src/components/views/right_panel/HeaderButtons.tsx | 3 +-- src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts | 2 -- src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 2 +- 4 files changed, 2 insertions(+), 5 deletions(-) rename src/components/structures/{RightPanel.tsx => RightPanel.js} (100%) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.js similarity index 100% rename from src/components/structures/RightPanel.tsx rename to src/components/structures/RightPanel.js diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 499fbbd414..8141e8a9cc 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -24,7 +24,6 @@ import RightPanelStore from "../../../stores/RightPanelStore"; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from '../../../dispatcher/actions'; import {SetRightPanelPhasePayload, SetRightPanelPhaseRefireParams} from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; -import {EventSubscription} from "fbemitter"; export enum HeaderKind { Room = "room", @@ -39,7 +38,7 @@ interface IState { interface IProps {} export default class HeaderButtons extends React.Component { - private storeToken: EventSubscription; + private storeToken: ReturnType; private dispatcherRef: string; constructor(props: IProps, kind: HeaderKind) { diff --git a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts index cfd4a2d3cc..3193f9043b 100644 --- a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts +++ b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts @@ -18,12 +18,10 @@ import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import { SetRightPanelPhaseRefireParams } from "./SetRightPanelPhasePayload"; import { ActionPayload } from "../payloads"; import { Action } from "../actions"; -import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; interface AfterRightPanelPhaseChangeAction extends ActionPayload { action: Action.AfterRightPanelPhaseChange; phase: RightPanelPhases; - verificationRequestPromise?: Promise; } export type AfterRightPanelPhaseChangePayload diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index 75dea9f3df..b7dd5d85fc 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -24,7 +24,7 @@ export interface SetRightPanelPhasePayload extends ActionPayload { action: Action.SetRightPanelPhase; phase: RightPanelPhases; - refireParams?: SetRightPanelPhaseRefireParams; + refireParams: SetRightPanelPhaseRefireParams; } export interface SetRightPanelPhaseRefireParams { From fbc341a2f5b43459b8e200d0f7edf92c8a343b6e Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Thu, 30 Jul 2020 11:51:10 +0530 Subject: [PATCH 25/27] Clean up types properly --- src/components/views/right_panel/HeaderButtons.tsx | 3 ++- src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts | 2 ++ src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 8141e8a9cc..499fbbd414 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -24,6 +24,7 @@ import RightPanelStore from "../../../stores/RightPanelStore"; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {Action} from '../../../dispatcher/actions'; import {SetRightPanelPhasePayload, SetRightPanelPhaseRefireParams} from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; +import {EventSubscription} from "fbemitter"; export enum HeaderKind { Room = "room", @@ -38,7 +39,7 @@ interface IState { interface IProps {} export default class HeaderButtons extends React.Component { - private storeToken: ReturnType; + private storeToken: EventSubscription; private dispatcherRef: string; constructor(props: IProps, kind: HeaderKind) { diff --git a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts index 3193f9043b..cfd4a2d3cc 100644 --- a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts +++ b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts @@ -18,10 +18,12 @@ import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import { SetRightPanelPhaseRefireParams } from "./SetRightPanelPhasePayload"; import { ActionPayload } from "../payloads"; import { Action } from "../actions"; +import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; interface AfterRightPanelPhaseChangeAction extends ActionPayload { action: Action.AfterRightPanelPhaseChange; phase: RightPanelPhases; + verificationRequestPromise?: Promise; } export type AfterRightPanelPhaseChangePayload diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index b7dd5d85fc..75dea9f3df 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -24,7 +24,7 @@ export interface SetRightPanelPhasePayload extends ActionPayload { action: Action.SetRightPanelPhase; phase: RightPanelPhases; - refireParams: SetRightPanelPhaseRefireParams; + refireParams?: SetRightPanelPhaseRefireParams; } export interface SetRightPanelPhaseRefireParams { From d0e269511401cae0c7908bf07b5842f0fa8beb5e Mon Sep 17 00:00:00 2001 From: Swapnil Raj Date: Thu, 30 Jul 2020 15:58:07 +0530 Subject: [PATCH 26/27] Add access specifier to class methods --- .../views/right_panel/GroupHeaderButtons.tsx | 14 +++++++------- .../views/right_panel/HeaderButton.tsx | 4 ++-- .../views/right_panel/HeaderButtons.tsx | 16 ++++++++-------- .../views/right_panel/RoomHeaderButtons.tsx | 4 ++-- .../views/right_panel/VerificationPanel.tsx | 14 +++++++------- 5 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx index b15a93e5a0..0bbbea78e3 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.tsx +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -41,11 +41,11 @@ interface IProps {} export default class GroupHeaderButtons extends HeaderButtons { constructor(props: IProps) { super(props, HeaderKind.Group); - this._onMembersClicked = this._onMembersClicked.bind(this); - this._onRoomsClicked = this._onRoomsClicked.bind(this); + this.onMembersClicked = this.onMembersClicked.bind(this); + this.onRoomsClicked = this.onRoomsClicked.bind(this); } - onAction(payload: ActionPayload) { + public onAction(payload: ActionPayload) { super.onAction(payload); if (payload.action === Action.ViewUser) { @@ -70,7 +70,7 @@ export default class GroupHeaderButtons extends HeaderButtons { } } - _onMembersClicked() { + private onMembersClicked() { if (this.state.phase === RightPanelPhases.GroupMemberInfo) { // send the active phase to trigger a toggle this.setPhase(RightPanelPhases.GroupMemberInfo); @@ -80,7 +80,7 @@ export default class GroupHeaderButtons extends HeaderButtons { } } - _onRoomsClicked() { + private onRoomsClicked() { // This toggles for us, if needed this.setPhase(RightPanelPhases.GroupRoomList); } @@ -90,13 +90,13 @@ export default class GroupHeaderButtons extends HeaderButtons { , , ]; diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index 022a993c65..c7cd064184 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -45,12 +45,12 @@ export default class HeaderButton extends React.Component { this.onClick = this.onClick.bind(this); } - onClick(_ev: React.KeyboardEvent) { + private onClick() { Analytics.trackEvent(...this.props.analytics); this.props.onClick(); } - render() { + public render() { const classes = classNames({ mx_RightPanel_headerButton: true, mx_RightPanel_headerButton_highlight: this.props.isHighlighted, diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 499fbbd414..8239a52dea 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -52,21 +52,21 @@ export default class HeaderButtons extends React.Component { }; } - componentDidMount() { + public componentDidMount() { this.storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this)); this.dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses } - componentWillUnmount() { + public componentWillUnmount() { if (this.storeToken) this.storeToken.remove(); if (this.dispatcherRef) dis.unregister(this.dispatcherRef); } - onAction(payload) { + public onAction(payload) { // Ignore - intended to be overridden by subclasses } - setPhase(phase: RightPanelPhases, extras?: Partial) { + public setPhase(phase: RightPanelPhases, extras?: Partial) { dis.dispatch({ action: Action.SetRightPanelPhase, phase: phase, @@ -74,7 +74,7 @@ export default class HeaderButtons extends React.Component { }); } - isPhase(phases: string | string[]) { + public isPhase(phases: string | string[]) { if (Array.isArray(phases)) { return phases.includes(this.state.phase); } else { @@ -82,7 +82,7 @@ export default class HeaderButtons extends React.Component { } } - onRightPanelUpdate() { + private onRightPanelUpdate() { const rps = RightPanelStore.getSharedInstance(); if (this.state.headerKind === HeaderKind.Room) { this.setState({phase: rps.visibleRoomPanelPhase}); @@ -92,7 +92,7 @@ export default class HeaderButtons extends React.Component { } // XXX: Make renderButtons a prop - renderButtons(): JSX.Element[] { + public renderButtons(): JSX.Element[] { // Ignore - intended to be overridden by subclasses // Return empty fragment to satisfy the type return [ @@ -101,7 +101,7 @@ export default class HeaderButtons extends React.Component { ]; } - render() { + public render() { // inline style as this will be swapped around in future commits return
{this.renderButtons()} diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 1b3117d67e..636e29443a 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -41,7 +41,7 @@ export default class RoomHeaderButtons extends HeaderButtons { this.onNotificationsClicked = this.onNotificationsClicked.bind(this); } - onAction(payload: ActionPayload) { + public onAction(payload: ActionPayload) { super.onAction(payload); if (payload.action === Action.ViewUser) { if (payload.member) { @@ -79,7 +79,7 @@ export default class RoomHeaderButtons extends HeaderButtons { this.setPhase(RightPanelPhases.NotificationPanel); } - renderButtons() { + public renderButtons() { return [ ; } - renderVerifiedPhase() { + private renderVerifiedPhase() { const {member, request} = this.props; let text: string; @@ -281,7 +281,7 @@ export default class VerificationPanel extends React.PureComponent Date: Thu, 30 Jul 2020 16:13:13 +0530 Subject: [PATCH 27/27] Change public to protected for onAction --- src/components/views/right_panel/GroupHeaderButtons.tsx | 2 +- src/components/views/right_panel/HeaderButtons.tsx | 2 +- src/components/views/right_panel/RoomHeaderButtons.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx index 0bbbea78e3..44237e401f 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.tsx +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -45,7 +45,7 @@ export default class GroupHeaderButtons extends HeaderButtons { this.onRoomsClicked = this.onRoomsClicked.bind(this); } - public onAction(payload: ActionPayload) { + protected onAction(payload: ActionPayload) { super.onAction(payload); if (payload.action === Action.ViewUser) { diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 8239a52dea..57d3075739 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -62,7 +62,7 @@ export default class HeaderButtons extends React.Component { if (this.dispatcherRef) dis.unregister(this.dispatcherRef); } - public onAction(payload) { + protected onAction(payload) { // Ignore - intended to be overridden by subclasses } diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 636e29443a..7ac547f499 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -41,7 +41,7 @@ export default class RoomHeaderButtons extends HeaderButtons { this.onNotificationsClicked = this.onNotificationsClicked.bind(this); } - public onAction(payload: ActionPayload) { + protected onAction(payload: ActionPayload) { super.onAction(payload); if (payload.action === Action.ViewUser) { if (payload.member) {