Cleaned up email verification reducer logic

src/components/App.jsx

@@ -15,6 +15,10 @@ import NoMatch from "./Static/NoMatch";
 import Navbar from "./Navbar";
 
 class App extends Component {
+  componentDidMount() {
+
+  }
+
   render() {
     const footSmash = {
       display: "flex",
@@ -35,6 +39,10 @@ class App extends Component {
                 path="/auth/verify-email/:emailKey"
                 component={VerifyEmail}
               />
+              <Route
+                path="/auth/verify-email"
+                component={VerifyEmail}
+              />
               <PrivateRoute path="/auth/settings" component={Settings} />
               <Route path="/auth/forgot-password" component={ForgotPassword} />
               <Route path="/auth/reset-password/:uid/:token" component={ResetPassword} />

src/components/Auth/VerifyEmail.jsx

@@ -4,8 +4,8 @@ import { Link } from "react-router-dom";
 import { Container, Form, Header, Message } from "semantic-ui-react";
 
 import {
-  clearEmailVerificationError,
-  clearEmailVerificationSuccess,
+  clearAuthRequestError,
+  clearAuthRequestSuccess,
   setFormEmailVerification
 } from "../../actions/auth/reducer.actions";
 import { sendEmailVerificationRequest } from "../../actions/auth/saga.actions";
@@ -14,9 +14,12 @@ import Error from "../Shared/Error";
 class VerifyEmail extends Component {
   componentWillMount() {
     const emailKey = this.props.match.params.emailKey;
-    this.props.dispatch(clearEmailVerificationError());
-    this.props.dispatch(clearEmailVerificationSuccess());
+    this.props.dispatch(clearAuthRequestError());
+    this.props.dispatch(clearAuthRequestSuccess());
     this.props.dispatch(setFormEmailVerification(emailKey));
+    if (emailKey) {
+      this.props.dispatch(sendEmailVerificationRequest({ emailKey }));
+    }
   }
 
   changeEmailKey = event => {
@@ -34,15 +37,15 @@ class VerifyEmail extends Component {
   render() {
     const {
       isSendingAuthRequest,
-      emailVerificationRequestError,
-      emailVerificationRequestSuccess,
+      authRequestError,
+      authRequestSuccess,
       emailVerificationString
     } = this.props;
     return (
       <VerifyEmailView
         isSendingAuthRequest={isSendingAuthRequest}
-        emailVerificationRequestError={emailVerificationRequestError}
-        emailVerificationRequestSuccess={emailVerificationRequestSuccess}
+        authRequestError={authRequestError}
+        authRequestSuccess={authRequestSuccess}
         emailVerificationString={emailVerificationString}
         changeEmailKey={this.changeEmailKey}
         onSubmitEmailVerification={this.onSubmitEmailVerification}
@@ -57,8 +60,8 @@ function mapStateToProps(state) {
 
 const VerifyEmailView = ({
   isSendingAuthRequest,
-  emailVerificationRequestError,
-  emailVerificationRequestSuccess,
+  authRequestError,
+  authRequestSuccess,
   emailVerificationString,
   changeEmailKey,
   onSubmitEmailVerification
@@ -68,8 +71,8 @@ const VerifyEmailView = ({
     <Form
       loading={isSendingAuthRequest}
       onSubmit={onSubmitEmailVerification}
-      error={!!emailVerificationRequestError}
-      success={!!emailVerificationRequestSuccess}
+      error={!!authRequestError}
+      success={!!authRequestSuccess}
     >
       <Form.Field>
         <label>Email Verification Key</label>
@@ -80,10 +83,7 @@ const VerifyEmailView = ({
           onChange={changeEmailKey}
         />
       </Form.Field>
-      <Error
-        header="Email Verification failed!"
-        error={emailVerificationRequestError}
-      />
+      <Error header="Email Verification failed!" error={authRequestError} />
       <Message success>
         <Message.Header>Email Verified!</Message.Header>
         <p>Please proceed to <Link to="/auth/login">log in</Link>.</p>

src/components/Shared/PrivateRoute.jsx

@@ -4,7 +4,8 @@ import { connect } from "react-redux";
 import { Redirect, Route } from "react-router-dom";
 
 const propTypes = {
-  userToken: PropTypes.string,
+  path: PropTypes.string.isRequired,
+  userToken: PropTypes.string.isRequired,
   component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired
 };