v1.0.0/release

finalize update and set logic

website/src/index.js

@@ -227,9 +227,11 @@ class App extends React.Component {
       gid: "",
       showInputPopup: false,
       answers: {},
+      loading: true,
     };
   }
   componentDidMount() {
+    console.log(VAX_RESULTS);
     const params = window.location.pathname
       .toUpperCase()
       .split("/")
@@ -262,26 +264,42 @@ class App extends React.Component {
       }
     }
 
+    if (!window.localStorage.getItem("hasExistingAnswer")) {
+      this.setState({ loading: false });
+    }
+
     if (window.gtag) {
       window.gtag("get", "G-7VZCY223NG", "client_id", (client_id) => {
-        this.setState({ gid: client_id });
-        getPastResult({ gid: client_id }).then((v) => {
-          const { data } = v;
-          if (!!data) {
-            const { name, age, dose } = data;
-            this.setState({ name, age, dose, showInputPopup: true });
-            delete data.name;
-            delete data.age;
-            delete data.dose;
-            this.setState({ answers: data });
-            const inputPopupSubmit = document.querySelector(
-              ".input-popup-submit"
-            );
-            inputPopupSubmit.classList.add("submitted");
-            inputPopupSubmit.innerHTML = "UPDATE ANSWER";
-          }
-        }).catch(err => console.error('ERROR Getting Past Answer', err));
+        if (!!client_id) {
+          this.setState({ gid: client_id });
+          getPastResult({ gid: client_id })
+            .then((v) => {
+              const { data } = v;
+              if (!!data) {
+                const { name, age, dose } = data;
+                this.setState({ name, age, dose, showInputPopup: true });
+                delete data.name;
+                delete data.age;
+                delete data.dose;
+                this.setState({ answers: data, loading: false });
+                const inputPopupSubmit = document.querySelector(
+                  ".input-popup-submit"
+                );
+                inputPopupSubmit.classList.add("submitted");
+                inputPopupSubmit.innerHTML = "UPDATE ANSWER";
+                window.localStorage.setItem("hasExistingAnswer", true);
+              } else {
+                this.setState({ loading: false });
+              }
+            })
+            .catch((err) => {
+              console.error("ERROR Getting Past Answer", err);
+              this.setState({ loading: false });
+            });
+        }
       });
+    } else {
+      this.setState({ loading: false });
     }
   }
   shouldShowAgeGroup = () => {
@@ -378,19 +396,21 @@ class App extends React.Component {
       age,
       gid,
     });
-    saveResult(submitAnswers).then(() => {
-      const inputPopupSubmit = document.querySelector(".input-popup-submit");
-      if (!inputPopupSubmit.classList.contains("submitted")) {
-        inputPopupSubmit.classList.add("submitted");
-      }
-      inputPopupSubmit.innerHTML = "THANK YOU!";
-      setTimeout(() => {
-        inputPopupSubmit.innerHTML = "UPDATE ANSWER";
-      }, 1500);
-    }).catch(err => console.error('ERROR Saving Answer', err));;
+    saveResult(submitAnswers)
+      .then(() => {
+        const inputPopupSubmit = document.querySelector(".input-popup-submit");
+        if (!inputPopupSubmit.classList.contains("submitted")) {
+          inputPopupSubmit.classList.add("submitted");
+        }
+        inputPopupSubmit.innerHTML = "THANK YOU!";
+        setTimeout(() => {
+          inputPopupSubmit.innerHTML = "UPDATE ANSWER";
+        }, 1500);
+      })
+      .catch((err) => console.error("ERROR Saving Answer", err));
   };
   render() {
-    const { name, dose, age, showInputPopup, answers } = this.state;
+    const { name, dose, age, showInputPopup, answers, loading } = this.state;
     let result = {};
     let resultAtSite = {};
     if (this.shouldShowResults()) {
@@ -422,34 +442,45 @@ class App extends React.Component {
           </div>
         </header>
         <main>
-          <div className="question-container">
-            <p className="question" data-font="sans-italic">
-              Select Vaccine
-            </p>
-            <div className="answers-container">
-              {Object.values(VAX_NAMES).map((v) => (
-                <button
-                  key={`name-group-${v}`}
-                  onClick={() =>
-                    this.setState({
-                      name: v,
-                      dose: "",
-                      age: "",
-                      answers: {},
-                      showInputPopup: false,
-                    })
-                  }
-                  data-font="sans-bold"
-                  className={`vaccine answer${name === v ? " selected" : ""}${
-                    name && name !== v ? " unselected" : ""
-                  }`}
-                >
-                  {v}
-                </button>
-              ))}
+          {loading ? (
+            <div className="loading-container">
+              <p className="question" data-font="sans">
+                Checking for existing answers...
+              </p>
+              <div className="loading-bar-container">
+                <div className="loading-bar"></div>
+              </div>
             </div>
-          </div>
-
+          ) : null}
+          {!loading ? (
+            <div className="question-container">
+              <p className="question" data-font="sans-italic">
+                Select Vaccine
+              </p>
+              <div className="answers-container">
+                {Object.values(VAX_NAMES).map((v) => (
+                  <button
+                    key={`name-group-${v}`}
+                    onClick={() =>
+                      this.setState({
+                        name: v,
+                        dose: "",
+                        age: "",
+                        answers: {},
+                        showInputPopup: false,
+                      })
+                    }
+                    data-font="sans-bold"
+                    className={`vaccine answer${name === v ? " selected" : ""}${
+                      name && name !== v ? " unselected" : ""
+                    }`}
+                  >
+                    {v}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : null}
           {name && (name === VAX_NAMES.PB || name === VAX_NAMES.MD) ? (
             <div className="question-container">
               <p className="question" data-font="sans-italic">