add report covid

src/App.js

@@ -7,6 +7,7 @@ import Success from './screens/SuccessScreen';
 import './App.css';
 import Verify from './screens/VerifyScreen';
 import Scanner from './screens/ScannerScreen';
+import Lockout from './screens/LockoutScreen';
 
 function App() {
   return (
@@ -25,6 +26,9 @@ function App() {
           <Scanner />
         </Route>
         <Route path="/verify/:id" component={Verify} />
+        <Route path="/lockout">
+          <Lockout />
+        </Route>
         <Route path="/">
           <Redirect to="/home" />
         </Route>

src/app/store.js

@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 import authSlice from '../features/auth/authSlice';
+import covidSlice from '../features/auth/covidSlice';
 
 export const store = configureStore({
   reducer: {
     auth: authSlice,
+    covid: covidSlice,
   },
 });

src/features/auth/covidSlice.js

@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit';
+import Cookies from 'js-cookie';
+
+const initialState = {
+  isCovidPositive: Cookies.get('covidPositive') === 'true' ? true : false,
+};
+
+export const covidSlice = createSlice({
+  name: 'covid',
+  initialState,
+  reducers: {
+    setCovidPositive: state => {
+      state.isCovidPositive = true;
+      Cookies.set('covidPositive', true);
+    },
+    setCovidNegative: state => {
+      state.isCovidPositive = false;
+      Cookies.set('covidPositive', false);
+    }
+  },
+});
+
+export const { setCovidPositive, setCovidNegative } = covidSlice.actions;
+
+export default covidSlice.reducer;

src/screens/HomeScreen.js

@@ -1,4 +1,10 @@
 import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
   Button,
   Divider,
   Flex,
@@ -6,12 +12,14 @@ import {
   Link,
   Spinner,
   Text,
+  useToast,
 } from '@chakra-ui/react';
 import axios from 'axios';
-import { Fragment, React, useEffect, useState } from 'react';
+import { Fragment, React, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect, useHistory } from 'react-router-dom';
 import { authLogout } from '../features/auth/authSlice';
+import { setCovidPositive } from '../features/auth/covidSlice';
 
 function QRCode() {
   const [url, setURL] = useState(null);
@@ -41,6 +49,92 @@ 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.") => {
+    toast.closeAll();
+    toast({
+      title: 'Error!',
+      description: errorMessage,
+      status: 'error',
+      duration: 5000
+    });
+  }
+  const onConfirm = () => {
+    toast({
+      title: 'Confirming',
+      description: 'Hold on while we confirm with our servers.',
+      status: 'info',
+      duration: 10000
+    });
+    axios.post(`${process.env.REACT_APP_API_URL}/covid`,{
+      setPositive: true,
+    },{withCredentials:true})
+    .then(res => {
+      if(res.data.covidPositive){
+        dispatch(setCovidPositive());
+        toast({
+          title: "Confirmed!",
+          status: 'info',
+          duration: 500,
+        });
+      }else{
+        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); }}>
+        Report Positive COVID19
+      </Button>
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              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.
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>Cancel</Button>
+              <Button colorScheme="red" onClick={onConfirm} ml={3}>Confirm</Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+}
+
 function Home() {
   const history = useHistory();
   const dispatch = useDispatch();
@@ -51,7 +145,9 @@ function Home() {
   };
 
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
+  const isCovidPositive = useSelector(state => state.covid.isCovidPositive);
   if (!isAuthenticated) return <Redirect to="/login" />;
+  if (isCovidPositive) return <Redirect to="/lockout" />;
 
   return (
     <Flex
@@ -98,7 +194,9 @@ function Home() {
           </Fragment>
         )}
         <Divider mb={6} />
-        <Button colorScheme="red" mb={6} onClick={handleLogout}>
+        <ConfirmCOVIDPositiveAlertDialog />
+        <Divider mb={6} />
+        <Button colorScheme="blackAlpha" mb={6} onClick={handleLogout}>
           Log Out!
         </Button>
       </Flex>

src/screens/LockoutScreen.js

@@ -0,0 +1,52 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import axios from "axios";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Redirect } from "react-router-dom";
+import { setCovidPositive } from "../features/auth/covidSlice";
+
+function Lockout(){
+    const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
+    const isCovidPositive = useSelector(state => state.covid.isCovidPositive);
+    const dispatch = useDispatch();
+
+    useEffect( ()=>{
+
+        axios.post(`${process.env.REACT_APP_API_URL}/covid`,{},{withCredentials:true})
+        .then(res=>{
+            if(res.body.positivity){
+                dispatch(setCovidPositive());
+            }
+        })
+        .catch(err=>{
+
+        });
+        
+    }, [dispatch]);
+
+    if (!isAuthenticated) return <Redirect to="/login" />;
+    if (!isCovidPositive) return <Redirect to="/home" />;
+
+    return (
+        <Flex
+        height="100vh"
+        background="red.500"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Flex direction="column" background="white" 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>
+          </Text>
+        </Flex>
+      </Flex>
+    );
+}
+
+export default Lockout;