Added snackbar-based progress info.

adityamukho · adityamukho · commit 977677f8536c · 2020-10-23T06:35:04.000+05:30
diff --git a/src/components/AppSumoForm.js b/src/components/AppSumoForm.js
@@ -24,9 +24,10 @@ export default function AppSumoForm () {
   const [password, setPassword] = useState("")
   const [code, setCode] = useState("")
   const [open, setOpen] = useState(false)
-  const [status, setStatus] = useState("")
+  const [message, setMessage] = useState("")
   const [verified, setVerified] = useState(false)
   const [loading, setLoading] = useState(false)
+  const [color, setColor] = useState('primary')
   const classes = useStyles()
 
   const isLoggedIn = identity && identity.isLoggedIn
@@ -45,39 +46,63 @@ export default function AppSumoForm () {
     e.preventDefault()
     setLoading(true)
     if (verified) {
-      let response = await fetch("/.netlify/functions/appSumo", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          action: 'getByCodeAndStatus',
-          code,
-          status: 'free'
-        })
-      })
-      let coupon = await response.json()
-
-      if (Object.keys(coupon).length) {
-        await identity.signupUser(email, password, {
-          full_name: name,
-          appsumo_code: code
-        })
-
-        const user = await identity.loginUser(email, password, true)
-
-        await fetch("/.netlify/functions/appSumo", {
+      try {
+        setMessage('Verifying AppSumo Code...')
+        setOpen(true)
+        let response = await fetch("/.netlify/functions/appSumo", {
           method: "POST",
           headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${user.token.access_token}`
+            "Content-Type": "application/json"
           },
           body: JSON.stringify({
-            action: 'activate'
+            action: 'getByCodeAndStatus',
+            code,
+            status: 'free'
           })
         })
+        let coupon = await response.json()
+
+        if (Object.keys(coupon).length) {
+          setMessage('Registering user...')
+          setOpen(true)
+          await identity.signupUser(email, password, {
+            full_name: name,
+            appsumo_code: code
+          })
 
-        navigate('/account')
+          setMessage('Logging in...')
+          setOpen(true)
+          const user = await identity.loginUser(email, password, true)
+
+          setMessage('Activating AppSumo Code...')
+          setOpen(true)
+          await fetch("/.netlify/functions/appSumo", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${user.token.access_token}`
+            },
+            body: JSON.stringify({
+              action: 'activate'
+            })
+          })
+
+          setMessage('Redirecting to account page...')
+          setOpen(true)
+          await navigate('/account')
+        } else {
+          setMessage(`AppSumo Code '${code}' was not found in the system.`)
+          setOpen(true)
+          setColor('secondary')
+        }
+      }
+      catch (e) {
+        setMessage(e.message)
+        setOpen(true)
+        setColor('secondary')
+      }
+      finally {
+        setLoading(false)
       }
 
       // fetch("/", {
@@ -100,7 +125,7 @@ export default function AppSumoForm () {
       //   })
     }
     else {
-      setStatus("Captcha not verified. Please select again.")
+      setMessage("Captcha not verified. Please select again.")
       setOpen(true)
       setLoading(false)
     }
@@ -213,9 +238,10 @@ export default function AppSumoForm () {
                     <Snackbar
                       open={open}
                       onClose={() => setOpen(false)}
-                      message={status}
+                      message={message}
                       TransitionComponent={Fade}
                       autoHideDuration={3000}
+                      color={color}
                     />
                   </GridItem>
                 </GridContainer>
diff --git a/src/pages/account.js b/src/pages/account.js
@@ -1,4 +1,4 @@
-import { CircularProgress } from "@material-ui/core"
+import { CircularProgress, Fade, Snackbar } from "@material-ui/core"
 import { makeStyles } from "@material-ui/core/styles"
 import classNames from "classnames"
 import { navigate } from "gatsby"
@@ -15,35 +15,46 @@ const useStyles = makeStyles(accountPageStyle)
 
 function AccountPage () {
   const classes = useStyles();
-  const identity = useIdentityContext()
-  const isLoggedIn = identity && identity.isLoggedIn
-  const [coupon, setCoupon] = useState(false)
-  const [loading, setLoading] = useState(true)
+  const identity = useIdentityContext();
+  const isLoggedIn = identity && identity.isLoggedIn;
+  const [coupon, setCoupon] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState("");
 
   useEffect(() => {
     const getCode = async () => {
-      const response = await fetch("/.netlify/functions/appSumo", {
-        method: "POST",
-        headers: {
-          "Authorization": `Bearer ${identity.user.token.access_token}`,
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          action: 'getByCode'
-        })
-      })
-      const data = await response.json()
+      try {
+        const response = await fetch("/.netlify/functions/appSumo", {
+          method: "POST",
+          headers: {
+            "Authorization": `Bearer ${identity.user.token.access_token}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            action: "getByCode"
+          })
+        });
 
-      setLoading(false)
-      if (Object.keys(data).length) {
-        setCoupon(data)
+        const data = await response.json();
+        if (Object.keys(data).length) {
+          setCoupon(data);
+        }
+      }
+      catch (e) {
+        setMessage(e.message);
+        setOpen(true);
+      }
+      finally {
+        setLoading(false);
       }
-    }
+
+    };
 
     if (isLoggedIn) {
-      getCode()
+      getCode();
     }
-  }, [isLoggedIn, identity])
+  }, [isLoggedIn, identity]);
 
   if (isLoggedIn) {
     const imageClasses = classNames(
@@ -75,21 +86,32 @@ function AccountPage () {
                   <AppSumoCode coupon={coupon} user={identity.user} classes={classes} />
                 </GridItem>
                 : null}
+            {open ?
+              <GridItem xs={12} md={6} style={{ marginTop: "30px", textAlign: "center" }}>
+                <Snackbar
+                  open={open}
+                  onClose={() => setOpen(false)}
+                  message={message}
+                  TransitionComponent={Fade}
+                  autoHideDuration={3000}
+                />
+              </GridItem>
+              : null}
           </GridContainer>
         </div>
       </div>
     );
   }
 
-  if (typeof window !== 'undefined') {
-    navigate("/", { replace: true })
+  if (typeof window !== "undefined") {
+    navigate("/", { replace: true });
   }
 
-  return 'Redirecting...'
+  return "Redirecting...";
 }
 
 export default function() {
   return <RenderOnMount>
     <AccountPage />
-  </RenderOnMount>
+  </RenderOnMount>;
 }
