From d0853f7e0bed863ca2557b72d2d6cf9f9847225d Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Mon, 14 Jun 2021 15:06:53 +0200
Subject: [PATCH 01/10] Commented the components

---
 components/AccountData.js             | 11 +++++++++++
 components/CustomActivityIndicator.js | 14 ++++++++++++++
 components/CustomButton.js            | 14 ++++++++++++++
 components/CustomCamera.js            |  8 ++++++++
 components/CustomDialog.js            | 14 ++++++++++++++
 components/CustomDropDown.js          | 13 +++++++++++++
 components/CustomHeader.js            | 10 ++++++++++
 components/CustomImagePicker.js       | 11 ++++++++++-
 components/CustomRadioButtonGroup.js  | 12 ++++++++++++
 components/CustomTouchableOpacity.js  | 11 +++++++++++
 components/EditUserHeader.js          |  9 +++++++++
 components/ImagePreview.js            |  8 ++++++++
 components/ManageSalamanderCard.js    | 14 ++++++++++++++
 components/ManageUser.js              | 15 +++++++++++++++
 components/MatchResponse.js           | 15 +++++++++++++++
 components/PendingUser.js             | 11 +++++++++++
 components/SalamanderData.js          | 11 +++++++++++
 17 files changed, 200 insertions(+), 1 deletion(-)

