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{
-    width: 30%;
+#QRFlex {
+  width: 30%;
 }
 
 @media only screen and (max-width: 600px) {
-    #QRFlex {
-        width: 90% ;
-    }
+  #QRFlex {
+    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,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 (
-            <option value={name}>{name}</option>
-        )
-    });
+  const orgs = ['MISI: Solidariti', 'UNDI18'];
+  const orgOptions = orgs.map(name => {
+    return <option value={name}>{name}</option>;
+  });
 
-    return (
-        <Select placeholder={props.placeholder} onChange={props.onChange}>
-            {orgOptions}
-        </Select>
-    );
+  return (
+    <Select placeholder={props.placeholder} onChange={props.onChange}>
+      {orgOptions}
+    </Select>
+  );
 }
 
 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 (
-        <Flex
-            height="100vh"
-            background="teal.100"
-            alignItems="center"
-            justifyContent="center"
-        >
-            <Flex direction="column" background="white" p={12} rounded={6}>
-                <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>
-                        <Input type="email" onChange={e => setEmail(e.target.value)} />
-                    </FormControl>
-                    <FormControl mb={6}>
-                        <FormLabel>Phone Number:</FormLabel>
-                        <Input onChange={e => setPhoneNumber(e.target.value)} />
-                    </FormControl>
-                    <FormControl mb={6}>
-                        <FormLabel>Organization:</FormLabel>
-                        <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)} />
-                    </FormControl>
-                    <Button type="submit">Create!</Button>
-                </form>
-            </Flex>
-        </Flex>
-    )
+  return (
+    <Flex
+      height="100vh"
+      background="teal.100"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Flex direction="column" background="white" p={12} rounded={6}>
+        <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>
+            <Input type="email" onChange={e => setEmail(e.target.value)} />
+          </FormControl>
+          <FormControl mb={6}>
+            <FormLabel>Phone Number:</FormLabel>
+            <Input onChange={e => setPhoneNumber(e.target.value)} />
+          </FormControl>
+          <FormControl mb={6}>
+            <FormLabel>Organization:</FormLabel>
+            <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)}
+            />
+          </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,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 (
-        <Flex
-          height="100vh"
-          background="teal.100"
-          alignItems="center"
-          justifyContent="center"
+  return (
+    <Flex
+      height="100vh"
+      background="teal.100"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <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');
+          }}
         >
-          <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>
-          </Flex>
-        </Flex>
-      );
+          Return home
+        </Button>
+      </Flex>
+    </Flex>
+  );
 }
 
 export default Success;