[MM-20514] Migrates components/password reset send link to typescript (…

…mattermost#6584) Co-authored-by: Caleb Roseland <caleb@calebroseland.com> Co-authored-by: Ben Schumacher <ben.schumacher@mattermost.com>
mattermost-build · Oct 13, 2020 · 767ef1f · 767ef1f
1 parent 48de995
commit 767ef1f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 32 deletions.
diff --git a/...s__/password_reset_send_link.test.js.snap → ...__/password_reset_send_link.test.tsx.snap b/...s__/password_reset_send_link.test.js.snap → ...__/password_reset_send_link.test.tsx.snap
diff --git a/components/password_reset_send_link/index.js b/components/password_reset_send_link/index.js
diff --git a/components/password_reset_send_link/index.ts b/components/password_reset_send_link/index.ts
@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {bindActionCreators, Dispatch, ActionCreatorsMapObject} from 'redux';
+import {connect} from 'react-redux';
+import {sendPasswordResetEmail} from 'mattermost-redux/actions/users';
+import {GenericAction, ActionFunc} from 'mattermost-redux/types/actions';
+import {ServerError} from 'mattermost-redux/types/errors';
+
+import PasswordResetSendLink from './password_reset_send_link';
+
+type Actions = {
+    sendPasswordResetEmail: (emal: string) => Promise<{data: any; error: ServerError}>;
+}
+
+const mapDispatchToProps = (dispatch: Dispatch<GenericAction>) => ({
+    actions: bindActionCreators<ActionCreatorsMapObject<ActionFunc>, Actions>({
+        sendPasswordResetEmail,
+    }, dispatch),
+});
+
+export default connect(null, mapDispatchToProps)(PasswordResetSendLink);
diff --git a/...end_link/password_reset_send_link.test.js → ...nd_link/password_reset_send_link.test.tsx b/...end_link/password_reset_send_link.test.js → ...nd_link/password_reset_send_link.test.tsx
@@ -30,7 +30,7 @@ describe('components/PasswordResetSendLink', () => {
             </MemoryRouter>,
         ).children().children();
 
-        wrapper.instance().emailInput.current.value = 'test@example.com';
+        (wrapper.instance() as PasswordResetSendLink).emailInput.current!.value = 'test@example.com';
         wrapper.find('form').simulate('submit', {preventDefault: () => {}});
 
         expect(props.actions.sendPasswordResetEmail).toHaveBeenCalledWith('test@example.com');

diff --git a/...set_send_link/password_reset_send_link.js → ...et_send_link/password_reset_send_link.tsx b/...set_send_link/password_reset_send_link.js → ...et_send_link/password_reset_send_link.tsx
@@ -1,41 +1,46 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {ServerError} from 'mattermost-redux/types/errors';
 import {isEmail} from 'mattermost-redux/utils/helpers';
 
 import BackButton from 'components/common/back_button';
 import LocalizedInput from 'components/localized_input/localized_input';
 
 import {t} from 'utils/i18n.jsx';
 
-export default class PasswordResetSendLink extends React.PureComponent {
-    static propTypes = {
-        actions: PropTypes.shape({
-            sendPasswordResetEmail: PropTypes.func.isRequired,
-        }).isRequired,
+interface Props {
+    actions: {
+        sendPasswordResetEmail: (email: string) => Promise<{data: any; error: ServerError}>;
     };
+}
+
+interface State {
+    error: React.ReactNode;
+    updateText: React.ReactNode;
+}
 
+export default class PasswordResetSendLink extends React.PureComponent<Props, State> {
     state = {
         error: null,
         updateText: null,
     };
-    resetForm = React.createRef();
-    emailInput = React.createRef();
+    resetForm = React.createRef<HTMLFormElement>();
+    emailInput = React.createRef<HTMLInputElement>();
 
-    handleSendLink = async (e) => {
+    handleSendLink = async (e: React.FormEvent) => {
         e.preventDefault();
 
-        const email = this.emailInput.current.value.trim().toLowerCase();
+        const email = this.emailInput.current!.value.trim().toLowerCase();
         if (!email || !isEmail(email)) {
             this.setState({
                 error: (
                     <FormattedMessage
-                        id={'password_send.error'}
-                        defaultMessage={'Please enter a valid email address.'}
+                        id='password_send.error'
+                        defaultMessage='Please enter a valid email address.'
                     />
                 ),
             });
@@ -75,10 +80,10 @@ export default class PasswordResetSendLink extends React.PureComponent {
         } else if (error) {
             this.setState({
                 error: error.message,
-                update_text: null,
+                updateText: null,
             });
         }
-    }
+    };
 
     render() {
         let error = null;
@@ -123,7 +128,10 @@ export default class PasswordResetSendLink extends React.PureComponent {
                                     type='email'
                                     className='form-control'
                                     name='email'
-                                    placeholder={{id: t('password_send.email'), defaultMessage: 'Email'}}
+                                    placeholder={{
+                                        id: t('password_send.email'),
+                                        defaultMessage: 'Email',
+                                    }}
                                     ref={this.emailInput}
                                     spellCheck='false'
                                     autoFocus={true}