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

Migrate UserSettingsDialog to TypeScript

Browse source
This commit is contained in:
Germain Souquet 2021-06-14 23:42:36 +01:00
parent a030c1270a
commit de414cd0a6
8 changed files with 55 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/SpaceRoomView.tsx
View file

@ -59,7 +59,7 @@ import IconizedContextMenu, {
} from "../views/context_menus/IconizedContextMenu"; } from "../views/context_menus/IconizedContextMenu";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import {BetaPill} from "../views/beta/BetaCard"; import {BetaPill} from "../views/beta/BetaCard";
import {USER_LABS_TAB} from "../views/dialogs/UserSettingsDialog"; import { USER_TAB } from "../views/dialogs/UserSettingsDialog";
import SettingsStore from "../../settings/SettingsStore"; import SettingsStore from "../../settings/SettingsStore";
import dis from "../../dispatcher/dispatcher"; import dis from "../../dispatcher/dispatcher";
import Modal from "../../Modal"; import Modal from "../../Modal";
@ -165,7 +165,7 @@ const SpaceInfo = ({ space }) => {
const onBetaClick = () => { const onBetaClick = () => {
defaultDispatcher.dispatch({ defaultDispatcher.dispatch({
action: Action.ViewUserSettings, action: Action.ViewUserSettings,
initialTabId: USER_LABS_TAB, initialTabId: USER_TAB.LABS,
}); });
}; };

6
src/components/structures/UserMenu.tsx
View file

@ -26,7 +26,7 @@ import { ActionPayload } from "../../dispatcher/payloads";
import { Action } from "../../dispatcher/actions"; import { Action } from "../../dispatcher/actions";
import { _t } from "../../languageHandler"; import { _t } from "../../languageHandler";
import { ContextMenuButton } from "./ContextMenu"; import { ContextMenuButton } from "./ContextMenu";
import { USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB } from "../views/dialogs/UserSettingsDialog"; import { USER_TAB } from "../views/dialogs/UserSettingsDialog";
import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload"; import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
import FeedbackDialog from "../views/dialogs/FeedbackDialog"; import FeedbackDialog from "../views/dialogs/FeedbackDialog";
import Modal from "../../Modal"; import Modal from "../../Modal";
@ -408,12 +408,12 @@ export default class UserMenu extends React.Component<IProps, IState> {
<IconizedContextMenuOption <IconizedContextMenuOption
iconClassName="mx_UserMenu_iconBell" iconClassName="mx_UserMenu_iconBell"
label={_t("Notification settings")} label={_t("Notification settings")}
onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)} onClick={(e) => this.onSettingsOpen(e, USER_TAB.NOTIFICATIONS)}
/> />
<IconizedContextMenuOption <IconizedContextMenuOption
iconClassName="mx_UserMenu_iconLock" iconClassName="mx_UserMenu_iconLock"
label={_t("Security & privacy")} label={_t("Security & privacy")}
onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)} onClick={(e) => this.onSettingsOpen(e, USER_TAB.SECURITY)}
/> />
<IconizedContextMenuOption <IconizedContextMenuOption
iconClassName="mx_UserMenu_iconSettings" iconClassName="mx_UserMenu_iconSettings"

4
src/components/views/dialogs/BetaFeedbackDialog.tsx
View file

@ -29,7 +29,7 @@ import InfoDialog from "./InfoDialog";
import AccessibleButton from "../elements/AccessibleButton"; import AccessibleButton from "../elements/AccessibleButton";
import defaultDispatcher from "../../../dispatcher/dispatcher"; import defaultDispatcher from "../../../dispatcher/dispatcher";
import {Action} from "../../../dispatcher/actions"; import {Action} from "../../../dispatcher/actions";
import {USER_LABS_TAB} from "./UserSettingsDialog"; import { USER_TAB } from "./UserSettingsDialog";
interface IProps extends IDialogProps { interface IProps extends IDialogProps {
featureId: string; featureId: string;
@ -70,7 +70,7 @@ const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
onFinished(false); onFinished(false);
defaultDispatcher.dispatch({ defaultDispatcher.dispatch({
action: Action.ViewUserSettings, action: Action.ViewUserSettings,
initialTabId: USER_LABS_TAB, initialTabId: USER_TAB.LABS,
}); });
}}> }}>
{ _t("To leave the beta, visit your settings.") } { _t("To leave the beta, visit your settings.") }

