From 81f0a541f9707d6bdf5cbde49a9077ac35ea4164 Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao Date: Mon, 26 Jul 2021 18:54:45 +0200 Subject: [PATCH] formatting --- README.md | 15 ++- src/App.css | 12 +- src/screens/CreateScreen.js | 231 ++++++++++++++++++----------------- src/screens/HomeScreen.js | 16 ++- src/screens/LoginScreen.js | 9 +- src/screens/SuccessScreen.js | 45 ++++--- 6 files changed, 182 insertions(+), 146 deletions(-) diff --git a/README.md b/README.md index 11984fd..72a504c 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,31 @@ # SSR Contact Tracing App -This app was created to serve the need for easy to use contact tracing. +This app was created to serve the need for easy to use contact tracing. ## Usage + The app should work as such: 1. Group/Organization leaders will be created an account on the app. 2. Upon logging in, they will see a QR code that they can display 3. Their members can scan this QR code, in order to create their own accounts. This way, there each member has a "parent" member, and all memberships can be traced. 4. Upon creating their account, new members will also have a QR Code they can display. -5. Other members can scan each other QR codes in order to register a *Contact* in the backend. -6. All *Contacts* between members can be retrievable from the backend at a later time. +5. Other members can scan each other QR codes in order to register a _Contact_ in the backend. +6. All _Contacts_ between members can be retrievable from the backend at a later time. ## Development + ### Prerequisites + - NodeJS - Yarn - + ### Building + - Use `yarn install` to install the necessary packages - Use `yarn start` to start app in development mode in [http://localhost:3000](http://localhost:3000) - Use `yarn build` to build an optimized app for production. ### .env -Don't forget to copy the .env.template to .env and fill in the values \ No newline at end of file + +Don't forget to copy the .env.template to .env and fill in the values diff --git a/src/App.css b/src/App.css index 94d599d..78cc313 100644 --- a/src/App.css +++ b/src/App.css @@ -1,9 +1,9 @@ -#QRFlex{ - width: 30%; +#QRFlex { + width: 30%; } @media only screen and (max-width: 600px) { - #QRFlex { - width: 90% ; - } -} \ No newline at end of file + #QRFlex { + width: 90%; + } +} diff --git a/src/screens/CreateScreen.js b/src/screens/CreateScreen.js index 68c6569..630e969 100644 --- a/src/screens/CreateScreen.js +++ b/src/screens/CreateScreen.js @@ -1,4 +1,13 @@ -import { Button, Flex, FormControl, FormLabel, Heading, Input, Select, useToast } from '@chakra-ui/react'; +import { + Button, + Flex, + FormControl, + FormLabel, + Heading, + Input, + Select, + useToast, +} from '@chakra-ui/react'; import axios from 'axios'; import { useState } from 'react'; import { useDispatch } from 'react-redux'; @@ -6,124 +15,126 @@ import { useHistory } from 'react-router-dom'; import { authLogin } from '../features/auth/authSlice'; function OrgSelect(props) { - const orgs = ["MISI: Solidariti", "UNDI18"]; - const orgOptions = orgs.map((name) => { - return ( - - ) - }); + const orgs = ['MISI: Solidariti', 'UNDI18']; + const orgOptions = orgs.map(name => { + return ; + }); - return ( - - ); + return ( + + ); } function Create() { + const dispatch = useDispatch(); + const toast = useToast(); + const history = useHistory(); - const dispatch = useDispatch(); - const toast = useToast(); - const history = useHistory(); + const [name, setName] = useState(null); + const [email, setEmail] = useState(null); + const [phoneNumber, setPhoneNumber] = useState(null); + const [org, setOrg] = useState(null); + const [password, setPassword] = useState(null); - const [name, setName] = useState(null); - const [email, setEmail] = useState(null); - const [phoneNumber, setPhoneNumber] = useState(null); - const [org, setOrg] = useState(null); - const [password, setPassword] = useState(null); + const handleSubmit = e => { + e.preventDefault(); - const handleSubmit = (e) => { - e.preventDefault(); + if (!name | !email | !phoneNumber | !org | !password) { + toast({ + title: 'Problem!', + description: 'Please fill in all the fields', + status: 'error', + duration: 2000, + isClosable: true, + }); + return; + } - if (!name | !email | !phoneNumber | !org | !password) { - toast({ - title: 'Problem!', - description: 'Please fill in all the fields', - status: 'error', - duration: 2000, - isClosable: true, - }); - return; + axios + .post( + `${process.env.REACT_APP_API_URL}/create`, + { + name: name, + email: email, + org: org, + phoneNumber: org, + password: password, + }, + { + withCredentials: true, } + ) + .then(response => { + if (response.data.success) { + dispatch(authLogin()); + history.push('/success'); + } else { + toast({ + title: 'An error occurred', + description: response.data.message, + status: 'error', + duration: 5000, + isClosable: true, + }); + } + }) + .catch(e => { + if (e.response.status === 401) { + toast({ + title: 'Verification Error', + description: + "You couldn't be verified. Please try scanning the verification QR Code again.", + status: 'error', + duration: 9000, + isClosable: true, + }); + } + }); + }; - axios - .post( - `${process.env.REACT_APP_API_URL}/create`, - { - name: name, - email: email, - org: org, - phoneNumber: org, - password: password, - }, - { - withCredentials: true, - } - ) - .then(response => { - if (response.data.success) { - dispatch(authLogin()); - history.push('/success'); - } else { - toast({ - title: 'An error occurred', - description: response.data.message, - status: 'error', - duration: 5000, - isClosable: true, - }); - } - }) - .catch(e=>{ - if(e.response.status === 401){ - toast({ - title: 'Verification Error', - description: "You couldn't be verified. Please try scanning the verification QR Code again.", - status: 'error', - duration: 9000, - isClosable: true, - }); - } - }); - } - - return ( - - - - Create Account - -
- - Name: - setName(e.target.value)} /> - - - Email: - setEmail(e.target.value)} /> - - - Phone Number: - setPhoneNumber(e.target.value)} /> - - - Organization: - setOrg(e.target.value)} /> - - - Password: - setPassword(e.target.value)} /> - - -
- - - ) + return ( + + + Create Account +
+ + Name: + setName(e.target.value)} /> + + + Email: + setEmail(e.target.value)} /> + + + Phone Number: + setPhoneNumber(e.target.value)} /> + + + Organization: + setOrg(e.target.value)} + /> + + + Password: + setPassword(e.target.value)} + /> + + +
+ + + ); } -export default Create; \ No newline at end of file +export default Create; diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index ea07683..53912b2 100644 --- a/src/screens/HomeScreen.js +++ b/src/screens/HomeScreen.js @@ -22,14 +22,13 @@ function QRCode() { dispatch(authLogout()); } }); - }, []) + }, []); if (url) { return ; } else { return ; } - } function Home() { @@ -43,9 +42,18 @@ function Home() { alignItems="center" justifyContent="center" > - + - This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account! + + This is your QR code. Show this to others to allow them to confirm a + contact, or allow them to create an account! + ); diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index 833aba8..a73aac9 100644 --- a/src/screens/LoginScreen.js +++ b/src/screens/LoginScreen.js @@ -1,10 +1,11 @@ import { - Button, Flex, + Button, + Flex, FormControl, FormLabel, Heading, Input, - useToast + useToast, } from '@chakra-ui/react'; import axios from 'axios'; import { React, useState } from 'react'; @@ -77,7 +78,9 @@ function Login() { isClosable: true, }); }) - .finally(() => { toast.closeAll(); }); + .finally(() => { + toast.closeAll(); + }); e.preventDefault(); }; diff --git a/src/screens/SuccessScreen.js b/src/screens/SuccessScreen.js index feec185..4ff6535 100644 --- a/src/screens/SuccessScreen.js +++ b/src/screens/SuccessScreen.js @@ -1,23 +1,32 @@ -import { Button, Flex, Heading, Text } from "@chakra-ui/react"; -import { useHistory } from "react-router-dom"; +import { Button, Flex, Heading, Text } from '@chakra-ui/react'; +import { useHistory } from 'react-router-dom'; -function Success(){ - const history = useHistory(); +function Success() { + const history = useHistory(); - return ( - + + Success! + + We have succesfully saved your contact! Stay safe out there, and let + others scan your QR code too! + + - - - ); + Return home + + + + ); } -export default Success; \ No newline at end of file +export default Success;