formatting

README.md

@@ -3,24 +3,29 @@
 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

src/App.css

@@ -1,9 +1,9 @@
-#QRFlex{
+#QRFlex {
   width: 30%;
 }
 
 @media only screen and (max-width: 600px) {
   #QRFlex {
-        width: 90% ;
+    width: 90%;
   }
 }

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,11 +15,9 @@ 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 (
-            <option value={name}>{name}</option>
-        )
+  const orgs = ['MISI: Solidariti', 'UNDI18'];
+  const orgOptions = orgs.map(name => {
+    return <option value={name}>{name}</option>;
   });
 
   return (
@@ -21,7 +28,6 @@ function OrgSelect(props) {
 }
 
 function Create() {
-
   const dispatch = useDispatch();
   const toast = useToast();
   const history = useHistory();
@@ -32,7 +38,7 @@ function Create() {
   const [org, setOrg] = useState(null);
   const [password, setPassword] = useState(null);
 
-    const handleSubmit = (e) => {
+  const handleSubmit = e => {
     e.preventDefault();
 
     if (!name | !email | !phoneNumber | !org | !password) {
@@ -74,18 +80,19 @@ function Create() {
           });
         }
       })
-            .catch(e=>{
-                if(e.response.status === 401){
+      .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.",
+            description:
+              "You couldn't be verified. Please try scanning the verification QR Code again.",
             status: 'error',
             duration: 9000,
             isClosable: true,
           });
         }
       });
-    }
+  };
 
   return (
     <Flex
@@ -95,16 +102,14 @@ function Create() {
       justifyContent="center"
     >
       <Flex direction="column" background="white" p={12} rounded={6}>
-                <Heading mb={6}>
-                    Create Account
-                </Heading>
+        <Heading mb={6}>Create Account</Heading>
         <form onSubmit={handleSubmit}>
           <FormControl mb={6}>
             <FormLabel>Name:</FormLabel>
             <Input onChange={e => setName(e.target.value)} />
           </FormControl>
           <FormControl mb={6}>
-                        <FormLabel >Email:</FormLabel>
+            <FormLabel>Email:</FormLabel>
             <Input type="email" onChange={e => setEmail(e.target.value)} />
           </FormControl>
           <FormControl mb={6}>
@@ -113,17 +118,23 @@ function Create() {
           </FormControl>
           <FormControl mb={6}>
             <FormLabel>Organization:</FormLabel>
-                        <OrgSelect placeholder="Select Organization" onChange={e => setOrg(e.target.value)} />
+            <OrgSelect
+              placeholder="Select Organization"
+              onChange={e => setOrg(e.target.value)}
+            />
           </FormControl>
           <FormControl mb={6}>
             <FormLabel>Password:</FormLabel>
-                        <Input type="password" onChange={e => setPassword(e.target.value)} />
+            <Input
+              type="password"
+              onChange={e => setPassword(e.target.value)}
+            />
           </FormControl>
           <Button type="submit">Create!</Button>
         </form>
       </Flex>
     </Flex>
-    )
+  );
 }
 
 export default Create;

src/screens/HomeScreen.js

@@ -22,14 +22,13 @@ function QRCode() {
           dispatch(authLogout());
         }
       });
-  }, [])
+  }, []);
 
   if (url) {
     return <Image src={url} />;
   } else {
     return <Spinner />;
   }
-
 }
 
 function Home() {
@@ -43,9 +42,18 @@ function Home() {
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6} id="QRFlex">
+      <Flex
+        direction="column"
+        background="white"
+        p={12}
+        rounded={6}
+        id="QRFlex"
+      >
         <QRCode />
-        <Text align="center" fontSize="lg">This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!</Text>
+        <Text align="center" fontSize="lg">
+          This is your QR code. Show this to others to allow them to confirm a
+          contact, or allow them to create an account!
+        </Text>
       </Flex>
     </Flex>
   );

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();
   };

src/screens/SuccessScreen.js

@@ -1,7 +1,7 @@
-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(){
+function Success() {
   const history = useHistory();
 
   return (
@@ -13,8 +13,17 @@ function Success(){
     >
       <Flex direction="column" background="white" p={12} rounded={6}>
         <Heading>Success!</Heading>
-            <Text fontSize="lg">We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!</Text>
-            <Button onClick={()=>{history.push("/home")}}>Return home</Button>
+        <Text fontSize="lg">
+          We have succesfully saved your contact! Stay safe out there, and let
+          others scan your QR code too!
+        </Text>
+        <Button
+          onClick={() => {
+            history.push('/home');
+          }}
+        >
+          Return home
+        </Button>
       </Flex>
     </Flex>
   );