75
src/components/views/dialogs/UserSettingsDialog.js → src/components/views/dialogs/UserSettingsDialog.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import TabbedView, {Tab} from "../../structures/TabbedView"; import TabbedView, {Tab} from "../../structures/TabbedView";
import {_t, _td} from "../../../languageHandler"; import {_t, _td} from "../../../languageHandler";
import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab"; import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
@ -35,41 +34,49 @@ import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab
import {UIFeature} from "../../../settings/UIFeature"; import {UIFeature} from "../../../settings/UIFeature";
import {replaceableComponent} from "../../../utils/replaceableComponent"; import {replaceableComponent} from "../../../utils/replaceableComponent";
export const USER_GENERAL_TAB = "USER_GENERAL_TAB"; export enum USER_TAB {
export const USER_APPEARANCE_TAB = "USER_APPEARANCE_TAB"; GENERAL = "USER_GENERAL_TAB",
export const USER_FLAIR_TAB = "USER_FLAIR_TAB"; APPEARANCE = "USER_APPEARANCE_TAB",
export const USER_NOTIFICATIONS_TAB = "USER_NOTIFICATIONS_TAB"; FLAIR = "USER_FLAIR_TAB",
export const USER_PREFERENCES_TAB = "USER_PREFERENCES_TAB"; NOTIFICATIONS = "USER_NOTIFICATIONS_TAB",
export const USER_VOICE_TAB = "USER_VOICE_TAB"; PREFERENCES = "USER_PREFERENCES_TAB",
export const USER_SECURITY_TAB = "USER_SECURITY_TAB"; VOICE = "USER_VOICE_TAB",
export const USER_LABS_TAB = "USER_LABS_TAB"; SECURITY = "USER_SECURITY_TAB",
export const USER_MJOLNIR_TAB = "USER_MJOLNIR_TAB"; LABS = "USER_LABS_TAB",
export const USER_HELP_TAB = "USER_HELP_TAB"; MJOLNIR = "USER_MJOLNIR_TAB",
HELP = "USER_HELP_TAB",
}
interface IProps {
onFinished: (success: boolean) => void;
initialTabId?: string;
}
interface IState {
mjolnirEnabled: boolean;
}
@replaceableComponent("views.dialogs.UserSettingsDialog") @replaceableComponent("views.dialogs.UserSettingsDialog")
export default class UserSettingsDialog extends React.Component { export default class UserSettingsDialog extends React.Component<IProps, IState> {
static propTypes = { private mjolnirWatcher: string;
onFinished: PropTypes.func.isRequired,
initialTabId: PropTypes.string,
};
constructor() { constructor(props) {
super(); super(props);
this.state = { this.state = {
mjolnirEnabled: SettingsStore.getValue("feature_mjolnir"), mjolnirEnabled: SettingsStore.getValue("feature_mjolnir"),
}; };
} }
componentDidMount(): void { public componentDidMount(): void {
this._mjolnirWatcher = SettingsStore.watchSetting("feature_mjolnir", null, this._mjolnirChanged.bind(this)); this.mjolnirWatcher = SettingsStore.watchSetting("feature_mjolnir", null, this.mjolnirChanged);
} }
componentWillUnmount(): void { public componentWillUnmount(): void {
SettingsStore.unwatchSetting(this._mjolnirWatcher); SettingsStore.unwatchSetting(this.mjolnirWatcher);
} }
_mjolnirChanged(settingName, roomId, atLevel, newValue) { private mjolnirChanged = (settingName, roomId, atLevel, newValue: boolean) => {
// We can cheat because we know what levels a feature is tracked at, and how it is tracked // We can cheat because we know what levels a feature is tracked at, and how it is tracked
this.setState({mjolnirEnabled: newValue}); this.setState({mjolnirEnabled: newValue});
} }
@ -78,33 +85,33 @@ export default class UserSettingsDialog extends React.Component {
const tabs = []; const tabs = [];
tabs.push(new Tab( tabs.push(new Tab(
USER_GENERAL_TAB, USER_TAB.GENERAL,
_td("General"), _td("General"),
"mx_UserSettingsDialog_settingsIcon", "mx_UserSettingsDialog_settingsIcon",
<GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />, <GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
)); ));
tabs.push(new Tab( tabs.push(new Tab(
USER_APPEARANCE_TAB, USER_TAB.APPEARANCE,
_td("Appearance"), _td("Appearance"),
"mx_UserSettingsDialog_appearanceIcon", "mx_UserSettingsDialog_appearanceIcon",
<AppearanceUserSettingsTab />, <AppearanceUserSettingsTab />,
)); ));
if (SettingsStore.getValue(UIFeature.Flair)) { if (SettingsStore.getValue(UIFeature.Flair)) {
tabs.push(new Tab( tabs.push(new Tab(
USER_FLAIR_TAB, USER_TAB.FLAIR,
_td("Flair"), _td("Flair"),
"mx_UserSettingsDialog_flairIcon", "mx_UserSettingsDialog_flairIcon",
<FlairUserSettingsTab />, <FlairUserSettingsTab />,
)); ));
} }
tabs.push(new Tab( tabs.push(new Tab(
USER_NOTIFICATIONS_TAB, USER_TAB.NOTIFICATIONS,
_td("Notifications"), _td("Notifications"),
"mx_UserSettingsDialog_bellIcon", "mx_UserSettingsDialog_bellIcon",
<NotificationUserSettingsTab />, <NotificationUserSettingsTab />,
)); ));
tabs.push(new Tab( tabs.push(new Tab(
USER_PREFERENCES_TAB, USER_TAB.PREFERENCES,
_td("Preferences"), _td("Preferences"),
"mx_UserSettingsDialog_preferencesIcon", "mx_UserSettingsDialog_preferencesIcon",
<PreferencesUserSettingsTab />, <PreferencesUserSettingsTab />,
@ -112,7 +119,7 @@ export default class UserSettingsDialog extends React.Component {
if (SettingsStore.getValue(UIFeature.Voip)) { if (SettingsStore.getValue(UIFeature.Voip)) {
tabs.push(new Tab( tabs.push(new Tab(
USER_VOICE_TAB, USER_TAB.VOICE,
_td("Voice & Video"), _td("Voice & Video"),
"mx_UserSettingsDialog_voiceIcon", "mx_UserSettingsDialog_voiceIcon",
<VoiceUserSettingsTab />, <VoiceUserSettingsTab />,
@ -120,7 +127,7 @@ export default class UserSettingsDialog extends React.Component {
} }
tabs.push(new Tab( tabs.push(new Tab(
USER_SECURITY_TAB, USER_TAB.SECURITY,
_td("Security & Privacy"), _td("Security & Privacy"),
"mx_UserSettingsDialog_securityIcon", "mx_UserSettingsDialog_securityIcon",
<SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />, <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
@ -130,7 +137,7 @@ export default class UserSettingsDialog extends React.Component {
|| SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k)) || SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k))
) { ) {
tabs.push(new Tab( tabs.push(new Tab(
USER_LABS_TAB, USER_TAB.LABS,
_td("Labs"), _td("Labs"),
"mx_UserSettingsDialog_labsIcon", "mx_UserSettingsDialog_labsIcon",
<LabsUserSettingsTab />, <LabsUserSettingsTab />,
@ -138,17 +145,17 @@ export default class UserSettingsDialog extends React.Component {
} }
if (this.state.mjolnirEnabled) { if (this.state.mjolnirEnabled) {
tabs.push(new Tab( tabs.push(new Tab(
USER_MJOLNIR_TAB, USER_TAB.MJOLNIR,
_td("Ignored users"), _td("Ignored users"),
"mx_UserSettingsDialog_mjolnirIcon", "mx_UserSettingsDialog_mjolnirIcon",
<MjolnirUserSettingsTab />, <MjolnirUserSettingsTab />,
)); ));
} }
tabs.push(new Tab( tabs.push(new Tab(
USER_HELP_TAB, USER_TAB.HELP,
_td("Help & About"), _td("Help & About"),
"mx_UserSettingsDialog_helpIcon", "mx_UserSettingsDialog_helpIcon",
<HelpUserSettingsTab closeSettingsFn={this.props.onFinished} />, <HelpUserSettingsTab closeSettingsFn={() => this.props.onFinished(true)} />,
)); ));
return tabs; return tabs;

4
src/components/views/right_panel/UserInfo.tsx
View file

@ -48,7 +48,7 @@ import EncryptionPanel from "./EncryptionPanel";
import { useAsyncMemo } from '../../../hooks/useAsyncMemo'; import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification'; import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification';
import { Action } from "../../../dispatcher/actions"; import { Action } from "../../../dispatcher/actions";
import { USER_SECURITY_TAB } from "../dialogs/UserSettingsDialog"; import { USER_TAB } from "../dialogs/UserSettingsDialog";
import { useIsEncrypted } from "../../../hooks/useIsEncrypted"; import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
import BaseCard from "./BaseCard"; import BaseCard from "./BaseCard";
import { E2EStatus } from "../../../utils/ShieldUtils"; import { E2EStatus } from "../../../utils/ShieldUtils";
@ -1381,7 +1381,7 @@ const BasicUserInfo: React.FC<{
<AccessibleButton className="mx_UserInfo_field" onClick={() => { <AccessibleButton className="mx_UserInfo_field" onClick={() => {
dis.dispatch({ dis.dispatch({
action: Action.ViewUserSettings, action: Action.ViewUserSettings,
initialTabId: USER_SECURITY_TAB, initialTabId: USER_TAB.SECURITY,
}); });
}}> }}>
{ _t("Edit devices") } { _t("Edit devices") }

2
src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
View file

@ -32,7 +32,7 @@ import * as ContextMenu from "../../../../structures/ContextMenu";
import { toRightOf } from "../../../../structures/ContextMenu"; import { toRightOf } from "../../../../structures/ContextMenu";
interface IProps { interface IProps {
closeSettingsFn: () => {}; closeSettingsFn: () => void;
} }
interface IState { interface IState {

4
src/components/views/spaces/SpaceCreateMenu.tsx
View file

@ -29,7 +29,7 @@ import AccessibleButton from "../elements/AccessibleButton";
import {BetaPill} from "../beta/BetaCard"; import {BetaPill} from "../beta/BetaCard";
import defaultDispatcher from "../../../dispatcher/dispatcher"; import defaultDispatcher from "../../../dispatcher/dispatcher";
import {Action} from "../../../dispatcher/actions"; import {Action} from "../../../dispatcher/actions";
import {USER_LABS_TAB} from "../dialogs/UserSettingsDialog"; import { USER_TAB } from "../dialogs/UserSettingsDialog";
import Field from "../elements/Field"; import Field from "../elements/Field";
import withValidation from "../elements/Validation"; import withValidation from "../elements/Validation";
import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView"; import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
@ -222,7 +222,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
onFinished(); onFinished();
defaultDispatcher.dispatch({ defaultDispatcher.dispatch({
action: Action.ViewUserSettings, action: Action.ViewUserSettings,
initialTabId: USER_LABS_TAB, initialTabId: USER_TAB.LABS,
}); });
}} /> }} />
{ body } { body }

4
src/toasts/UnverifiedSessionToast.ts
View file

@ -21,7 +21,7 @@ import DeviceListener from '../DeviceListener';
import ToastStore from "../stores/ToastStore"; import ToastStore from "../stores/ToastStore";
import GenericToast from "../components/views/toasts/GenericToast"; import GenericToast from "../components/views/toasts/GenericToast";
import { Action } from "../dispatcher/actions"; import { Action } from "../dispatcher/actions";
import { USER_SECURITY_TAB } from "../components/views/dialogs/UserSettingsDialog"; import { USER_TAB } from "../components/views/dialogs/UserSettingsDialog";
function toastKey(deviceId: string) { function toastKey(deviceId: string) {
return "unverified_session_" + deviceId; return "unverified_session_" + deviceId;
@ -34,7 +34,7 @@ export const showToast = async (deviceId: string) => {
DeviceListener.sharedInstance().dismissUnverifiedSessions([deviceId]); DeviceListener.sharedInstance().dismissUnverifiedSessions([deviceId]);
dis.dispatch({ dis.dispatch({
action: Action.ViewUserSettings, action: Action.ViewUserSettings,
initialTabId: USER_SECURITY_TAB, initialTabId: USER_TAB.SECURITY,
}); });
}; };