migrated do_verify_email component to typescript (mattermost#5426)

* migrated do_verify_email component to typescript

* fixed the review comments

components/do_verify_email/do_verify_email.test.jsx → components/do_verify_email/do_verify_email.test.tsx

@@ -4,15 +4,12 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import DoVerifyEmail from 'components/do_verify_email/do_verify_email.jsx';
+import DoVerifyEmail from 'components/do_verify_email/do_verify_email';
 
 describe('components/DoVerifyEmail', () => {
  const requiredProps = {
  location: {
- query: {
- token: '9f392f193973g11ggh398h39hg0ghH',
- email: '[email protected]',
- },
+ search: '?token=9f392f193973g11ggh398h39hg0ghH&[email protected]'
  },
  siteName: 'Mattermost',
  actions: {
@@ -45,6 +42,7 @@ describe('components/DoVerifyEmail', () => {
  <DoVerifyEmail {...requiredProps}/>
  );
 
- expect(wrapper.state('serverError')).not.toBeNull();
+ expect(wrapper.state('serverError')).toBeDefined();
+ expect(wrapper.state('serverError')).toBeNull();
  });
 });

components/do_verify_email/do_verify_email.jsx → components/do_verify_email/do_verify_email.tsx

@@ -1,104 +1,87 @@
 // 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 {Error} from 'mattermost-redux/types/errors';
+
+import {UserProfile} from 'mattermost-redux/types/users';
+
+import {ActionFunc, ActionResult} from 'mattermost-redux/types/actions';
+
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {browserHistory} from 'utils/browser_history';
-import {AnnouncementBarTypes, AnnouncementBarMessages, VerifyEmailErrors} from 'utils/constants';
+import {AnnouncementBarMessages, VerifyEmailErrors} from 'utils/constants';
 import logoImage from 'images/logo.png';
 import BackButton from 'components/common/back_button';
 import LoadingScreen from 'components/loading_screen';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
 
-export default class DoVerifyEmail extends React.PureComponent {
- static propTypes = {
-
- /**
- * Object with validation parameters given in link
- */
- location: PropTypes.object.isRequired,
-
- /**
- * Title of the app or site.
- */
- siteName: PropTypes.string,
-
- /*
- * Object with redux action creators
- */
- actions: PropTypes.shape({
-
- /*
- * Action creator to verify the user's email
- */
- verifyUserEmail: PropTypes.func.isRequired,
-
- /*
- * Action creator to update the user in the redux store
- */
- getMe: PropTypes.func.isRequired,
- logError: PropTypes.func.isRequired,
- clearErrors: PropTypes.func.isRequired,
- }).isRequired,
-
- /**
- * Object reprenseting the current user
- */
- user: PropTypes.shape({
- email_verified: PropTypes.bool,
- }),
-
- isLoggedIn: PropTypes.bool.isRequired,
- }
+type Props = {
+ location: {
+ search: string;
+ };
+ siteName?: string;
+ actions: {
+ verifyUserEmail: (token: string) => ActionFunc | ActionResult;
+ getMe: () => ActionFunc | ActionResult;
+ logError: (error: Error, displayable: boolean) => void;
+ clearErrors: () => void;
+ };
+ isLoggedIn: boolean;
+
+}
+
+type State = {
+ verifyStatus: string;
+ serverError: JSX.Element | null;
+}
 
- constructor(props) {
+export default class DoVerifyEmail extends React.PureComponent<Props, State> {
+ public constructor(props: Props) {
  super(props);
 
  this.state = {
  verifyStatus: 'pending',
- serverError: '',
+ serverError: null,
  };
  }
 
- componentDidMount() {
+ public componentDidMount(): void {
  this.verifyEmail();
  }
 
  handleRedirect() {
  if (this.props.isLoggedIn) {
  GlobalActions.redirectUserToDefaultTeam();
  } else {
- browserHistory.push('/login?extra=verified&email=' + encodeURIComponent((new URLSearchParams(this.props.location.search)).get('email')));
+ browserHistory.push('/login?extra=verified&email=' + encodeURIComponent((new URLSearchParams(this.props.location.search)).get('email') || ''));
  }
  }
 
- handleSuccess() {
+ async handleSuccess() {
  this.setState({verifyStatus: 'success'});
  this.props.actions.clearErrors();
  if (this.props.isLoggedIn) {
  this.props.actions.logError({
  message: AnnouncementBarMessages.EMAIL_VERIFIED,
- type: AnnouncementBarTypes.SUCCESS,
  }, true);
  trackEvent('settings', 'verify_email');
- this.props.actions.getMe().then(({data, error: err}) => {
- if (data) {
- this.handleRedirect();
- } else if (err) {
- this.handleError(VerifyEmailErrors.FAILED_USER_STATE_GET);
- }
- });
+ const me = await this.props.actions.getMe();
+ if ('data' in me) {
+ this.handleRedirect();
+ } else if ('error' in me) {
+ this.handleError(VerifyEmailErrors.FAILED_USER_STATE_GET);
+ }
  } else {
  this.handleRedirect();
  }
  }
 
- handleError(type) {
- let serverError = '';
+ handleError(type: string) {
+ let serverError = null;
  if (type === VerifyEmailErrors.FAILED_EMAIL_VERIFICATION) {
  serverError = (
  <FormattedMessage
@@ -122,11 +105,11 @@ export default class DoVerifyEmail extends React.PureComponent {
 
  verifyEmail = async () => {
  const {actions: {verifyUserEmail}} = this.props;
- const verify = await verifyUserEmail((new URLSearchParams(this.props.location.search)).get('token'));
+ const verify = await verifyUserEmail((new URLSearchParams(this.props.location.search)).get('token') || '');
 
- if (verify && verify.data) {
+ if ('data' in verify) {
  this.handleSuccess();
- } else if (verify && verify.error) {
+ } else if ('error' in verify) {
  this.handleError(VerifyEmailErrors.FAILED_EMAIL_VERIFICATION);
  }
  }
@@ -171,7 +154,3 @@ export default class DoVerifyEmail extends React.PureComponent {
  );
  }
 }
-
-DoVerifyEmail.defaultProps = {
- location: {},
-};

components/do_verify_email/index.js → components/do_verify_email/index.ts

@@ -1,26 +1,29 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {bindActionCreators} from 'redux';
+import {bindActionCreators, Dispatch} from 'redux';
 import {connect} from 'react-redux';
 import {verifyUserEmail, getMe} from 'mattermost-redux/actions/users';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getCurrentUserId, getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 import {clearErrors, logError} from 'mattermost-redux/actions/errors';
 
-import DoVerifyEmail from './do_verify_email.jsx';
+import {GenericAction} from 'mattermost-redux/types/actions';
 
-function mapStateToProps(state) {
+import {GlobalState} from '../../types/store';
+
+import DoVerifyEmail from './do_verify_email';
+
+function mapStateToProps(state: GlobalState) {
  const config = getConfig(state);
  const siteName = config.SiteName;
  return {
  isLoggedIn: Boolean(getCurrentUserId(state)),
  siteName,
- user: getCurrentUser(state),
  };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
  return {
  actions: bindActionCreators({
  verifyUserEmail,