diff --git a/components/AccountData.js b/components/AccountData.js
index 4ac66cd..ccfd121 100644
--- a/components/AccountData.js
+++ b/components/AccountData.js
@@ -1,6 +1,17 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 
+/**
+ * This component simply shows a user's data. This is used in the ChangeNameScreen component and
+ * the ChangeEmailScreen component. 
+ * 
+ * @param {String} props.currentLabel - bolded text to show label for current <something>
+ * @param {String} props.current - text to show current data
+ * @param {String} props.newLabel - text to show label for new <something>
+ * 
+ * @returns the component
+ */
+
 const AccountData = (props) => {
   return (
     <View style={styles.container}>
diff --git a/components/CustomActivityIndicator.js b/components/CustomActivityIndicator.js
index cdc300e..8d87231 100644
--- a/components/CustomActivityIndicator.js
+++ b/components/CustomActivityIndicator.js
@@ -2,6 +2,20 @@ import React from 'react'
 import { StyleSheet, View, Modal, Text } from 'react-native'
 import { Colors, ActivityIndicator } from "react-native-paper";
 
+/**
+ * This component is used in screens where there are newtwork requests. This can be done better in the
+ * future, but its purpose is to prevent the user from aborting their task until they have received a response, 
+ * and to prevent them from spamming a request. It is also used to visualize that the server is working. 
+ * 
+ * @param {Boolean} props.visible - this is the prop that makes the indicator visible or not. 
+ * @param {Object} props.style - the style can be passed down to this component to customize it. 
+ * @param {String} props.text - optional feature where a text can be passed to the component to
+ *                              indicate that it is processing something. Currently only used when
+ *                              image processing, since it takes some time. 
+ * 
+ * @returns the component
+ */
+
 const CustomActivityIndicator = (props) => {
     return (
         <Modal transparent={true} animationType="none" visible={props.visible}>
diff --git a/components/CustomButton.js b/components/CustomButton.js
index 98f06b2..1d2caf7 100644
--- a/components/CustomButton.js
+++ b/components/CustomButton.js
@@ -2,6 +2,20 @@ import * as React from "react";
 import { Button } from "react-native-paper";
 import { StyleSheet } from "react-native";
 
+/**
+ * A customizable component, that renders a button styled by the react native paper library. 
+ * 
+ * @param {Object} props.style - (Optional) can override the default style of the button where necessary, like size and position
+ * @param {String} props.color - (Optional) color of the button
+ * @param {IconSource} props.icon - (Optional) Icon to display for the button
+ * @param {String} props.mode - Mode/emphasis of the button. The modes outlined and contained have mostly been used.
+ * @param {Function} props.onPress - function that is run when the button the pressed (gets passed down from the mother component in this case)
+ * @param {Boolean} props.disabled - Whether the button is disabled. 
+ * @param {String} props.title - The text on the button
+ * 
+ * @returns the component
+ */
+
 const CustomButton = (props) => (
   <Button
     style={{ ...styles.button, ...props.style }}
diff --git a/components/CustomCamera.js b/components/CustomCamera.js
index 6f13398..46d5b77 100644
--- a/components/CustomCamera.js
+++ b/components/CustomCamera.js
@@ -8,6 +8,14 @@ import {
 import { Camera } from "expo-camera";
 import { IconButton } from "react-native-paper";
 
+/**
+ * This component renders the built-in camera in the application. It is from the expo-camera library. 
+ * 
+ * @param {*} props 
+ * 
+ * @returns the component
+ */
+
 export default function customCamera(props) {
   const [camera, setCamera] = useState(null);
   const [type, setType] = useState(Camera.Constants.Type.back);
diff --git a/components/CustomDialog.js b/components/CustomDialog.js
index d25661e..ffa651a 100644
--- a/components/CustomDialog.js
+++ b/components/CustomDialog.js
@@ -6,6 +6,20 @@ import CustomActivityIndicator from "./CustomActivityIndicator";
 import { toast500, toastError } from "../constants/toasts";
 import CustomRadioButtonGroup from "./CustomRadioButtonGroup";
 
+/**
+ * This component renders a dialog, where the user can choose between different options. In this case, it is used for managing user privileges. 
+ * 
+ * @param {String} props.email - the email of the user that is currently being viewed
+ * @param {String} props.id - the ID of the user that is currently being viewed
+ * @param {Boolean} props.admin - false/true if admin or not
+ * @param {Boolean} props.accepted - false/true if the user is accepted or not
+ * @param {Function} props.onCancel - dismisses the dialog
+ * @param {Function} props.getUsers - to update the user-list after changes are submitted
+ * @param {Function} props.showFeedback - triggers the toast message when changes are submitted
+ * 
+ * @returns the component
+ */
+
 const CustomDialog = (props) => {
   const [value, setValue] = React.useState(null);
   const [showIndicator, setShowIndicator] = useState(false);
diff --git a/components/CustomDropDown.js b/components/CustomDropDown.js
index a0407c9..ee8970a 100644
--- a/components/CustomDropDown.js
+++ b/components/CustomDropDown.js
@@ -1,6 +1,19 @@
 import React, { useState } from "react";
 import DropDownPicker from "react-native-dropdown-picker";
 
+/**
+ * The component that renders a dropdown menu. The react native dropdown picker library is used, more 
+ * documentation on https://hossein-zare.github.io/react-native-dropdown-picker-website/ (looks like this doc is updated 
+ * since we used it, might need to update the component to the latest version)
+ * 
+ * @param {String} props.defaultValue - the default value for the dropdown, in some cases null
+ * @param {Array/List} props.myItems - list of items in the dropdown
+ * @param {Function} props.sendDataToParent - a bit of a janky way to send data back to the mother component, 
+ *                                            should consider to look into bind in the future. 
+ * 
+ * @returns the component
+ */
+
 const CustomDropDown = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   const [items, setItems] = useState(props.myItems);
diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index 8a64a49..34b42f5 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -1,6 +1,16 @@
 import * as React from "react";
 import { Appbar } from "react-native-paper";
 
+/**
+ * The header component that shows in top of the screens
+ * 
+ * @param {StackNavigator} navigation - keeps track of where we are in the stack, used to go back to the previous screen
+ * @param {*} previous - checks if there are a previous screen in the stack, and renders a back button if there are
+ * @param {*} scene - can extract the options and data of the navigation
+ * 
+ * @returns the component
+ */
+
 const CustomHeader = ({ navigation, previous, scene }) => {
   const { options } = scene.descriptor;
   const title =
diff --git a/components/CustomImagePicker.js b/components/CustomImagePicker.js
index 2868ee0..7805b19 100644
--- a/components/CustomImagePicker.js
+++ b/components/CustomImagePicker.js
@@ -1,7 +1,16 @@
 import React, { useEffect } from "react";
 import { View, Platform } from "react-native";
 import * as ImagePicker from "expo-image-picker";
-import { IconButton, Colors } from "react-native-paper";
+import { IconButton } from "react-native-paper";
+
+/**
+ * This renders a component that makes the user able to upload an image from their own library. Expo image picker is
+ * the library used, more documentation there 
+ * 
+ * @param {Function} props.setImageUri function that sets the uri for the image. 
+ * 
+ * @returns the component
+ */
 
 const CustomImagePicker = (props) => {
 
diff --git a/components/CustomRadioButtonGroup.js b/components/CustomRadioButtonGroup.js
index 41ee68c..2d35df8 100644
--- a/components/CustomRadioButtonGroup.js
+++ b/components/CustomRadioButtonGroup.js
@@ -2,6 +2,18 @@ import React, { useState }  from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { RadioButton } from "react-native-paper";
 
+/**
+ * This component renders a customizable radiobutton group. It is used for sex selection (RegisterSalamanderScreen and
+ * ChangeSalamanderScreen), and for managing users (CustomDialog component). 
+ * 
+ * @param {String} props.default - the default selection. Can be set, but is null in most cases. 
+ * @param {Object} values - Contains six data entries, three for the labels and three for the values. 
+ * @param {Function} sendDataToParent - a bit of a janky way to send data back to the mother component, 
+ *                                      should consider to look into bind in the future. 
+ * 
+ * @returns the component. 
+ */
+
 const CustomRadioButtonGroup = (props) => {
 
     const [value, setValue] = useState(props.default);
diff --git a/components/CustomTouchableOpacity.js b/components/CustomTouchableOpacity.js
index 2268a67..03d8bcc 100644
--- a/components/CustomTouchableOpacity.js
+++ b/components/CustomTouchableOpacity.js
@@ -2,6 +2,17 @@ import React from "react";
 import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
 import { Icon } from "react-native-elements";
 
+/**
+ * This component renders the style used in the ProfileScreen, and makes each entry have the same touchable opacity look. 
+ * 
+ * @param {Function} props.onPress - function that is called when the component is clicked on. 
+ * @param {String} props.title - the text that is visible on the component. 
+ * @param {Object} props.style - (OPTIONAL) customizable style for the component. 
+ * @param {IconSource} props.icon - (OPTIONAL) displays an icon on the component. 
+ * 
+ * @returns the component. 
+ */
+
 const CustomTouchableOpacity = (props) => {
   return (
     <TouchableOpacity style={styles.touchable} onPress={props.onPress}>
diff --git a/components/EditUserHeader.js b/components/EditUserHeader.js
index 397460f..02bfd36 100644
--- a/components/EditUserHeader.js
+++ b/components/EditUserHeader.js
@@ -2,6 +2,15 @@ import React from "react";
 import { StyleSheet } from "react-native";
 import { Appbar } from "react-native-paper";
 
+/**
+ * This component is almost the same as the CustomHeader, except for not having the back-button option. 
+ * These components can most probably be merged in a way. 
+ * 
+ * @param {*} scene - can extract the options and data of the navigation
+ * 
+ * @returns the component
+ */
+
 const EditUserHeader = ({ scene }) => {
   const { options } = scene.descriptor;
   const title =
diff --git a/components/ImagePreview.js b/components/ImagePreview.js
index 141006b..03a390a 100644
--- a/components/ImagePreview.js
+++ b/components/ImagePreview.js
@@ -6,6 +6,14 @@ import {
 } from "react-native";
 import ImageViewer from "react-native-image-zoom-viewer";
 
+/**
+ * This component displays an image through a modal, used for displaying the salamanders. 
+ * This component can be refactored/improved in the future. 
+ * 
+ * @param {Function} props.setModalVisible - sets the modal visible
+ * @returns 
+ */
+
 export default function imagePreview(props) {
   const [image, setImage] = useState(null);
 
diff --git a/components/ManageSalamanderCard.js b/components/ManageSalamanderCard.js
index 862a808..93f3b8b 100644
--- a/components/ManageSalamanderCard.js
+++ b/components/ManageSalamanderCard.js
@@ -3,6 +3,20 @@ import { StyleSheet, View, TouchableOpacity } from "react-native";
 import { Card, Paragraph } from "react-native-paper";
 import { Icon } from "react-native-elements";
 
+/**
+ * This component styles the salamander entry cards that are fetched when getting all salamanders from one location
+ * in the ManageSalamandersScreen. 
+ * 
+ * @param {Function} props.navigateToSalamanderOverview(...) - navigates to the correct screen when clicked on
+ * @param {String} props.title - contains the ID, is also passed to the salamanderOverviewScreen
+ * @param {Integer} props.individual - number of images for a salamander. 
+ * @param {String} props.species - what species the salamander is
+ * @param {String} props.sex - what sex the salamander is
+ * @param {Date} props.date - the date the last saved image is taken. 
+ * 
+ * @returns the component
+ */
+
 const ManageSalamanderCard = (props) => {
   return (
     <TouchableOpacity
diff --git a/components/ManageUser.js b/components/ManageUser.js
index 86b0980..c5ff7b4 100644
--- a/components/ManageUser.js
+++ b/components/ManageUser.js
@@ -5,6 +5,21 @@ import CustomButton from "./CustomButton";
 import CustomDialog from "./CustomDialog";
 import { toastSuccess } from "../constants/toasts";
 
+/**
+ * This component renders a user with a "edit user" button, and is used in a list. The CustomDialog component is triggered when a user clicks
+ * on this button. 
+ * 
+ * @param {String} props.email - the email of the user 
+ * @param {Integer} props.id - the ID of the user 
+ * @param {Boolean} props.admin - false/true if admin or not
+ * @param {Boolean} props.accepted - false/true if the user is accepted or not
+ * @param {Function} props.onCancel - dismisses the dialog
+ * @param {Function} props.getUsers - to update the user-list after changes are submitted
+ * @param {Function} props.showFeedback - triggers the toast message when changes are submitted
+ * 
+ * @returns the component. 
+ */
+
 const ManageUser = (props) => {
   const [visible, setVisible] = React.useState(false);
 
diff --git a/components/MatchResponse.js b/components/MatchResponse.js
index ed3386b..f859726 100644
--- a/components/MatchResponse.js
+++ b/components/MatchResponse.js
@@ -2,6 +2,21 @@ import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { Button, Paragraph, Dialog, Portal, Text } from "react-native-paper";
 
+/**
+ * This is the component that displays the information after a user has tried to match a salamander.
+ * It is a modal/portal, that appear when the user has tried to register a salamander. It is used in
+ * both the RegisterSalamanderScreen and the ChangeSalamanderScreen (Whenever there a match process is performed)
+ * 
+ * @param {String} props.responseColor - background color. green color for match and white for no match
+ * @param {Boolean} props.visible - if the component should be visible or not
+ * @param {Function} props.onCancel - redirects the user to the next screen
+ * @param {String} props.responseMatch - The title (Match/No match)
+ * @param {String} props.responseText - The text received from the server
+ * @param {Integer} props.id - the id of the salamander
+ * 
+ * @returns the component.
+ */
+
 const MatchResponse = (props) => {
   return (
     <View>
diff --git a/components/PendingUser.js b/components/PendingUser.js
index cc3bd46..5b8275b 100644
--- a/components/PendingUser.js
+++ b/components/PendingUser.js
@@ -5,6 +5,17 @@ import { IconButton, Colors } from "react-native-paper";
 import APIKit from "../APIkit";
 import { toast500, toastError, toastSuccess } from "../constants/toasts";
 
+/**
+ * The component that renders the users in the PendingUsersScreen. Consists of the users email, 
+ * a button for accepting the user and a button for denying access to the user. 
+ * 
+ * @param {Function} props.getPendingUsers - updates the list after a user has been accepted/denied
+ * @param {String} props.email - the email of the user
+ * @param {Integer} props.id - the ID of the user 
+ *  
+ * @returns the component
+ */
+
 const PendingUser = (props) => {
   const acceptUser = (email, id) => {
     let bodyFormData = new FormData();
diff --git a/components/SalamanderData.js b/components/SalamanderData.js
index 22c37a3..8d69f1a 100644
--- a/components/SalamanderData.js
+++ b/components/SalamanderData.js
@@ -2,6 +2,17 @@ import React from "react";
 import { StyleSheet, Text } from "react-native";
 import { Card, Paragraph } from "react-native-paper";
 
+/**
+ * This components shows salamader data in a card in the SalamanderOverviewScreen. 
+ * 
+ * @param {Integer} props.id - the ID of the salamander 
+ * @param {String} props.location - the location of the salamander 
+ * @param {String} props.sex - the sex of the salamander
+ * @param {String} props.species - the species of the salamander
+ * 
+ * @returns the component
+ */
+
 const SalamanderData = (props) => {
   return (
     <Card style={styles.card}>
-- 
GitLab


From 1fd36355f7c67a7ff8e09a7a7a9fef43231ce2f7 Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Mon, 14 Jun 2021 15:27:38 +0200
Subject: [PATCH 02/10] Added documentation to constant files

---
 assets/themes/Theme.js         |  5 ++++-
 constants/context.js           |  5 +++++
 constants/inputRequirements.js |  5 +++++
 constants/toasts.js            | 31 ++++++++++++++++++++++++++++++-
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/assets/themes/Theme.js b/assets/themes/Theme.js
index de5471d..2357b5f 100644
--- a/assets/themes/Theme.js
+++ b/assets/themes/Theme.js
@@ -1,6 +1,9 @@
-import React from "react";
 import { DefaultTheme } from "react-native-paper";
 
+/**
+ * Defines the overall theme of the application. See https://callstack.github.io/react-native-paper/theming.html for more documentation. 
+ */
+
 const theme = {
   ...DefaultTheme,
   roundness: 2,
diff --git a/constants/context.js b/constants/context.js
index c0dec1a..f941529 100644
--- a/constants/context.js
+++ b/constants/context.js
@@ -1,3 +1,8 @@
 import React from "react";
 
+/**
+ * Used for remembering if the user is logged in or not. It was a early way of doing it, it might be better to
+ * stick with using redux instead to handle which screens should be visible based on user status. 
+ */
+
 export const AuthContext = React.createContext();
diff --git a/constants/inputRequirements.js b/constants/inputRequirements.js
index bf0061c..e6a6366 100644
--- a/constants/inputRequirements.js
+++ b/constants/inputRequirements.js
@@ -1,3 +1,8 @@
+
+/**
+ * These constants are used for the restrictions and regexes throughout the application
+ */
+
 export const NAME_MAX_LENGTH = 40;
 export const NUMBER_MAX_LENGTH = 15;
 export const LOCATION_NUMBER_MAX_LENGTH = 4;
diff --git a/constants/toasts.js b/constants/toasts.js
index 71cc476..d700fcc 100644
--- a/constants/toasts.js
+++ b/constants/toasts.js
@@ -1,6 +1,16 @@
-import React from 'react'
+/**
+ * This file includes various toasts the user can get. More documentation on this: https://www.npmjs.com/package/react-native-toast-message
+ */
+
 import Toast from "react-native-toast-message";
 
+/**
+ * Shows a toast/response message to the user that everything went well (statuscode 200). 
+ * 
+ * @param {String} pos - position of the toast
+ * @param {Integer} time - how long the toast should be visible
+ * @param {String} message - displays information to the user. 
+ */
 export const toastSuccess = (pos, time, message) => {
     Toast.show({
         type: "success",
@@ -11,6 +21,13 @@ export const toastSuccess = (pos, time, message) => {
       });
 }
 
+/**
+ * Shows a toast/response message to the user that something went wrong (statuscode 4XX). 
+ * 
+ * @param {String} pos - position of the toast
+ * @param {Integer} time - how long the toast should be visible
+ * @param {String} message - displays information to the user. 
+ */
 export const toastError = (pos, time, message) => {
     Toast.show({
         type: "error",
@@ -21,6 +38,13 @@ export const toastError = (pos, time, message) => {
       });
 }
 
+/**
+ * Shows a toast/response message that provides information to the user. 
+ * 
+ * @param {String} pos - position of the toast
+ * @param {Integer} time - how long the toast should be visible
+ * @param {String} message - displays information to the user. 
+ */
 export const toastInfo = (pos, time, message) => {
     Toast.show({
         type: "info",
@@ -31,6 +55,11 @@ export const toastInfo = (pos, time, message) => {
       });
 }
 
+/**
+ * Will be displayed if the server is not responding/it failed before reaching the server. 
+ * 
+ * @param {Integer} statusCode - will provide different messages based on numerous status codes. 
+ */
 export const toast500 = (statusCode) => {
 
     let errorText = ""; 
-- 
GitLab


From fca73c367b9b38d05343540dddb1bdaaf53e0a41 Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Mon, 14 Jun 2021 15:37:07 +0200
Subject: [PATCH 03/10] Added documentation to nacigation screens

---
 navigation/AuthStackScreen.js  | 5 +++++
 navigation/ModalStackScreen.js | 5 +++++
 navigation/RootStackScreen.js  | 7 +++++++
 navigation/TabsScreen.js       | 6 ++++++
 4 files changed, 23 insertions(+)

diff --git a/navigation/AuthStackScreen.js b/navigation/AuthStackScreen.js
index 9cfaea7..dc08403 100644
--- a/navigation/AuthStackScreen.js
+++ b/navigation/AuthStackScreen.js
@@ -6,6 +6,11 @@ import SignUpScreen from "../screens/SignUpScreen";
 
 const AuthStack = createStackNavigator();
 
+/**
+ * A stack navigator that contains the authentication screens. 
+ * 
+ * @returns the component
+ */
 const AuthStackScreen = () => (
   <AuthStack.Navigator
     screenOptions={{
diff --git a/navigation/ModalStackScreen.js b/navigation/ModalStackScreen.js
index f17e44b..e35fdd0 100644
--- a/navigation/ModalStackScreen.js
+++ b/navigation/ModalStackScreen.js
@@ -17,6 +17,11 @@ import { EditLocationScreen } from "../screens/home/EditLocationScreen";
 
 const ModalStack = createStackNavigator();
 
+/**
+ * A stack navigator which contains all screens that is a modal. It if fairly large, and could be organized in a better way?
+ * 
+ * @returns the component
+ */
 const ModalStackScreen = () => (
   <ModalStack.Navigator
     screenOptions={{
diff --git a/navigation/RootStackScreen.js b/navigation/RootStackScreen.js
index ec43944..2ba631b 100644
--- a/navigation/RootStackScreen.js
+++ b/navigation/RootStackScreen.js
@@ -7,6 +7,13 @@ import ModalStackScreen from "./ModalStackScreen";
 
 const RootStack = createStackNavigator();
 
+/**
+ * A stack navigator that contains the three navigator screens TabsScreen, AuthstackScreen and ModalStackScreen.
+ * 
+ * @param {String} usertoken - will display the app screens if there are a usertoken, displays the authstack screens if there are none. 
+ * 
+ * @returns the component
+ */
 const RootStackScreen = ({ userToken }) => (
   <RootStack.Navigator headerMode="none" mode="modal">
     {userToken ? (
diff --git a/navigation/TabsScreen.js b/navigation/TabsScreen.js
index baac5f0..56f003e 100644
--- a/navigation/TabsScreen.js
+++ b/navigation/TabsScreen.js
@@ -14,6 +14,12 @@ const HomeStack = createStackNavigator();
 const CameraStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
 
+/**
+ * The TabsScreen consists of three stack navigator screens, home, camera and profile. 
+ * 
+ * @returns the component
+ */
+
 const ProfileStackScreen = () => (
   <ProfileStack.Navigator
     initialRouteName="Profile"
-- 
GitLab


From 27e9f688af933fdc7087036f790d152bfa729e32 Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Tue, 15 Jun 2021 11:06:03 +0200
Subject: [PATCH 04/10] Added comments to admin screens

---
 redux/actionConstants.js                  |  2 ++
 screens/admin/ChangeSalamanderScreen.js   | 12 ++++++++++++
 screens/admin/ManageSalamandersScreen.js  | 10 +++++++++-
 screens/admin/ManageUsersScreen.js        | 11 ++++++++++-
 screens/admin/PendingUsersScreen.js       | 11 +++++++++++
 screens/admin/SalamanderOverviewScreen.js | 11 ++++++++++-
 6 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/redux/actionConstants.js b/redux/actionConstants.js
index 3566183..e693155 100644
--- a/redux/actionConstants.js
+++ b/redux/actionConstants.js
@@ -1,3 +1,5 @@
+// All actions used in redux
+
 export const USER_LOGIN = 'DO_LOGIN';
 export const USER_LOGOUT = 'DO_LOGOUT';
 export const ON_ERROR = 'ON_ERROR';
diff --git a/screens/admin/ChangeSalamanderScreen.js b/screens/admin/ChangeSalamanderScreen.js
index 58fca85..356bebf 100644
--- a/screens/admin/ChangeSalamanderScreen.js
+++ b/screens/admin/ChangeSalamanderScreen.js
@@ -41,6 +41,18 @@ const species = [
 const sexValues = {firstValue:"female", secondValue:"male", thirdValue:"juvenile", 
 firstText:"Female", secondText:"Male", thirdText:"Juvenile"};
 
+/**
+ * This component renders the ChangeSalamanderScreen in the application. In this screen, and administrator can edit an individual entry of one salamander. 
+ * The admin can edit location, species, sex, weight and length. If the user edits either location, species or sex, the salamander will be rematched
+ * by the server, and will either get a match and adapt this salamanders ID, or no match, and a new salamander will be made with a new ID. 
+ * 
+ * This is the largest component, and it might be possible to refactor it, and make it shorter. 
+ * 
+ * @param {*} props - the userReducer, which contains the state of the user, is extracted from redux, as well as the updateSalamanderList. 
+ *                    Like all the other components, props.navigation is used to navigate to screens. 
+ * 
+ * @returns the component
+ */
 const _ChangeSalamanderScreen = (props) => {
   const { userReducer, updateSalamanderList } = props;
   const { locationList } = userReducer;
diff --git a/screens/admin/ManageSalamandersScreen.js b/screens/admin/ManageSalamandersScreen.js
index 8d2be20..d893faf 100644
--- a/screens/admin/ManageSalamandersScreen.js
+++ b/screens/admin/ManageSalamandersScreen.js
@@ -20,6 +20,14 @@ import APIKit from "../../APIkit";
 import CustomActivityIndicator from "../../components/CustomActivityIndicator";
 import { toastError, toast500 } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where an administrator can fetch salamanders from a given location, and look at metadata. 
+ * It consists of a flatlist that renders cards that contains all salamanders at one location. See ManageSalamanderCard for more details. 
+ * 
+ * @param {*} props used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ManageSalamandersScreen = (props) => {
   const { userReducer, updateSalamanderList, removeSalamanderList } = props;
   const { locationList, salamanderList } = userReducer;
@@ -31,7 +39,7 @@ const _ManageSalamandersScreen = (props) => {
     setLocationValue(value);
   };
 
-  // for navigation to work on android
+  // To make the back-button on android behave correctly and not go to the VerifyPasswordScreen
   React.useEffect(() => {
     const unsubscribe = props.navigation.addListener("focus", () => {
       if (locationValue) {
diff --git a/screens/admin/ManageUsersScreen.js b/screens/admin/ManageUsersScreen.js
index adc0b8d..86b6f72 100644
--- a/screens/admin/ManageUsersScreen.js
+++ b/screens/admin/ManageUsersScreen.js
@@ -8,6 +8,15 @@ import ManageUser from "../../components/ManageUser";
 import { toastError, toast500 } from "../../constants/toasts";
 import { Colors } from "react-native-paper"
 
+/**
+ * This component renders the screen where an administrator can manage accepted users in the system. The admin can revoke users access, 
+ * make users admin or remove admin privileges. It consists of a list containing users in the system, displaying their emails and an edit button. 
+ * See ManageUser for more details. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigating to other screens. 
+ *  
+ * @returns the component. 
+ */
 const ManageUsersScreen = ({ navigation }) => {
   const [users, setUsers] = useState([]);
   const [showIndicator, setShowIndicator] = useState(false);
@@ -39,7 +48,7 @@ const ManageUsersScreen = ({ navigation }) => {
       });
   };
 
-  // for navigation on android to work
+  // To make the back-button on android behave correctly, and not go to the VerifyPasswordScreen
   useEffect(() => {
     getUsers();
     navigation.addListener('beforeRemove', (e) => {
diff --git a/screens/admin/PendingUsersScreen.js b/screens/admin/PendingUsersScreen.js
index 984c1b9..8bf3d5b 100644
--- a/screens/admin/PendingUsersScreen.js
+++ b/screens/admin/PendingUsersScreen.js
@@ -14,6 +14,17 @@ import PendingUser from "../../components/PendingUser";
 import { toast500, toastError } from "../../constants/toasts";
 import { Colors } from "react-native-paper"
  
+/**
+ * This component renders the screen where an administrator can look at pending user, who are waiting for access to the system. 
+ * The admin can either accept or deny a user. If the admin denies a users access, the user will be deleted from the system, and has to make a new account
+ * at a later date. If the admin accepts a user, the user will gain access to all non-administrative features. The user can now be seen in manageUsersScreen. 
+ * It consists of a list containing pending users in the system, displaying their emails and a button for denying access and a button for granting access. 
+ * See ManageUser for more details. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigating to other screens. 
+ * 
+ * @returns the component.
+ */
 const PendingUsersScreen = ({ navigation }) => {
   const [pendingUsers, setPendingUsers] = useState([]);
   const [showIndicator, setShowIndicator] = useState(false);
diff --git a/screens/admin/SalamanderOverviewScreen.js b/screens/admin/SalamanderOverviewScreen.js
index 6146092..17c7685 100644
--- a/screens/admin/SalamanderOverviewScreen.js
+++ b/screens/admin/SalamanderOverviewScreen.js
@@ -20,6 +20,16 @@ import { toast500, toastError } from "../../constants/toasts";
 
 const deviceWidth = Dimensions.get("window").width;
 
+/**
+ * This component renders the SalamanderOverviewScreen. This is the screen an administrator will be navigated to if they click on one of the 
+ * cards in the ManageSalamandersScreen. Here, an overview of the salamander is shown, all images taken of the salamander, and metadata of the entry. 
+ * If the admin wants to change one of the entries, they can choose one of the images/entries to edit it. They will then be navigated to the ChangeSalamanderScreen. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigating to other screens. 
+ * @param {*} route - extracted from props, used for getting data from the last screen. 
+ * 
+ * @returns the component. 
+ */
 const SalamanderOverviewScreen = ({ navigation, route }) => {
   const { salamanderData, getSalamanders } = route.params;
 
@@ -115,7 +125,6 @@ const SalamanderOverviewScreen = ({ navigation, route }) => {
               <ImageViewer
                 enableSwipeDown={true}
                 onCancel={() => setPreviewMode(false)}
-                // onCancel={() => setPreviewMode(false)}
                 imageUrls={images}
               />
             </Modal>
-- 
GitLab


From 28be9effeb4240580f6781828a91a0fcd5e28cfa Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Tue, 15 Jun 2021 11:07:57 +0200
Subject: [PATCH 05/10] Added additional comments to admin screens

---
 screens/admin/ManageUsersScreen.js  | 3 ++-
 screens/admin/PendingUsersScreen.js | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/screens/admin/ManageUsersScreen.js b/screens/admin/ManageUsersScreen.js
index 86b6f72..ca94a03 100644
--- a/screens/admin/ManageUsersScreen.js
+++ b/screens/admin/ManageUsersScreen.js
@@ -9,7 +9,8 @@ import { toastError, toast500 } from "../../constants/toasts";
 import { Colors } from "react-native-paper"
 
 /**
- * This component renders the screen where an administrator can manage accepted users in the system. The admin can revoke users access, 
+ * This component renders the screen where an administrator can manage accepted users in the system. To access this screen, 
+ * The admin has to re-authenticate, as it is about handling sensitive data. The admin can revoke users access, 
  * make users admin or remove admin privileges. It consists of a list containing users in the system, displaying their emails and an edit button. 
  * See ManageUser for more details. 
  * 
diff --git a/screens/admin/PendingUsersScreen.js b/screens/admin/PendingUsersScreen.js
index 8bf3d5b..5d8b39d 100644
--- a/screens/admin/PendingUsersScreen.js
+++ b/screens/admin/PendingUsersScreen.js
@@ -16,6 +16,7 @@ import { Colors } from "react-native-paper"
  
 /**
  * This component renders the screen where an administrator can look at pending user, who are waiting for access to the system. 
+ * To access this screen, The admin has to re-authenticate, as it is about handling sensitive data.
  * The admin can either accept or deny a user. If the admin denies a users access, the user will be deleted from the system, and has to make a new account
  * at a later date. If the admin accepts a user, the user will gain access to all non-administrative features. The user can now be seen in manageUsersScreen. 
  * It consists of a list containing pending users in the system, displaying their emails and a button for denying access and a button for granting access. 
-- 
GitLab


From cd0719631ea917fa13ccbce1dd1462e1ef635ec1 Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Tue, 15 Jun 2021 11:28:09 +0200
Subject: [PATCH 06/10] Documented camera screens

---
 screens/camera/CameraScreen.js             |  9 +++++++++
 screens/camera/RegisterSalamanderScreen.js | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/screens/camera/CameraScreen.js b/screens/camera/CameraScreen.js
index dfea32f..0ebb2d2 100644
--- a/screens/camera/CameraScreen.js
+++ b/screens/camera/CameraScreen.js
@@ -23,6 +23,15 @@ import { toast500, toastError } from "../../constants/toasts";
 
 const deviceWidth = Dimensions.get("window").width;
 
+/**
+ * This component renders the camera screen. This screen consists of an image picker, which makes the user able to upload images from their phones
+ * library. It also consists of a built-in camera, where the user can take a photo while in the application. The user might need to grant premission for 
+ * the app to be able to use the camera. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component
+ */
 const _CameraScreen = (props) => {
 
   const [isCameraMode, setShowCamera] = useState(false);
diff --git a/screens/camera/RegisterSalamanderScreen.js b/screens/camera/RegisterSalamanderScreen.js
index c106d6a..16291ce 100644
--- a/screens/camera/RegisterSalamanderScreen.js
+++ b/screens/camera/RegisterSalamanderScreen.js
@@ -36,6 +36,16 @@ const species = [
 const sexValues = {firstValue:"female", secondValue:"male", thirdValue:"juvenile", 
 firstText:"Female", secondText:"Male", thirdText:"Juvenile"};
 
+/**
+ * This component renders the screen where the user can register a new salamander entry. When the user has provided all mandatory data, 
+ * the salamander will be matched agaist the other registered salamander with the same data (location, species, sex). If there is a match, 
+ * a green popup screen will show, providing information about which salamander it was matched with. If there was no match, a white poput will show, 
+ * and a new salamander will be registered in the database with a new ID. 
+ * 
+ * @param {*} props - used for redux, navigation and route to get data from the previous screen.
+ * 
+ * @returns the component.
+ */
 const _RegisterSalamanderScreen = (props) => {
   const { salamanderSex, salamanderSpecies, image } = props.route.params;
   const { userReducer, updateLocations, addLastLocation } = props;
-- 
GitLab


From bb1b9232b9b98242efefbee2828e021bbcbb936e Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Tue, 15 Jun 2021 11:40:07 +0200
Subject: [PATCH 07/10] Documented the home screens

---
 screens/home/EditLocationScreen.js     | 8 ++++++++
 screens/home/HomeScreen.js             | 9 +++++++++
 screens/home/RegisterLocationScreen.js | 8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/screens/home/EditLocationScreen.js b/screens/home/EditLocationScreen.js
index e590c99..f6b9513 100644
--- a/screens/home/EditLocationScreen.js
+++ b/screens/home/EditLocationScreen.js
@@ -24,6 +24,14 @@ import {
 } from "../../constants/inputRequirements";
 import { toast500, toastError, toastSuccess } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where a user can edit an existing location. The user can either edit the name, the radius or, if there
+ * are no salamanders at the given location, delete the location from the system. 
+ * 
+ * @param {*} props - used for redux, navigation and route to get data from the previous screen.
+ *  
+ * @returns the component
+ */
 const _EditLocationScreen = (props) => {
   const { locationId, locationName, locationRadius } = props.route.params;
 
diff --git a/screens/home/HomeScreen.js b/screens/home/HomeScreen.js
index 9c3c77f..a9616bf 100644
--- a/screens/home/HomeScreen.js
+++ b/screens/home/HomeScreen.js
@@ -8,6 +8,15 @@ import { connect } from "react-redux";
 import { FAB } from "react-native-paper";
 import CustomActivityIndicator from "../../components/CustomActivityIndicator";
 
+/**
+ * This component renders the home screen. This screen consists primarily of a map, and the user can either register a new location or edit an
+ * existing one from this screen. The user can also see all registered locations, and if they have given permission to the app to use their location, 
+ * their current location will be shown on the map. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _HomeScreen = (props) => {
   const { userReducer, updateLocations } = props;
 
diff --git a/screens/home/RegisterLocationScreen.js b/screens/home/RegisterLocationScreen.js
index 63708d9..1a19f09 100644
--- a/screens/home/RegisterLocationScreen.js
+++ b/screens/home/RegisterLocationScreen.js
@@ -24,6 +24,14 @@ import {
 } from "../../constants/inputRequirements";
 import { toast500, toastError, toastSuccess } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where a user can register a new location. The user will have to provide a name and a radius for the 
+ * new location. When the location is approved, the user will be taken back to the home screen. 
+ * 
+ * @param {*} props - used for redux, navigation and route to get data from the previous screen.
+ * 
+ * @returns the component. 
+ */
 const _RegisterLocationScreen = (props) => {
   const { longitude, latitude } = props.route.params;
 
-- 
GitLab


From f3d68b50e191d994f7a76580e6d20d6ee758e75e Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Tue, 15 Jun 2021 12:01:32 +0200
Subject: [PATCH 08/10] Added documentation to the profile screens

---
 screens/profile/ChangeEmailScreen.js    | 10 +++++++++-
 screens/profile/ChangeNameScreen.js     |  8 ++++++++
 screens/profile/ChangePasswordScreen.js |  8 ++++++++
 screens/profile/DeleteAccountScreen.js  |  8 ++++++++
 screens/profile/ProfileScreen.js        |  9 +++++++++
 5 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/screens/profile/ChangeEmailScreen.js b/screens/profile/ChangeEmailScreen.js
index d39354a..1ab9023 100644
--- a/screens/profile/ChangeEmailScreen.js
+++ b/screens/profile/ChangeEmailScreen.js
@@ -24,6 +24,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their email. To do this, the user has to re-authenicate due to it being a critical 
+ * feature. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ChangeEmailScreen = (props) => {
   const { userReducer, onEditEmail } = props;
   const [email, setEmail] = useState("");
@@ -32,7 +40,7 @@ const _ChangeEmailScreen = (props) => {
 
   const { user } = userReducer;
 
-  // for navigation to work on android
+  // To make the back-button on android behave correctly and not go to the VerifyPasswordScreen
   useEffect(() => {
     props.navigation.addListener('beforeRemove', (e) => {
       e.preventDefault();
diff --git a/screens/profile/ChangeNameScreen.js b/screens/profile/ChangeNameScreen.js
index 5d34dde..d94be6f 100644
--- a/screens/profile/ChangeNameScreen.js
+++ b/screens/profile/ChangeNameScreen.js
@@ -21,6 +21,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their name in the system. The name is simply for aesthetic reasons, and is not used for 
+ * anything other than being shown to the user. Can be used in future releases. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ChangeNameScreen = (props) => {
   const { userReducer, onEditName } = props;
 
diff --git a/screens/profile/ChangePasswordScreen.js b/screens/profile/ChangePasswordScreen.js
index bb47aeb..d82389b 100644
--- a/screens/profile/ChangePasswordScreen.js
+++ b/screens/profile/ChangePasswordScreen.js
@@ -20,6 +20,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their password. The user needs to re-authenticate to access this
+ * feature, due to it being critical. 
+ * 
+ * @param {*} navigation - extracted from props and used for navigation. 
+ *  
+ * @returns the component. 
+ */
 const ChangePasswordScreen = ({ navigation }) => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
diff --git a/screens/profile/DeleteAccountScreen.js b/screens/profile/DeleteAccountScreen.js
index f14324a..2f14416 100644
--- a/screens/profile/DeleteAccountScreen.js
+++ b/screens/profile/DeleteAccountScreen.js
@@ -12,6 +12,14 @@ import {
   toast500
 } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where the user can delete their account from the system. The user needs to re-authenticate
+ * to access this feature, due to it being critical. To delete their account, they have to confirm the decision.
+ * 
+ * @param {*} props - used for redux and navigation.
+ * 
+ * @returns the component. 
+ */
 const _DeleteAccountScreen = (props) => {
   const { signOutApp } = React.useContext(AuthContext);
 
diff --git a/screens/profile/ProfileScreen.js b/screens/profile/ProfileScreen.js
index 1509e97..b67d8b3 100644
--- a/screens/profile/ProfileScreen.js
+++ b/screens/profile/ProfileScreen.js
@@ -7,6 +7,15 @@ import CustomTouchableOpacity from "../../components/CustomTouchableOpacity";
 import { AuthContext } from "../../constants/context";
 import { onUserSignOut } from "../../redux/actions/UserActions";
 
+/**
+ * This component renders the profile screen where the user can access all features regarding data in the system. Some features are
+ * restricted to role, and some featuers require re-authentication to get access. The user can also log out of the application through
+ * this screen. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ProfileScreen = (props) => {
   const { userReducer, onUserSignOut } = props;
 
-- 
GitLab


From 5225492bbbed0461cb4db7376010aa89d5bbc4a0 Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Tue, 15 Jun 2021 12:53:48 +0200
Subject: [PATCH 09/10] Added documentation to authentication screens

---
 screens/SignInScreen.js         | 7 +++++++
 screens/SignUpScreen.js         | 8 ++++++++
 screens/VerifyPasswordScreen.js | 9 +++++++++
 3 files changed, 24 insertions(+)

diff --git a/screens/SignInScreen.js b/screens/SignInScreen.js
index c5f538e..18a3abd 100644
--- a/screens/SignInScreen.js
+++ b/screens/SignInScreen.js
@@ -19,6 +19,13 @@ import { Button } from "react-native-paper";
 import CustomActivityIndicator from "../components/CustomActivityIndicator";
 import { NAME_MAX_LENGTH } from "../constants/inputRequirements";
 
+/**
+ * This component renders the screen where the user can sign in. The actual sign in process is done in a user action through redux. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _SignInScreen = (props) => {
   const { onUserLogin } = props;
 
diff --git a/screens/SignUpScreen.js b/screens/SignUpScreen.js
index be2a42e..03b266a 100644
--- a/screens/SignUpScreen.js
+++ b/screens/SignUpScreen.js
@@ -24,6 +24,14 @@ import APIKit from "../APIkit";
 import CustomActivityIndicator from "../components/CustomActivityIndicator";
 import { toast500, toastError, toastSuccess } from "../constants/toasts";
 
+/**
+ * This component renders the screen where the user can create a new user. They will be navigated to the sign in screen when the user is
+ * created, and has to wait for an administrator to grant them access to use the application. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigation
+ * 
+ * @returns the component. 
+ */
 const SignUpScreen = ({ navigation }) => {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
diff --git a/screens/VerifyPasswordScreen.js b/screens/VerifyPasswordScreen.js
index 0d7a2e8..06e1cd0 100644
--- a/screens/VerifyPasswordScreen.js
+++ b/screens/VerifyPasswordScreen.js
@@ -12,6 +12,15 @@ import APIKit from "../APIkit";
 import CustomActivityIndicator from "../components/CustomActivityIndicator";
 import { toast500, toastError } from "../constants/toasts";
 
+/**
+ * This component renders the screen where the user needs to re-authenticate to get access to a critical feature. 
+ * 
+ * @param {*} route - extracted from props, used to get data from the previous screen. In this case, to know which screen should be 
+ *                    navigated to next. 
+ * @param {*} navigation - extracted from props, used for navigation. 
+ *  
+ * @returns the component. 
+ */
 const VerifyPasswordScreen = ({ route, navigation }) => {
   const { nextNavigation } = route.params;
 
-- 
GitLab


From a63d4bef07a049d4784370ca9845363b68d3e1c4 Mon Sep 17 00:00:00 2001
From: Andrea Magnussen <andrea@magnussen.net>
Date: Tue, 15 Jun 2021 12:54:15 +0200
Subject: [PATCH 10/10] Added documentation to app and APIkit

---
 APIkit.js |  9 ++++++++-
 App.js    | 16 ++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/APIkit.js b/APIkit.js
index 740b4ab..a99c700 100644
--- a/APIkit.js
+++ b/APIkit.js
@@ -1,6 +1,13 @@
 import axios from "axios";
 
-// Create axios client, pre-configured with baseURL
+/**
+ * An instance of axios which is used everytime a network request is needed. 
+ * @baseURL where the request should be sent to. 
+ * @timeout how long the system will try to perform the request. 
+ * @headers what type of data is accepted. 
+ * 
+ * @return the instance. 
+ */
 let APIKit = axios.create({
   baseURL: "http://192.168.0.30:5000",
   timeout: 60000,
diff --git a/App.js b/App.js
index c23ec43..9739e73 100644
--- a/App.js
+++ b/App.js
@@ -9,10 +9,26 @@ import theme from "./assets/themes/Theme";
 import RootStackScreen from "./navigation/RootStackScreen";
 import Toast from "react-native-toast-message";
 
+/**
+ * The application. 
+ * 
+ * @store - used for redux and the state store. 
+ * @theme - used for theming and the look of the application (react native paper)
+ * @authContext - the first way of handling the state of the user. Still in use to switch the stack based on the users
+ *                log in state. Should be replaced by redux. 
+ * @userToken - used for handling the user state.
+ * @Toast - used for the toast messages to be visible on all screens when used. 
+ * 
+ * @returns the application. 
+ */
 export default function App() {
   const [isLoading, setIsLoading] = React.useState(true);
   const [userToken, setUserToken] = React.useState(null);
 
+  /**
+   * An early version of handling state in the application, to see if a user is logged in or not. 
+   * Should be replaced by redux in the future. 
+   */
   const authContext = React.useMemo(() => {
     return {
       signInApp: () => {
-- 
GitLab