diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx index 5f7bbd92bb..7ad9d2fa79 100644 --- a/client/modules/User/pages/EmailVerificationView.jsx +++ b/client/modules/User/pages/EmailVerificationView.jsx @@ -1,32 +1,31 @@ -import PropTypes from 'prop-types'; -import React, { useEffect } from 'react'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import { withTranslation } from 'react-i18next'; +import React, { useEffect, useMemo } from 'react'; import { Helmet } from 'react-helmet'; -import browserHistory from '../../../browserHistory'; +import { useLocation, useHistory } from 'react-router-dom'; +import { useSelector, useDispatch } from 'react-redux'; +import { useTranslation } from 'react-i18next'; import { verifyEmailConfirmation } from '../actions'; import RootPage from '../../../components/RootPage'; import Nav from '../../IDE/components/Header/Nav'; -const EmailVerificationView = (props) => { - const { emailVerificationTokenState, location, t } = props; - - const verificationTokenFromLocation = () => { +const EmailVerificationView = () => { + const { t } = useTranslation(); + const location = useLocation(); + const dispatch = useDispatch(); + const browserHistory = useHistory(); + const emailVerificationTokenState = useSelector( + (state) => state.user.emailVerificationTokenState + ); + const verificationToken = useMemo(() => { const searchParams = new URLSearchParams(location.search); return searchParams.get('t'); - }; - + }, [location.search]); useEffect(() => { - const verificationToken = verificationTokenFromLocation(); - if (verificationToken != null) { - props.verifyEmailConfirmation(verificationToken); + if (verificationToken) { + dispatch(verifyEmailConfirmation(verificationToken)); } - }, [location, props]); - + }, [dispatch, verificationToken]); let status = null; - - if (verificationTokenFromLocation() == null) { + if (!verificationToken) { status =

{t('EmailVerificationView.InvalidTokenNull')}

; } else if (emailVerificationTokenState === 'checking') { status =

{t('EmailVerificationView.Checking')}

; @@ -54,39 +53,4 @@ const EmailVerificationView = (props) => { ); }; - -function mapStateToProps(state) { - return { - emailVerificationTokenState: state.user.emailVerificationTokenState - }; -} - -function mapDispatchToProps(dispatch) { - return bindActionCreators( - { - verifyEmailConfirmation - }, - dispatch - ); -} - -EmailVerificationView.defaultProps = { - emailVerificationTokenState: null -}; - -EmailVerificationView.propTypes = { - emailVerificationTokenState: PropTypes.oneOf([ - 'checking', - 'verified', - 'invalid' - ]), - verifyEmailConfirmation: PropTypes.func.isRequired, - t: PropTypes.func.isRequired, - location: PropTypes.shape({ - search: PropTypes.string.isRequired - }).isRequired -}; - -export default withTranslation()( - connect(mapStateToProps, mapDispatchToProps)(EmailVerificationView) -); +export default EmailVerificationView;