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
-
-
-
-
- )
+ return (
+
+
+ Create Account
+
+
+
+ );
}
-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;