From 56eb31677734079987062c38cd7e1a520f79e9ba Mon Sep 17 00:00:00 2001
From: Ben Brooks <ben@code.org>
Date: Fri, 26 Jun 2020 16:07:02 -0700
Subject: [PATCH] Make state updates and session storage updates asynchronous

---
 .../amazonFutureEngineerEligibility.jsx       | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/src/templates/amazonFutureEngineerEligibility/amazonFutureEngineerEligibility.jsx b/apps/src/templates/amazonFutureEngineerEligibility/amazonFutureEngineerEligibility.jsx
index 39e4114cb5573..334ca09836356 100644
--- a/apps/src/templates/amazonFutureEngineerEligibility/amazonFutureEngineerEligibility.jsx
+++ b/apps/src/templates/amazonFutureEngineerEligibility/amazonFutureEngineerEligibility.jsx
@@ -85,16 +85,17 @@ export default class AmazonFutureEngineerEligibility extends React.Component {
   getSessionEligibilityData = () =>
     JSON.parse(sessionStorage.getItem(sessionStorageKey)) || {};
 
-  updateFormData = (change, callback = () => {}) => {
-    this.setState({formData: {...this.state.formData, ...change}}, callback);
+  updateFormData = change => {
+    this.setState({formData: {...this.state.formData, ...change}});
   };
 
   // Wrapper to allow saving data to session
-  // as a callback once a user submits the full eligibility form.
-  // Otherwise, component can be reloaded before data is stored to session,
-  // which can result in the incorrect component being rendered.
-  updateAndStoreFormData = formData => {
-    this.updateFormData(formData, this.saveToSessionStorage);
+  // once a user submits the full eligibility form.
+  updateAndStoreFormData = change => {
+    let newFormData = {...this.state.formData, ...change};
+
+    sessionStorage.setItem(sessionStorageKey, JSON.stringify(newFormData));
+    this.setState({formData: newFormData});
   };
 
   saveToSessionStorage = () => {
@@ -223,16 +224,15 @@ export default class AmazonFutureEngineerEligibility extends React.Component {
     });
   };
 
-  loadCompletionPage = () => {
+  loadCompletionPage = async () => {
     let sessionEligibilityData = this.getSessionEligibilityData();
 
     if (!sessionEligibilityData.submitted) {
-      this.submitToAFE().then(() => {
-        sessionStorage.setItem(
-          sessionStorageKey,
-          JSON.stringify({...sessionEligibilityData, submitted: true})
-        );
-      });
+      await this.submitToAFE();
+      sessionStorage.setItem(
+        sessionStorageKey,
+        JSON.stringify({...sessionEligibilityData, submitted: true})
+      );
     }
 
     window.location = pegasus('/afe/success');
@@ -241,6 +241,10 @@ export default class AmazonFutureEngineerEligibility extends React.Component {
   render() {
     let {formData} = this.state;
 
+    if (formData.schoolEligible && formData.consentAFE && formData.signedIn) {
+      this.loadCompletionPage();
+    }
+
     return (
       <div style={styles.container}>
         {formData.schoolEligible === null && (
@@ -293,10 +297,6 @@ export default class AmazonFutureEngineerEligibility extends React.Component {
         {formData.schoolEligible &&
           formData.consentAFE &&
           !formData.signedIn && <AmazonFutureEngineerAccountConfirmation />}
-        {formData.schoolEligible &&
-          formData.consentAFE &&
-          formData.signedIn &&
-          this.loadCompletionPage()}
       </div>
     );
   }