Merge pull request #10 from naresh97/development

small ui fixes and changes

src/features/auth/covidSlice.js

@@ -16,7 +16,7 @@ export const covidSlice = createSlice({
     setCovidNegative: state => {
       state.isCovidPositive = false;
       Cookies.set('covidPositive', false);
-    }
+    },
   },
 });
 

src/screens/HomeScreen.js

@@ -50,64 +50,76 @@ function QRCode() {
 }
 
 function ConfirmCOVIDPositiveAlertDialog() {
-
   const [isOpen, setOpen] = useState(false);
   const toast = useToast();
   const history = useHistory();
   const dispatch = useDispatch();
-  const onClose = () => { setOpen(false) }
-  const showErrorToast = (errorMessage = "An error has occured.") => {
+  const onClose = () => {
+    setOpen(false);
+  };
+  const showErrorToast = (errorMessage = 'An error has occured.') => {
     toast.closeAll();
     toast({
       title: 'Error!',
       description: errorMessage,
       status: 'error',
-      duration: 5000
+      duration: 5000,
     });
-  }
+  };
   const onConfirm = () => {
     toast({
       title: 'Confirming',
       description: 'Hold on while we confirm with our servers.',
       status: 'info',
-      duration: 10000
+      duration: 10000,
     });
-    axios.post(`${process.env.REACT_APP_API_URL}/covid`,{
-      setPositive: true,
-    },{withCredentials:true})
-    .then(res => {
-      if(res.data.covidPositive){
-        dispatch(setCovidPositive());
-        toast.closeAll();
-        toast({
-          title: "Confirmed!",
-          status: 'info',
-          duration: 2000,
-        });
-      }else{
-        showErrorToast();
-      }
-    })
-    .catch(err => {
-      console.log(err);
-      try{
-        if(err.response.status === 401){
-          showErrorToast("You are not logged in!");
-          history.push("/login");
-        }else{
+    axios
+      .post(
+        `${process.env.REACT_APP_API_URL}/covid`,
+        {
+          setPositive: true,
+        },
+        { withCredentials: true }
+      )
+      .then(res => {
+        if (res.data.covidPositive) {
+          dispatch(setCovidPositive());
+          toast.closeAll();
+          toast({
+            title: 'Confirmed!',
+            status: 'info',
+            duration: 2000,
+          });
+        } else {
           showErrorToast();
         }
-      }catch(e){
-        showErrorToast();
-      }
-    });
+      })
+      .catch(err => {
+        console.log(err);
+        try {
+          if (err.response.status === 401) {
+            showErrorToast('You are not logged in!');
+            history.push('/login');
+          } else {
+            showErrorToast();
+          }
+        } catch (e) {
+          showErrorToast();
+        }
+      });
     setOpen(false);
-  }
+  };
   const cancelRef = useRef();
 
   return (
     <>
-      <Button colorScheme="red" mb={6} onClick={() => { setOpen(true); }}>
+      <Button
+        colorScheme="red"
+        mb={6}
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
         Report Positive COVID19
       </Button>
       <AlertDialog
@@ -121,13 +133,17 @@ function ConfirmCOVIDPositiveAlertDialog() {
               Confirm Tested COVID19 Positive
             </AlertDialogHeader>
             <AlertDialogBody>
-              Please confirm that you have been tested POSITIVE with
-              COVID19. Upon confirmation, this app will inform the people
-              you have come in contact with in the last 7 days.
+              Please confirm that you have been tested POSITIVE with COVID19.
+              Upon confirmation, this app will inform the people you have come
+              in contact with in the last 7 days.
             </AlertDialogBody>
             <AlertDialogFooter>
-              <Button ref={cancelRef} onClick={onClose}>Cancel</Button>
-              <Button colorScheme="red" onClick={onConfirm} ml={3}>Confirm</Button>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme="red" onClick={onConfirm} ml={3}>
+                Confirm
+              </Button>
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialogOverlay>
@@ -147,21 +163,26 @@ function Home() {
 
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
   const isCovidPositive = useSelector(state => state.covid.isCovidPositive);
-  useEffect( ()=>{
-    axios.post(`${process.env.REACT_APP_API_URL}/covid`,{},{withCredentials:true})
-    .then(res=>{
-        if(res.data.covidPositive){
-            dispatch(setCovidPositive());
+  useEffect(() => {
+    axios
+      .post(
+        `${process.env.REACT_APP_API_URL}/covid`,
+        {},
+        { withCredentials: true }
+      )
+      .then(res => {
+        if (res.data.covidPositive) {
+          dispatch(setCovidPositive());
         }
-    })
-    .catch(err=>{});
-}, [dispatch]);
+      })
+      .catch(err => {});
+  }, [dispatch]);
   if (!isAuthenticated) return <Redirect to="/login" />;
   if (isCovidPositive) return <Redirect to="/lockout" />;
 
   return (
     <Flex
-      height="100vh"
+      minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
@@ -170,6 +191,8 @@ function Home() {
         direction="column"
         background="white"
         p={12}
+        mt={5}
+        mb={5}
         rounded={6}
         id="QRFlex"
       >

src/screens/LockoutScreen.js

@@ -1,10 +1,13 @@
-import { Flex, Heading, Text, useToast } from "@chakra-ui/react";
-import axios from "axios";
-import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { Redirect, useHistory } from "react-router-dom";
-import { authLogout } from "../features/auth/authSlice";
-import { setCovidNegative, setCovidPositive } from "../features/auth/covidSlice";
+import { Flex, Heading, Text, useToast } from '@chakra-ui/react';
+import axios from 'axios';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Redirect, useHistory } from 'react-router-dom';
+import { authLogout } from '../features/auth/authSlice';
+import {
+  setCovidNegative,
+  setCovidPositive,
+} from '../features/auth/covidSlice';
 
 function Lockout() {
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
@@ -19,7 +22,12 @@ function Lockout() {
       status: 'info',
       duration: 10000,
     });
-    axios.post(`${process.env.REACT_APP_API_URL}/covid`, {}, { withCredentials: true })
+    axios
+      .post(
+        `${process.env.REACT_APP_API_URL}/covid`,
+        {},
+        { withCredentials: true }
+      )
       .then(res => {
         toast.closeAll();
         if (res.data.covidPositive) {
@@ -29,22 +37,20 @@ function Lockout() {
         }
       })
       .catch(err => {
+        toast.closeAll();
         try {
           if (err.response.status === 401) {
             dispatch(authLogout());
-            history.push("/login");
-          }else{
-            toast.closeAll();
+            history.push('/login');
+          } else {
             toast({
               title: 'Server Error Occurred',
               status: 'error',
               duration: 10000,
             });
           }
-        }
-        catch (e) { }
+        } catch (e) {}
       });
-
   }, [dispatch, history, toast]);
 
   if (!isAuthenticated) return <Redirect to="/login" />;
@@ -52,20 +58,32 @@ function Lockout() {
 
   return (
     <Flex
-      height="100vh"
+      minHeight="100vh"
       background="red.500"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6} id="contentFlex">
+      <Flex
+        direction="column"
+        background="white"
+        mt={5}
+        mb={5}
+        p={12}
+        rounded={6}
+        id="contentFlex"
+      >
         <Heading>Lockout</Heading>
         <Text>
-          You have reported that you have been tested <b>POSITIVE</b> with COVID19.
-          This lockout is to remind you to quarantine yourself according to local
-          COVID19 health policies. This lockout will automatically be lifted after
-          14 days.
-          <br /><br />
-          <b>Please avoid contact with other people for the duration of this lockout!</b>
+          You have reported that you have been tested <b>POSITIVE</b> with
+          COVID19. This lockout is to remind you to quarantine yourself
+          according to local COVID19 health policies. This lockout will
+          automatically be lifted after 14 days.
+          <br />
+          <br />
+          <b>
+            Please avoid contact with other people for the duration of this
+            lockout!
+          </b>
         </Text>
       </Flex>
     </Flex>

src/screens/LoginScreen.js

@@ -80,7 +80,7 @@ function Login() {
 
   return (
     <Flex
-      height="100%"
+      minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"

src/screens/ScannerScreen.js

@@ -89,26 +89,38 @@ function Scanner() {
 
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
   const isCovidPositive = useSelector(state => state.covid.isCovidPositive);
-  useEffect( ()=>{
-    axios.post(`${process.env.REACT_APP_API_URL}/covid`,{},{withCredentials:true})
-    .then(res=>{
-        if(res.data.covidPositive){
-            dispatch(setCovidPositive());
+  useEffect(() => {
+    axios
+      .post(
+        `${process.env.REACT_APP_API_URL}/covid`,
+        {},
+        { withCredentials: true }
+      )
+      .then(res => {
+        if (res.data.covidPositive) {
+          dispatch(setCovidPositive());
         }
-    })
-    .catch(err=>{});
-}, [dispatch]);
+      })
+      .catch(err => {});
+  }, [dispatch]);
   if (!isAuthenticated) return <Redirect to="/login" />;
   if (isCovidPositive) return <Redirect to="/lockout" />;
 
   return (
     <Flex
-      height="100vh"
+      minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex
+        direction="column"
+        background="white"
+        p={12}
+        mb={6}
+        mt={6}
+        rounded={6}
+      >
         <QrReader
           mb={6}
           delay={300}

src/screens/SuccessScreen.js

@@ -6,12 +6,19 @@ function Success() {
 
   return (
     <Flex
-      height="100vh"
+      minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex
+        direction="column"
+        background="white"
+        mb={6}
+        mt={6}
+        p={12}
+        rounded={6}
+      >
         <Heading>Success!</Heading>
         <Text fontSize="lg">
           We have succesfully saved your contact! Stay safe out there, and let

src/screens/VerifyScreen.js

@@ -43,12 +43,19 @@ function Verify(props) {
 
   return (
     <Flex
-      height="100vh"
+      minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex
+        direction="column"
+        background="white"
+        p={12}
+        mt={6}
+        mb={6}
+        rounded={6}
+      >
         {verifyError ? errorMessage : loadingMessage}
       </Flex>
     </Flex>