11import PropTypes from 'prop-types' ;
2- import React from 'react' ;
2+ import React , { useEffect } from 'react' ;
33import { connect } from 'react-redux' ;
44import { bindActionCreators } from 'redux' ;
55import { withTranslation } from 'react-i18next' ;
@@ -9,57 +9,51 @@ import { verifyEmailConfirmation } from '../actions';
99import RootPage from '../../../components/RootPage' ;
1010import Nav from '../../IDE/components/Header/Nav' ;
1111
12- class EmailVerificationView extends React . Component {
13- static defaultProps = {
14- emailVerificationTokenState : null
15- } ;
16-
17- componentWillMount ( ) {
18- const verificationToken = this . verificationToken ( ) ;
19- if ( verificationToken != null ) {
20- this . props . verifyEmailConfirmation ( verificationToken ) ;
21- }
22- }
12+ const EmailVerificationView = ( props ) => {
13+ const { emailVerificationTokenState, location, t } = props ;
2314
24- verificationToken = ( ) => {
25- const { location } = this . props ;
15+ const verificationTokenFromLocation = ( ) => {
2616 const searchParams = new URLSearchParams ( location . search ) ;
2717 return searchParams . get ( 't' ) ;
2818 } ;
2919
30- render ( ) {
31- let status = null ;
32- const { emailVerificationTokenState } = this . props ;
33-
34- if ( this . verificationToken ( ) == null ) {
35- status = < p > { this . props . t ( 'EmailVerificationView.InvalidTokenNull' ) } </ p > ;
36- } else if ( emailVerificationTokenState === 'checking' ) {
37- status = < p > { this . props . t ( 'EmailVerificationView.Checking' ) } </ p > ;
38- } else if ( emailVerificationTokenState === 'verified' ) {
39- status = < p > { this . props . t ( 'EmailVerificationView.Verified' ) } </ p > ;
40- setTimeout ( ( ) => browserHistory . push ( '/' ) , 1000 ) ;
41- } else if ( emailVerificationTokenState === 'invalid' ) {
42- status = < p > { this . props . t ( 'EmailVerificationView.InvalidState' ) } </ p > ;
20+ useEffect ( ( ) => {
21+ const verificationToken = verificationTokenFromLocation ( ) ;
22+ if ( verificationToken != null ) {
23+ props . verifyEmailConfirmation ( verificationToken ) ;
4324 }
25+ } , [ location , props ] ) ;
4426
45- return (
46- < RootPage >
47- < Nav layout = "dashboard" />
48- < div className = "form-container" >
49- < Helmet >
50- < title > { this . props . t ( 'EmailVerificationView.Title' ) } </ title >
51- </ Helmet >
52- < div className = "form-container__content" >
53- < h2 className = "form-container__title" >
54- { this . props . t ( 'EmailVerificationView.Verify' ) }
55- </ h2 >
56- { status }
57- </ div >
58- </ div >
59- </ RootPage >
60- ) ;
27+ let status = null ;
28+
29+ if ( verificationTokenFromLocation ( ) == null ) {
30+ status = < p > { t ( 'EmailVerificationView.InvalidTokenNull' ) } </ p > ;
31+ } else if ( emailVerificationTokenState === 'checking' ) {
32+ status = < p > { t ( 'EmailVerificationView.Checking' ) } </ p > ;
33+ } else if ( emailVerificationTokenState === 'verified' ) {
34+ status = < p > { t ( 'EmailVerificationView.Verified' ) } </ p > ;
35+ setTimeout ( ( ) => browserHistory . push ( '/' ) , 1000 ) ;
36+ } else if ( emailVerificationTokenState === 'invalid' ) {
37+ status = < p > { t ( 'EmailVerificationView.InvalidState' ) } </ p > ;
6138 }
62- }
39+
40+ return (
41+ < RootPage >
42+ < Nav layout = "dashboard" />
43+ < div className = "form-container" >
44+ < Helmet >
45+ < title > { t ( 'EmailVerificationView.Title' ) } </ title >
46+ </ Helmet >
47+ < div className = "form-container__content" >
48+ < h2 className = "form-container__title" >
49+ { t ( 'EmailVerificationView.Verify' ) }
50+ </ h2 >
51+ { status }
52+ </ div >
53+ </ div >
54+ </ RootPage >
55+ ) ;
56+ } ;
6357
6458function mapStateToProps ( state ) {
6559 return {
@@ -76,6 +70,10 @@ function mapDispatchToProps(dispatch) {
7670 ) ;
7771}
7872
73+ EmailVerificationView . defaultProps = {
74+ emailVerificationTokenState : null
75+ } ;
76+
7977EmailVerificationView . propTypes = {
8078 emailVerificationTokenState : PropTypes . oneOf ( [
8179 'checking' ,
0 commit comments