Update component logic to return null early

rickmachadotwilio · Jul 14, 2020 · 0fcb5b6 · 0fcb5b6
1 parent 2704d2f
commit 0fcb5b6
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 44 deletions.
diff --git a/src/components/Verify/Verify.jsx b/src/components/Verify/Verify.jsx
@@ -12,77 +12,78 @@ import {
 } from './Verify.Styles';
 
 
-export const StateLoader = withTaskContext(({ task, loadState }) => {
+export const StateLoader = withTaskContext(({task, loadState}) => {
   loadState(task.sid);
   return null;
 });
 
 export const VerifyButton = withTaskContext(
   ({verified, pendingSent, tokenSent, task, startVerification}) => {
-    if (!verified && !tokenSent && task.status === 'accepted') {
-      const to = task.defaultFrom;
-      if (pendingSent) {
-        return (
-          <DisabledButtonStyles>
-            VERIFICATION SENT
-          </DisabledButtonStyles>
-        )
-      }
+    if (verified || tokenSent || task.status !== 'accepted') {
+      return null;
+    }
 
+    const to = task.defaultFrom;
+    if (pendingSent) {
       return (
-        <StartVerifyButtonStyles onClick={() => startVerification(to, task.sid)}>
-          SEND VERIFICATION TOKEN TO USER
-        </StartVerifyButtonStyles>
-      );
-    } else {
-      return null;
+        <DisabledButtonStyles>
+          VERIFICATION SENT
+        </DisabledButtonStyles>
+      )
     }
+
+    return (
+      <StartVerifyButtonStyles onClick={() => startVerification(to, task.sid)}>
+        SEND VERIFICATION TOKEN TO USER
+      </StartVerifyButtonStyles>
+    );
   }
 );
 
 export const TokenForm = withTaskContext(
   ({tokenSent, verified, task, checkVerification}) => {
-    if (tokenSent && !verified && task.status === 'accepted') {
-      return (
-        <InputContainerStyles>
-          <InputTokenStyles type="text" placeholder="Verification token" id="token" />
-          <TokenSubmitStyles type="button" onClick={() => {
-            const token = document.getElementById("token").value;
-            checkVerification(token, task.defaultFrom, task.sid);
-          }}><Icon icon="AcceptLarge"></Icon></TokenSubmitStyles>
-        </InputContainerStyles>
-      )
-    } else {
+    if (!tokenSent || verified || task.status !== 'accepted') {
       return null;
     }
+
+    return (
+      <InputContainerStyles>
+        <InputTokenStyles type="text" placeholder="Verification token" id="token" />
+        <TokenSubmitStyles type="button" onClick={() => {
+          const token = document.getElementById("token").value;
+          checkVerification(token, task.defaultFrom, task.sid);
+        }}><Icon icon="AcceptLarge"></Icon></TokenSubmitStyles>
+      </InputContainerStyles>
+    )
   }
 );
 
-export const VerifyBanner = withTaskContext(({verified, task, loadState}) => {
-  if (verified && task.status === 'accepted') {
-    return (
-      <VerifiedBannerStyles>
-        CUSTOMER VERIFIED
-      </VerifiedBannerStyles>
-    );
-  } else {
+export const VerifyBanner = withTaskContext(({verified, task}) => {
+  if (!verified || task.status !== 'accepted') {
     return null;
   }
+
+  return (
+    <VerifiedBannerStyles>
+      CUSTOMER VERIFIED
+    </VerifiedBannerStyles>
+  );
 });
 
 export const ErrorMessage = ({error}) => {
-  if (typeof error != 'undefined') {
-    return (
-      <ErrorMessageStyles>
-        {error}
-      </ErrorMessageStyles>
-    )
-  } else {
+  if (typeof error === 'undefined') {
     return null;
   }
+
+  return (
+    <ErrorMessageStyles>
+      {error}
+    </ErrorMessageStyles>
+  );
 };
 
 export const AuthenticatedTaskInfoPanel = withTaskContext(({verified}) => {
-  if (verified) return <TaskInfoPanel />
-  else return null
+  if (!verified) return null;
+
+  return <TaskInfoPanel />
 });
diff --git a/src/states/VerifyState.js b/src/states/VerifyState.js
@@ -103,6 +103,9 @@ export function reduce(state = initialState, action) {
     case `${ACTION_START_VERIFICATION}_FULFILLED`: {
       const success = action.payload.success;
       const error = success ? {} : {error: action.payload.error.message}
+      if (success) {
+        delete state.error;
+      }
 
       const tokenSentKey = TOKEN_SENT_STATE_KEY(action.payload.taskSid);
       localStorage.setItem(tokenSentKey, success);
@@ -125,6 +128,10 @@ export function reduce(state = initialState, action) {
     case `${ACTION_CHECK_VERIFICATION}_FULFILLED`: {
       const success = action.payload.success;
       const error = success ? {} : {error: "Incorrect token."};
+      if (success) {
+        delete state.error;
+      }
+
       const verifiedKey = VERIFIED_STATE_KEY(action.payload.taskSid);
       localStorage.setItem(verifiedKey, success);