Cleaned up email verification reducer logic

src/actions/auth/reducer.actions.js

@@ -4,10 +4,6 @@ import {
   CLEAR_AUTH_REQUEST_ERROR,
   SET_AUTH_REQUEST_SUCCESS,
   CLEAR_AUTH_REQUEST_SUCCESS,
-  SET_EMAIL_VERIFICATION_SUCCESS,
-  CLEAR_EMAIL_VERIFICATION_SUCCESS,
-  SET_EMAIL_VERIFICATION_ERROR,
-  CLEAR_EMAIL_VERIFICATION_ERROR,
   SET_SELF_USER_TOKEN,
   SET_FORM_EMAIL,
   SET_FORM_PASSWORD,
@@ -70,6 +66,10 @@ export function setAuthRequestError(exception) {
     error["UID"] = error.uid;
     delete error["uid"];
   }
+  if (error.key) {
+    error["Email Verification Key"] = error.key;
+    delete error["key"];
+  }
 
   return {
     type: SET_AUTH_REQUEST_ERROR,
@@ -96,42 +96,6 @@ export function clearAuthRequestSuccess() {
   };
 }
 
-export function setEmailVerificationError(exception) {
-  let error = parseError(exception);
-  if (error.detail) {
-    error["Email"] = error.detail;
-    delete error["detail"];
-  }
-  if (error.key) {
-    error["Verification Key"] = error.key;
-    delete error["key"];
-  }
-
-  return {
-    type: SET_EMAIL_VERIFICATION_ERROR,
-    data: error
-  };
-}
-
-export function clearEmailVerificationError() {
-  return {
-    type: CLEAR_EMAIL_VERIFICATION_ERROR
-  };
-}
-
-export function setEmailVerificationSuccess(response) {
-  return {
-    type: SET_EMAIL_VERIFICATION_SUCCESS,
-    data: response.detail || response
-  };
-}
-
-export function clearEmailVerificationSuccess() {
-  return {
-    type: CLEAR_EMAIL_VERIFICATION_SUCCESS
-  };
-}
-
 export function setSelfUserToken(selfUser) {
   return {
     type: SET_SELF_USER_TOKEN,

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,
+  clearAuthRequestError,
-  clearEmailVerificationSuccess,
+  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(clearAuthRequestError());
-    this.props.dispatch(clearEmailVerificationSuccess());
+    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,
+      authRequestError,
-      emailVerificationRequestSuccess,
+      authRequestSuccess,
       emailVerificationString
     } = this.props;
     return (
       <VerifyEmailView
         isSendingAuthRequest={isSendingAuthRequest}
-        emailVerificationRequestError={emailVerificationRequestError}
+        authRequestError={authRequestError}
-        emailVerificationRequestSuccess={emailVerificationRequestSuccess}
+        authRequestSuccess={authRequestSuccess}
         emailVerificationString={emailVerificationString}
         changeEmailKey={this.changeEmailKey}
         onSubmitEmailVerification={this.onSubmitEmailVerification}
@@ -57,8 +60,8 @@ function mapStateToProps(state) {
 
 const VerifyEmailView = ({
   isSendingAuthRequest,
-  emailVerificationRequestError,
+  authRequestError,
-  emailVerificationRequestSuccess,
+  authRequestSuccess,
   emailVerificationString,
   changeEmailKey,
   onSubmitEmailVerification
@@ -68,8 +71,8 @@ const VerifyEmailView = ({
     <Form
       loading={isSendingAuthRequest}
       onSubmit={onSubmitEmailVerification}
-      error={!!emailVerificationRequestError}
+      error={!!authRequestError}
-      success={!!emailVerificationRequestSuccess}
+      success={!!authRequestSuccess}
     >
       <Form.Field>
         <label>Email Verification Key</label>
@@ -80,10 +83,7 @@ const VerifyEmailView = ({
           onChange={changeEmailKey}
         />
       </Form.Field>
-      <Error
+      <Error header="Email Verification failed!" error={authRequestError} />
-        header="Email Verification failed!"
-        error={emailVerificationRequestError}
-      />
       <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
 };
 

src/constants/auth.constants.js

@@ -4,11 +4,6 @@ export const SET_AUTH_REQUEST_ERROR = "SET_AUTH_REQUEST_ERROR";
 export const CLEAR_AUTH_REQUEST_ERROR = "CLEAR_AUTH_REQUEST_ERROR";
 export const SET_AUTH_REQUEST_SUCCESS = "SET_AUTH_REQUEST_SUCCESS";
 export const CLEAR_AUTH_REQUEST_SUCCESS = "CLEAR_AUTH_REQUEST_SUCCESS";
-export const SET_EMAIL_VERIFICATION_SUCCESS = "SET_EMAIL_VERIFICATION_SUCCESS";
-export const CLEAR_EMAIL_VERIFICATION_SUCCESS =
-  "CLEAR_EMAIL_VERIFICATION_SUCCESS";
-export const SET_EMAIL_VERIFICATION_ERROR = "SET_EMAIL_VERIFICATION_ERROR";
-export const CLEAR_EMAIL_VERIFICATION_ERROR = "CLEAR_EMAIL_VERIFICATION_ERROR";
 export const SET_SELF_USER_TOKEN = "SET_SELF_USER_TOKEN";
 export const SET_FORM_EMAIL = "SET_FORM_EMAIL";
 export const SET_FORM_PASSWORD = "SET_FORM_PASSWORD";

src/reducers/authReducer.js

@@ -4,10 +4,6 @@ import {
   CLEAR_AUTH_REQUEST_ERROR,
   SET_AUTH_REQUEST_SUCCESS,
   CLEAR_AUTH_REQUEST_SUCCESS,
-  SET_EMAIL_VERIFICATION_ERROR,
-  CLEAR_EMAIL_VERIFICATION_ERROR,
-  SET_EMAIL_VERIFICATION_SUCCESS,
-  CLEAR_EMAIL_VERIFICATION_SUCCESS,
   SET_SELF_USER_TOKEN,
   SET_FORM_EMAIL,
   SET_FORM_PASSWORD,
@@ -32,8 +28,6 @@ const initialState = {
   isSendingAuthRequest: false,
   authRequestError: "",
   authRequestSuccess: "",
-  emailVerificationRequestError: "",
-  emailVerificationRequestSuccess: "",
   userToken: me(null),
   email: "",
   password: "",
@@ -69,26 +63,6 @@ function authReducer(state = initialState, action) {
         ...state,
         authRequestSuccess: ""
       };
-    case SET_EMAIL_VERIFICATION_ERROR:
-      return {
-        ...state,
-        emailVerificationRequestError: action.data
-      };
-    case CLEAR_EMAIL_VERIFICATION_ERROR:
-      return {
-        ...state,
-        emailVerificationRequestError: ""
-      };
-    case SET_EMAIL_VERIFICATION_SUCCESS:
-      return {
-        ...state,
-        emailVerificationRequestSuccess: action.data
-      };
-    case CLEAR_EMAIL_VERIFICATION_SUCCESS:
-      return {
-        ...state,
-        emailVerificationRequestSuccess: ""
-      };
     case SET_SELF_USER_TOKEN:
       return {
         ...state,

src/sagas/auth.sagas.js

@@ -3,17 +3,12 @@ import {
   isSendingAuthRequest,
   setAuthRequestError,
   setAuthRequestSuccess,
-  setEmailVerificationError,
-  setEmailVerificationSuccess,
   clearAuthRequestError,
-  clearEmailVerificationError,
   clearAuthRequestSuccess,
-  clearEmailVerificationSuccess,
   setSelfUserToken,
   setFormEmail,
   setFormPassword,
   setFormPasswordConfirmation,
-  setFormEmailVerification,
   setFormOldPassword
 } from "../actions/auth/reducer.actions";
 import {
@@ -45,7 +40,7 @@ function* verifyEmailCall(postBody) {
   try {
     return yield effects.call(verifyEmail, emailKey);
   } catch (exception) {
-    yield effects.put(setEmailVerificationError(exception));
+    yield effects.put(setAuthRequestError(exception));
     return false;
   } finally {
     yield effects.put(isSendingAuthRequest(false));
@@ -133,13 +128,12 @@ export function* registerUserFlow(request) {
 }
 
 export function* verifyEmailFlow(request) {
-  yield effects.put(clearEmailVerificationSuccess());
+  yield effects.put(clearAuthRequestSuccess());
-  yield effects.put(clearEmailVerificationError());
+  yield effects.put(clearAuthRequestError());
   const wasSuccessful = yield effects.call(verifyEmailCall, request.data);
   if (wasSuccessful) {
-    yield effects.put(setEmailVerificationSuccess(wasSuccessful));
+    yield effects.put(setAuthRequestSuccess(wasSuccessful));
-    yield effects.put(clearEmailVerificationError());
+    yield effects.put(clearAuthRequestError());
-    yield effects.put(setFormEmailVerification(""));
   }
 }