Remove create-react-class

src/async-components/views/dialogs/ExportE2eKeysDialog.js

@@ -17,7 +17,6 @@ limitations under the License.
 import FileSaver from 'file-saver';
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
 import { MatrixClient } from 'matrix-js-sdk';
@@ -27,34 +26,31 @@ import * as sdk from '../../../index';
 const PHASE_EDIT = 1;
 const PHASE_EXPORTING = 2;
 
-export default createReactClass({
-    displayName: 'ExportE2eKeysDialog',
-
-    propTypes: {
+export default class ExportE2eKeysDialog extends React.Component {
+    static propTypes = {
         matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
-        return {
-            phase: PHASE_EDIT,
-            errStr: null,
-        };
-    },
+    constructor(props) {
+        super(props);
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
 
         this._passphrase1 = createRef();
         this._passphrase2 = createRef();
-    },
 
-    componentWillUnmount: function() {
+        this.state = {
+            phase: PHASE_EDIT,
+            errStr: null,
+        };
+    }
+
+    componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
-    _onPassphraseFormSubmit: function(ev) {
+    _onPassphraseFormSubmit = (ev) => {
         ev.preventDefault();
 
         const passphrase = this._passphrase1.current.value;
@@ -69,9 +65,9 @@ export default createReactClass({
 
         this._startExport(passphrase);
         return false;
-    },
+    };
 
-    _startExport: function(passphrase) {
+    _startExport(passphrase) {
         // extra Promise.resolve() to turn synchronous exceptions into
         // asynchronous ones.
         Promise.resolve().then(() => {
@@ -102,15 +98,15 @@ export default createReactClass({
             errStr: null,
             phase: PHASE_EXPORTING,
         });
-    },
+    }
 
-    _onCancelClick: function(ev) {
+    _onCancelClick = (ev) => {
         ev.preventDefault();
         this.props.onFinished(false);
         return false;
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         const disableForm = (this.state.phase === PHASE_EXPORTING);
@@ -184,5 +180,5 @@ export default createReactClass({
                 </form>
             </BaseDialog>
         );
-    },
-});
+    }
+}

src/async-components/views/dialogs/ImportE2eKeysDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 
 import { MatrixClient } from 'matrix-js-sdk';
 import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
@@ -38,48 +37,45 @@ function readFileAsArrayBuffer(file) {
 const PHASE_EDIT = 1;
 const PHASE_IMPORTING = 2;
 
-export default createReactClass({
-    displayName: 'ImportE2eKeysDialog',
-
-    propTypes: {
+export default class ImportE2eKeysDialog extends React.Component {
+    static propTypes = {
         matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
-        return {
-            enableSubmit: false,
-            phase: PHASE_EDIT,
-            errStr: null,
-        };
-    },
+    constructor(props) {
+        super(props);
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
 
         this._file = createRef();
         this._passphrase = createRef();
-    },
 
-    componentWillUnmount: function() {
+        this.state = {
+            enableSubmit: false,
+            phase: PHASE_EDIT,
+            errStr: null,
+        };
+    }
+
+    componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
-    _onFormChange: function(ev) {
+    _onFormChange = (ev) => {
         const files = this._file.current.files || [];
         this.setState({
             enableSubmit: (this._passphrase.current.value !== "" && files.length > 0),
         });
-    },
+    };
 
-    _onFormSubmit: function(ev) {
+    _onFormSubmit = (ev) => {
         ev.preventDefault();
         this._startImport(this._file.current.files[0], this._passphrase.current.value);
         return false;
-    },
+    };
 
-    _startImport: function(file, passphrase) {
+    _startImport(file, passphrase) {
         this.setState({
             errStr: null,
             phase: PHASE_IMPORTING,
@@ -105,15 +101,15 @@ export default createReactClass({
                 phase: PHASE_EDIT,
             });
         });
-    },
+    }
 
-    _onCancelClick: function(ev) {
+    _onCancelClick = (ev) => {
         ev.preventDefault();
         this.props.onFinished(false);
         return false;
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         const disableForm = (this.state.phase !== PHASE_EDIT);
@@ -188,5 +184,5 @@ export default createReactClass({
                 </form>
             </BaseDialog>
         );
-    },
-});
+    }
+}