Migrate InlineTermsAgreement to TypeScript

src/components/views/terms/InlineTermsAgreement.tsx

@@ -15,39 +15,48 @@ limitations under the License.
 */
 
 import React from "react";
-import PropTypes from "prop-types";
 import { _t, pickBestLanguage } from "../../../languageHandler";
 import * as sdk from "../../..";
 import { objectClone } from "../../../utils/objects";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    policiesAndServicePairs: any[];
+    onFinished: (string) => void;
+    agreedUrls: string[], // array of URLs the user has accepted
+    introElement: Node,
+}
+
+interface IState {
+    policies: Policy[],
+    busy: boolean;
+}
+
+interface Policy {
+    checked: boolean;
+    url: string;
+    name: string;
+}
+
 @replaceableComponent("views.terms.InlineTermsAgreement")
-export default class InlineTermsAgreement extends React.Component {
+export default class InlineTermsAgreement extends React.Component<IProps, IState> {
-    static propTypes = {
+    constructor(props: IProps) {
-        policiesAndServicePairs: PropTypes.array.isRequired, // array of service/policy pairs
+        super(props);
-        agreedUrls: PropTypes.array.isRequired, // array of URLs the user has accepted
-        onFinished: PropTypes.func.isRequired, // takes an argument of accepted URLs
-        introElement: PropTypes.node,
-    };
-
-    constructor() {
-        super();
-
         this.state = {
             policies: [],
             busy: false,
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         // Build all the terms the user needs to accept
         const policies = []; // { checked, url, name }
         for (const servicePolicies of this.props.policiesAndServicePairs) {
             const availablePolicies = Object.values(servicePolicies.policies);
             for (const policy of availablePolicies) {
                 const language = pickBestLanguage(Object.keys(policy).filter(p => p !== 'version'));
-                const renderablePolicy = {
+                const renderablePolicy: Policy = {
                     checked: false,
                     url: policy[language].url,
                     name: policy[language].name,
@@ -59,13 +68,13 @@ export default class InlineTermsAgreement extends React.Component {
         this.setState({ policies });
     }
 
-    _togglePolicy = (index) => {
+    private togglePolicy = (index: number): void => {
         const policies = objectClone(this.state.policies);
         policies[index].checked = !policies[index].checked;
         this.setState({ policies });
     };
 
-    _onContinue = () => {
+    private onContinue = (): void => {
         const hasUnchecked = !!this.state.policies.some(p => !p.checked);
         if (hasUnchecked) return;
 
@@ -73,7 +82,7 @@ export default class InlineTermsAgreement extends React.Component {
         this.props.onFinished(this.state.policies.map(p => p.url));
     };
 
-    _renderCheckboxes() {
+    private renderCheckboxes(): React.ReactNode[] {
         const rendered = [];
         for (let i = 0; i < this.state.policies.length; i++) {
             const policy = this.state.policies[i];
@@ -93,7 +102,7 @@ export default class InlineTermsAgreement extends React.Component {
                 <div key={i} className='mx_InlineTermsAgreement_cbContainer'>
                     <div>{introText}</div>
                     <div className='mx_InlineTermsAgreement_checkbox'>
-                        <StyledCheckbox onChange={() => this._togglePolicy(i)} checked={policy.checked}>
+                        <StyledCheckbox onChange={() => this.togglePolicy(i)} checked={policy.checked}>
                             {_t("Accept")}
                         </StyledCheckbox>
                     </div>
@@ -103,16 +112,16 @@ export default class InlineTermsAgreement extends React.Component {
         return rendered;
     }
 
-    render() {
+    public render(): React.ReactNode {
         const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
         const hasUnchecked = !!this.state.policies.some(p => !p.checked);
 
         return (
             <div>
                 {this.props.introElement}
-                {this._renderCheckboxes()}
+                {this.renderCheckboxes()}
                 <AccessibleButton
-                    onClick={this._onContinue}
+                    onClick={this.onContinue}
                     disabled={hasUnchecked || this.state.busy}
                     kind="primary_sm"
                 >