Convert RoomPublishSetting and LabelledToggleSwitch to Typescript

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 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.
@@ -14,34 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
-import PropTypes from "prop-types";
+
 import ToggleSwitch from "./ToggleSwitch";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.elements.LabelledToggleSwitch")
+interface IProps {
-export default class LabelledToggleSwitch extends React.Component {
-    static propTypes = {
     // The value for the toggle switch
-        value: PropTypes.bool.isRequired,
+    value: boolean;
-
-        // The function to call when the value changes
-        onChange: PropTypes.func.isRequired,
-
     // The translated label for the switch
-        label: PropTypes.string.isRequired,
+    label: string;
-
     // Whether or not to disable the toggle switch
-        disabled: PropTypes.bool,
+    disabled?: boolean;
-
     // True to put the toggle in front of the label
     // Default false.
-        toggleInFront: PropTypes.bool,
+    toggleInFront?: boolean;
-
     // Additional class names to append to the switch. Optional.
-        className: PropTypes.string,
+    className?: string;
-    };
+    // The function to call when the value changes
+    onChange(checked: boolean): void;
+}
 
+@replaceableComponent("views.elements.LabelledToggleSwitch")
+export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
     render() {
         // This is a minimal version of a SettingsFlag
 

src/components/views/room_settings/RoomPublishSetting.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 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.
@@ -14,20 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.room_settings.RoomPublishSetting")
+interface IProps {
-export default class RoomPublishSetting extends React.PureComponent {
+    roomId: string;
-    constructor(props) {
+    label?: string;
-        super(props);
+    canSetCanonicalAlias?: boolean;
-        this.state = {isRoomPublished: false};
 }
 
-    onRoomPublishChange = (e) => {
+interface IState {
+    isRoomPublished: boolean;
+}
+
+@replaceableComponent("views.room_settings.RoomPublishSetting")
+export default class RoomPublishSetting extends React.PureComponent<IProps, IState> {
+    public state = {
+        isRoomPublished: false,
+    };
+
+    private onRoomPublishChange = (e) => {
         const valueBefore = this.state.isRoomPublished;
         const newValue = !valueBefore;
         this.setState({isRoomPublished: newValue});
@@ -52,11 +62,14 @@ export default class RoomPublishSetting extends React.PureComponent {
     render() {
         const client = MatrixClientPeg.get();
 
-        return (<LabelledToggleSwitch value={this.state.isRoomPublished}
+        return (
+            <LabelledToggleSwitch value={this.state.isRoomPublished}
                 onChange={this.onRoomPublishChange}
                 disabled={!this.props.canSetCanonicalAlias}
                 label={_t("Publish this room to the public in %(domain)s's room directory?", {
                   domain: client.getDomain(),
-            })} />);
+                })}
+            />
+        );
     }
 }