Merge pull request #4 from naresh97/development

Development

src/features/auth/authSlice.js

@@ -2,7 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import Cookies from 'js-cookie';
 
 const initialState = {
-  isAuthenticated: Cookies.get('authorized') == "true" ? true : false,
+  isAuthenticated: Cookies.get('authorized') === "true" ? true : false,
 };
 
 export const authSlice = createSlice({

src/screens/HomeScreen.js

@@ -35,6 +35,12 @@ function QRCode() {
 
 function Home() {
   const history = useHistory();
+  const dispatch = useDispatch();
+
+  const handleLogout = () => {
+    dispatch(authLogout());
+    history.push("/login");
+  }
 
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
   if (!isAuthenticated) return <Redirect to="/login" />;
@@ -59,7 +65,9 @@ function Home() {
           contact, or allow them to create an account!
         </Text>
         <Divider mb={6} />
-        <Button onClick={()=>{history.push("/scanner");}}>Scan a QR Code</Button>
+        <Button mb={6} onClick={()=>{history.push("/scanner");}}>Scan a QR Code</Button>
+        <Divider mb={10} />
+        <Button mb={6} onClick={handleLogout}>Log Out!</Button>
       </Flex>
     </Flex>
   );

src/screens/LoginScreen.js

@@ -17,6 +17,13 @@ function Login() {
   if (isAuthenticated) return <Redirect to="/home" />;
 
   const handleTelegramResponse = (response) => {
+    toast({
+      title: "Logging you in",
+      description: "Hold on, we're logging you in.",
+      status: 'info',
+      duration: 10000,
+      isClosable: false
+    });
     axios
       .post(
         `${process.env.REACT_APP_API_URL}/login`,
@@ -37,6 +44,7 @@ function Login() {
             history.push('/home');
           }
         } else {
+          toast.closeAll();
           dispatch(authLogout());
           toast({
             title: 'An error occurred',
@@ -48,6 +56,7 @@ function Login() {
         }
       })
       .catch(err => {
+        toast.closeAll();
         if(err.response){
           if(err.response.status === 401){
             dispatch(authLogout());

src/screens/ScannerScreen.js

@@ -30,6 +30,13 @@ function Scanner() {
       const re = /verify\/.*$/;
       const hash = re.exec(scanData);
       if (hash) {
+        toast({
+          title: "Checking QR code.",
+          description: "Hold on, we're checking this QR code.",
+          status: 'info',
+          duration: 10000,
+          isClosable: false
+        });
         axios
           .post(
             `${process.env.REACT_APP_API_URL}/verify`,
@@ -41,6 +48,7 @@ function Scanner() {
           .then(res => {
             if (res.data.success) {
               if (res.data.loggedIn) {
+                toast.closeAll();
                 toast({
                   title: 'Contact Succesfully Logged',
                   status: 'info',
@@ -54,12 +62,21 @@ function Scanner() {
             }
           })
           .catch(e => {
+            toast.closeAll();
             toast({
               title: 'Bad Verification',
               status: 'error',
               duration: 2000,
             });
           });
+      }else{
+        toast.closeAll();
+        toast({
+          title: "Bad QR code",
+          status: 'error',
+          duration: 3000,
+          isClosable: true
+        });
       }
     }
   }, [scanData, dispatch, history, toast]);