From 23f4fef3b28e3dbdea08d4939f0d01bf004e9285 Mon Sep 17 00:00:00 2001
From: Nareshkumar Rao <_accounts@nareshkumarrao.com>
Date: Sun, 25 Jul 2021 20:13:34 +0200
Subject: [PATCH] -Fixed double loading of QR code - successful acc creation
 redirects to success screen instead of home screen - close all toasts upon
 login

---
 src/screens/CreateScreen.js  |  2 +-
 src/screens/HomeScreen.js    | 17 +++++++++--------
 src/screens/LoginScreen.js   |  5 +++--
 src/screens/SuccessScreen.js |  2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/screens/CreateScreen.js b/src/screens/CreateScreen.js
index 8edbcd5..68c6569 100644
--- a/src/screens/CreateScreen.js
+++ b/src/screens/CreateScreen.js
@@ -63,7 +63,7 @@ function Create() {
             .then(response => {
                 if (response.data.success) {
                     dispatch(authLogin());
-                    history.push('/home');
+                    history.push('/success');
                 } else {
                     toast({
                         title: 'An error occurred',
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index 59611cb..ea07683 100644
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@@ -1,6 +1,6 @@
 import { Flex, Image, Spinner, Text } from '@chakra-ui/react';
 import axios from 'axios';
-import { React, useState } from 'react';
+import { React, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { authLogout } from '../features/auth/authSlice';
@@ -9,8 +9,7 @@ function QRCode() {
   const [url, setURL] = useState(null);
   const dispatch = useDispatch();
 
-  if (!url) {
-    setURL("none");
+  useEffect(() => {
     axios
       .get(`${process.env.REACT_APP_API_URL}/code`, { withCredentials: true })
       .then(response => {
@@ -23,10 +22,12 @@ function QRCode() {
           dispatch(authLogout());
         }
       });
-  } else if(url === "none"){
-    return <Spinner/>
-  }else {
+  }, [])
+
+  if (url) {
     return <Image src={url} />;
+  } else {
+    return <Spinner />;
   }
 
 }
@@ -43,8 +44,8 @@ function Home() {
       justifyContent="center"
     >
       <Flex direction="column" background="white" p={12} rounded={6} id="QRFlex">
-          <QRCode />
-          <Text align="center" fontSize="lg">This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!</Text>
+        <QRCode />
+        <Text align="center" fontSize="lg">This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!</Text>
       </Flex>
     </Flex>
   );
diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js
index 7ddfa44..c7d0789 100644
--- a/src/screens/LoginScreen.js
+++ b/src/screens/LoginScreen.js
@@ -21,7 +21,7 @@ function Login() {
 
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
   if (isAuthenticated) return <Redirect to="/home" />;
-
+  
   const handleSubmit = e => {
     if (!email | !password) {
       toast({
@@ -74,7 +74,8 @@ function Login() {
           duration: 9000,
           isClosable: true,
         });
-      });
+      })
+      .finally(() => { toast.closeAll(); });
 
     e.preventDefault();
   };
diff --git a/src/screens/SuccessScreen.js b/src/screens/SuccessScreen.js
index e4960c5..feec185 100644
--- a/src/screens/SuccessScreen.js
+++ b/src/screens/SuccessScreen.js
@@ -13,7 +13,7 @@ function Success(){
         >
           <Flex direction="column" background="white" p={12} rounded={6}>
             <Heading>Success!</Heading>
-            <Text fontSize="lg">We have succesfully saved your contact! Stay safe out there!</Text>
+            <Text fontSize="lg">We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!</Text>
             <Button onClick={()=>{history.push("/home")}}>Return home</Button>
           </Flex>
         </Flex>