Merge branch '29-app-cleanup' into 'master'

Resolve "App cleanup"

Closes #29

See merge request !29

salamander-app/APIkit.js

@@ -16,4 +16,4 @@ export const setClientToken = token => {
   });
 };
 
-export default APIKit;
\ No newline at end of file
+export default APIKit;

salamander-app/components/MyButton.js → salamander-app/components/CustomButton.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { Button } from 'react-native-paper';
 import { StyleSheet } from 'react-native'
 
-const MyButton = (props) => (
+const CustomButton = (props) => (
   <Button style={{...styles.button, ...props.style}} icon={props.icon} mode={props.mode} onPress={props.onPress}>
     {props.title}
   </Button>
 );
 
-export default MyButton;
+export default CustomButton;
 
 const styles = StyleSheet.create({
   button: {

salamander-app/components/MyHeader.js → salamander-app/components/CustomHeader.js

 import * as React from 'react';
 import { Appbar } from 'react-native-paper';
 
-const MyHeader = ({ navigation, previous, scene }) => {
+const CustomHeader = ({ navigation, previous, scene }) => {
 
     const { options } = scene.descriptor;
     const title =
@@ -19,4 +19,4 @@ const MyHeader = ({ navigation, previous, scene }) => {
   );
 };
 
-export default MyHeader;
\ No newline at end of file
+export default CustomHeader;
\ No newline at end of file

salamander-app/components/CustomIconButton.js

-import * as React from 'react';
-import { IconButton, Colors } from 'react-native-paper';
-
-const CustomIconButton = (props) => (
-  <IconButton
-    icon={props.icon}
-    color={Colors.red500}
-    size={90}
-    onPress={props.onPress}
-  />
-);
-
-export default CustomIconButton;
\ No newline at end of file

salamander-app/components/CustomImagePicker.js

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { Image, View, Platform } from 'react-native';
 import * as ImagePicker from 'expo-image-picker';
 import Constants from 'expo-constants';
-import MyButton from './MyButton'; 
-import CustomIconButton from './CustomIconButton';
+import CustomButton from './CustomButton'; 
+import { IconButton, Colors } from 'react-native-paper';
 
 const CustomImagePicker = () => {
   const [image, setImage] = useState(null);
@@ -36,7 +36,7 @@ const CustomImagePicker = () => {
 
   return (
     <View >
-      <CustomIconButton icon="image" onPress={pickImage} />
+      <IconButton icon="image" color={Colors.red500} size={90} onPress={pickImage} />
       {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
     </View>
   );

salamander-app/components/MyTouchableOpacity.js → salamander-app/components/CustomTouchableOpacity.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
 import { Icon } from 'react-native-elements'
 
-const MyTouchableOpacity = (props) => {
+const CustomTouchableOpacity = (props) => {
     return (
         <TouchableOpacity style={styles.touchable} onPress={props.onPress}>
             <View style={styles.touchableText}>
@@ -14,7 +14,7 @@ const MyTouchableOpacity = (props) => {
     )
 }
 
-export default MyTouchableOpacity
+export default CustomTouchableOpacity
 
 const styles = StyleSheet.create({
     touchable: {

salamander-app/components/EditUserHeader.js

+import React from 'react'
+import { StyleSheet, Image } from 'react-native'
+import { Appbar } from 'react-native-paper';
+
+const EditUserHeader = (props) => {
+    return (
+        <Appbar.Header style={styles.header}>
+            <Image
+                style={styles.image}
+                source={props.source}
+            />
+        </Appbar.Header>  
+    )
+}
+
+export default EditUserHeader
+
+const styles = StyleSheet.create({
+    header: {
+        justifyContent: "center", 
+        flexDirection: "row"
+    },
+    image: {
+        width: 40,
+        height: 40,
+        marginLeft: 15,
+    }
+})

salamander-app/components/MyTextField.js

-import * as React from 'react';
-import { TextInput } from 'react-native-paper';
-import { StyleSheet } from 'react-native'
-
-const MyTextField = (props) => {
-
-  return (
-    <TextInput
-      style={{...styles.textfield, ...props.style}}
-      label={props.label}
-      secureTextEntry={props.secureTextEntry} 
-      mode={props.mode}
-      placeholder={props.placeholder}
-      value={props.text}
-      onChangeText={props.onChangeText}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  textfield: {
-      margin: 0, 
-  }, 
-})
-
-
-
-export default MyTextField;
-

salamander-app/components/PendingUser.js

+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { IconButton, Colors } from 'react-native-paper';
+
+import APIKit from '../APIkit'
+
+const PendingUser = (props) => {
+
+    const acceptUser = (email, id) => {
+        let bodyFormData = new FormData();
+        bodyFormData.append("id", id);
+        bodyFormData.append("email", email);
+        bodyFormData.append("accepted", 1);
+    
+        APIKit.post('/pendingUsers', bodyFormData)
+            .then(function (response) {
+                console.log(response.data);
+                if (response.data.status === 200) {
+                    props.getPendingUsers(); 
+                }
+            })
+            .catch(function (response) {
+                //handle error
+                console.log(response);
+            });
+    }
+    
+    const denyUser = (email, id) => {
+        let bodyFormData = new FormData();
+        bodyFormData.append("id", id);
+        bodyFormData.append("email", email);
+        bodyFormData.append("accepted", 0);
+    
+        APIKit.post('/pendingUsers', bodyFormData)
+            .then(function (response) {
+                console.log(response.data);
+                if (response.data.status === 200) {
+                    props.getPendingUsers(); 
+                }
+            })
+            .catch(function (response) {
+                //handle error
+                console.log(response);
+            });
+    }
+
+    return (
+        <View style={styles.item}>
+            <Text style={styles.title}>{props.email}</Text>
+                <View style={styles.buttons} >
+                    <IconButton  icon="cancel" color={Colors.orange500} size={20} onPress={() => {denyUser(props.email, props.id)}} />
+                    <IconButton  icon="check-circle-outline" color={Colors.orange500} size={20} onPress={() => {acceptUser(props.email, props.id)}} />
+                </View>
+        </View>
+    )
+}
+
+export default PendingUser
+
+const styles = StyleSheet.create({
+    item: {
+        margin: 5,
+        marginVertical: 8,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginHorizontal: 16,
+    },
+    buttons: {
+        flexDirection: "row",
+        alignSelf: "flex-end",
+    },
+    title: {
+        fontSize: 16
+    },
+})

salamander-app/components/RegisterLocationModal.js

 import React, {useEffect} from 'react'
 import { StyleSheet, View, ScrollView, Text, Modal } from 'react-native'
+import { TextInput } from 'react-native-paper';
+
 import APIKit from "../APIkit";
-import MyTextField from '../components/MyTextField';
-import MyButton from '../components/MyButton';
+import CustomButton from './CustomButton';
 import { Appbar } from 'react-native-paper';
 
 
@@ -41,23 +42,45 @@ const RegisterLocationModal = (props) => {
 
     return (
         <Modal visible={props.visible} animationType="slide">
-            <Appbar>
+            <Appbar.Header style={{justifyContent: "space-between", flexDirection: "row" }}>
                 <Appbar.Content title="Register Location" />
-            </Appbar>
+            </Appbar.Header>
 
             <ScrollView style={styles.scrollView}>
                 <View style={styles.container}>
-                    <MyTextField onChangeText={name => setName(name)} style={styles.textfieldLocation} mode='flat' placeholder='Location name' label='Location name' />
+                    <TextInput 
+                        onChangeText={name => setName(name)} 
+                        style={styles.textfieldLocation} 
+                        mode='flat' 
+                        placeholder='Location name' 
+                        label='Location name'
+                    />
                     <View style={styles.radiusContainer}>
-                        <MyTextField onChangeText={radius => setRadius(radius)} style={styles.textfieldRadius} mode='flat' placeholder='Radius' label='Radius'/>
+                        <TextInput 
+                            onChangeText={radius => setRadius(radius)} 
+                            style={styles.textfieldRadius} 
+                            mode='flat' 
+                            placeholder='Radius' 
+                            label='Radius'
+                        />
                         <Text style={styles.radiusText}>Meter</Text>
                     </View>
                     <Text style={styles.radiusText}>Latitude: {props.latitude}</Text>
                     <Text style={styles.radiusText}>Longitude: {props.longitude}</Text>
                     <Text style={styles.radiusText}>{errormessage}</Text>
                     <View style={styles.buttonContainer}>
-                        <MyButton style={styles.button} title="Cancel" onPress={() => cancel()} />
-                        <MyButton style={styles.button} title="Confirm" onPress={() => registerLocation()} />
+                        <CustomButton 
+                            style={styles.button} 
+                            title="Cancel" 
+                            mode="outlined"
+                            onPress={() => cancel()}
+                        />
+                        <CustomButton 
+                            style={styles.button} 
+                            mode="contained"
+                            title="Confirm" 
+                            onPress={() => registerLocation()}
+                        />
                     </View>
                 </View>
 

salamander-app/components/SalamanderInfoModal.js

 import React from 'react'
 import { StyleSheet, View, ScrollView, Text, Modal } from 'react-native'
 
-import MyTextField from '../components/MyTextField'; 
-import MyButton from '../components/MyButton'; 
+import CustomButton from './CustomButton'; 
 import { Appbar } from 'react-native-paper';
 import CustomDropDown from './CustomDropDown';
 
@@ -23,9 +22,9 @@ const SalamanderInfoModal = (props) => {
 
     return (
         <Modal visible={props.visible} animationType="slide">
-            <Appbar>
+            <Appbar.Header style={{justifyContent: "space-between", flexDirection: "row" }}>
                 <Appbar.Content title="Salamander Information" />
-            </Appbar>
+            </Appbar.Header>
             <ScrollView style={styles.scrollView}> 
                 <View style={styles.container}>
                     <Text style={styles.text}>Species</Text>
@@ -37,8 +36,18 @@ const SalamanderInfoModal = (props) => {
                         <CustomDropDown myItems={sex} />
                     </View>
                     <View style={styles.buttonContainer}>
-                        <MyButton style={styles.button} title="Cancel" onPress={props.onCancel} />
-                        <MyButton style={styles.button} title="Confirm" onPress={() => console.log("Pressed")} />
+                        <CustomButton 
+                            style={styles.button} 
+                            title="Cancel" 
+                            mode="outlined"
+                            onPress={props.onCancel}
+                        />
+                        <CustomButton 
+                            style={styles.button} 
+                            title="Confirm" 
+                            mode="contained"
+                            onPress={() => console.log("Pressed")}
+                        />
                     </View>
                 </View>
             </ScrollView>

salamander-app/navigation/EditUserStackScreen.js

@@ -5,6 +5,8 @@ import VerifyPasswordScreen from '../screens/VerifyPasswordScreen';
 import { ChangeEmailScreen } from '../screens/ChangeEmailScreen'; 
 import ChangePasswordScreen from '../screens/ChangePasswordScreen';
 import { DeleteAccountScreen } from '../screens/DeleteAccountScreen';
+import ManageUsersScreen from '../screens/ManageUsersScreen'; 
+import PendingUsersScreen from '../screens/PendingUsersScreen';
 
 const EditUserStack = createStackNavigator(); 
 
@@ -22,6 +24,14 @@ const EditUserStackScreen = () => (
         name="ChangePassword" 
         component={ChangePasswordScreen}     
       />
+      <EditUserStack.Screen 
+        name="PendingUsers" 
+        component={PendingUsersScreen}     
+      />
+      <EditUserStack.Screen 
+        name="ManageUsers" 
+        component={ManageUsersScreen}     
+      />
       <EditUserStack.Screen 
         name="DeleteAccount" 
         component={DeleteAccountScreen}     

salamander-app/navigation/RootStackScreen.js

@@ -4,7 +4,6 @@ import { createStackNavigator } from "@react-navigation/stack";
 import TabsScreen from './TabsScreen'; 
 import AuthStackScreen from './AuthStackScreen'; 
 import EditUserStackScreen from './EditUserStackScreen'; 
-import VerifyPasswordScreen from '../screens/VerifyPasswordScreen';
 
 const RootStack = createStackNavigator(); 
 

salamander-app/navigation/TabsScreen.js

@@ -6,9 +6,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import {HomeScreen} from '../screens/HomeScreen';
 import CameraScreen from '../screens/CameraScreen';
 import { ProfileScreen } from '../screens/ProfileScreen';
-import RegisterLocationScreen from '../screens/RegisterLocationScreen';
-import SalamanderInfoScreen from '../screens/SalamanderInfoScreen';
-import MyHeader from '../components/MyHeader';
+import CustomHeader from '../components/CustomHeader';
 import { ChangeNameScreen } from '../screens/ChangeNameScreen';
 
 
@@ -21,7 +19,7 @@ const ProfileStackScreen = () => (
     <ProfileStack.Navigator
       initialRouteName="Profile"
       screenOptions={{
-        header: (props) => <MyHeader {...props} />,
+        header: (props) => <CustomHeader {...props} />,
       }}
     >
         <ProfileStack.Screen name="Profile" component={ProfileScreen} options={{ headerTitle: 'Profile' }} />
@@ -33,10 +31,9 @@ const ProfileStackScreen = () => (
     <CameraStack.Navigator
       initialRouteName="Camera"
       screenOptions={{
-        header: (props) => <MyHeader {...props} />,
+        header: (props) => <CustomHeader {...props} />,
       }}>
       <CameraStack.Screen name="Camera" component={CameraScreen} options={{ headerTitle: 'Camera' }} />
-      <CameraStack.Screen name="SalamanderInformation" component={SalamanderInfoScreen} options={{ headerTitle: 'Salamander Information' }} />
     </CameraStack.Navigator>
   )
 
@@ -44,12 +41,9 @@ const ProfileStackScreen = () => (
     <HomeStack.Navigator
       initialRouteName="Home"
       screenOptions={{
-        header: (props) => <MyHeader {...props} />,
+        header: (props) => <CustomHeader {...props} />,
       }}>
       <HomeStack.Screen name="Home" component={HomeScreen} options={{ headerTitle: 'Home' }}  />
-      <HomeStack.Screen name="RegisterLocation" component={RegisterLocationScreen} options={({ route }) => ({
-        title: route.params.name
-      })} />
     </HomeStack.Navigator>
   )
 

salamander-app/screens/CameraScreen.js

@@ -2,10 +2,10 @@ import React, { useState } from 'react'
 import { StyleSheet, ScrollView, View, Text } from 'react-native'
 import CustomCamera from '../components/CustomCamera'
 import CustomDropDown from '../components/CustomDropDown'
-import CustomIconButton from '../components/CustomIconButton'
 import CustomImagePicker from '../components/CustomImagePicker'
-import MyButton from '../components/MyButton'
+import CustomButton from '../components/CustomButton'
 import SalamanderInfoModal from '../components/SalamanderInfoModal'
+import { IconButton, Colors } from 'react-native-paper';
 
 const CameraScreen = ({ navigation }) => {
 
@@ -30,17 +30,22 @@ const CameraScreen = ({ navigation }) => {
                 </View>
                 <View style={styles.takeImage}>
                     <CustomImagePicker />
-                    <CustomIconButton icon="camera" onPress={() => setShowCamera(true)} />
+                    <CustomCamera visible={isCameraMode} />
+                    <IconButton 
+                        icon="camera" 
+                        color={Colors.red500} 
+                        size={90} 
+                        onPress={() => setShowCamera(true)}
+                    />
                     {isCameraMode && (<CustomCamera 
                         showModal={isCameraMode}
                         setModalVisible={() => setShowCamera(false)}
                         setError={(errorString) => setError(errorString)}
-                        // save={true}
-                        // setImage={(result) => setImage(result.uri)}
                          />)}
                 </View>
-                <MyButton 
+                <CustomButton 
                     title="Confirm" 
+                    mode="contained"
                     style={styles.button}
                     onPress={() => setIsSalamanderInfoMode(true)} />
                 <SalamanderInfoModal visible={isSalamanderInfoMode} onCancel={cancelSalamanderInfoHandler}/>

salamander-app/screens/ChangeEmailScreen.js

 import React, { useState, useEffect } from 'react'
 import { StyleSheet, View, ScrollView, KeyboardAvoidingView } from 'react-native'
-import { Appbar } from 'react-native-paper';
 import { connect } from 'react-redux'
 
 import AccountData from '../components/AccountData'
-import MyButton from '../components/MyButton'
+import CustomButton from '../components/CustomButton'
 import { TextInput } from 'react-native-paper';
 import { onEditEmail } from '../redux/index';
+import EditUserHeader from '../components/EditUserHeader'; 
 
 
 const _ChangeEmailScreen = (props) => {
@@ -25,8 +25,7 @@ const _ChangeEmailScreen = (props) => {
     return (
         <ScrollView keyboardShouldPersistTaps='handled'>
             <KeyboardAvoidingView behavior='padding' style={{ flex: 1, alignItems: 'stretch'}}>
-                <Appbar.Header style={{justifyContent: "space-between", flexDirection: "row" }}>
-                </Appbar.Header>      
+                <EditUserHeader source={require('../assets/images/ninaMiniLogo.png')}/>       
                 <AccountData 
                     currentLabel="Current Email" 
                     current={user.email} 
@@ -43,13 +42,13 @@ const _ChangeEmailScreen = (props) => {
                     value={email}
                     onSubmitEditing={editEmail}
                 />
-                <MyButton 
+                <CustomButton 
                     style={styles.button} 
                     mode="contained" 
                     title="Confirm" 
                     onPress={() => onEditEmail({email: email})}
                 />
-                <MyButton 
+                <CustomButton 
                     style={styles.button} 
                     mode="outlined" 
                     title="Cancel" 

salamander-app/screens/ChangeNameScreen.js

@@ -3,7 +3,7 @@ import { StyleSheet, View, ScrollView } from 'react-native'
 import AccountData from '../components/AccountData'
 import { connect } from 'react-redux'
 
-import MyButton from '../components/MyButton'
+import CustomButton from '../components/CustomButton'
 import { TextInput } from 'react-native-paper';
 import { onEditName } from '../redux/index';
 
@@ -31,9 +31,10 @@ const _ChangeNameScreen = (props) => {
                     onChangeText={name => setName(name)} 
                     value={name}
                 />
-                <MyButton 
+                <CustomButton 
                     style={styles.button} 
                     title="Confirm" 
+                    mode="contained"
                     onPress={() => onEditName({name: name})}
                 />
             </View>

salamander-app/screens/ChangePasswordScreen.js

 import React, { useState } from 'react'
 import { StyleSheet, View, ScrollView, KeyboardAvoidingView } from 'react-native'
-import { Appbar } from 'react-native-paper';
 import APIKit from '../APIkit'
 
-import MyButton from '../components/MyButton'
+import CustomButton from '../components/CustomButton'
 import { TextInput } from 'react-native-paper';
+import EditUserHeader from '../components/EditUserHeader'; 
 
 const ChangePasswordScreen = ({ navigation }) => {
 
@@ -34,7 +34,7 @@ const ChangePasswordScreen = ({ navigation }) => {
     return (
         <ScrollView keyboardShouldPersistTaps='handled'>
             <KeyboardAvoidingView style={{ flex: 1, alignItems: 'stretch'}}>
-                <Appbar.Header style={{justifyContent: "space-between", flexDirection: "row" }} />  
+                <EditUserHeader source={require('../assets/images/ninaMiniLogo.png')}/>   
                 <TextInput 
                     style={styles.textfield} 
                     mode="flat" 
@@ -56,13 +56,13 @@ const ChangePasswordScreen = ({ navigation }) => {
                     value={confirmPassword}
                     onSubmitEditing={() => console.log("Pressed")}
                 />
-                <MyButton 
+                <CustomButton 
                     style={styles.button} 
                     title="Confirm" 
                     mode="contained"
                     onPress={() => changePassword()}
                 />
-                <MyButton 
+                <CustomButton 
                     style={styles.button} 
                     title="Cancel" 
                     mode="outlined"

salamander-app/screens/DeleteAccountScreen.js

 import React from 'react'
 import { StyleSheet, Text, View, ScrollView, Alert } from 'react-native'
-import MyButton from '../components/MyButton'
+import CustomButton from '../components/CustomButton'
 import { Appbar } from 'react-native-paper';
 import { onUserSignOut } from '../redux/index';
 import { connect } from 'react-redux'
 import { AuthContext } from '../constants/context';
 import APIKit from '../APIkit'
+import EditUserHeader from '../components/EditUserHeader'; 
 
 const _DeleteAccountScreen = (props) => {
 
@@ -56,10 +57,20 @@ const _DeleteAccountScreen = (props) => {
     return (
         <ScrollView>
             <View style={{ flex: 1, alignItems: 'stretch'}}>
-                <Appbar.Header style={{justifyContent: "space-between", flexDirection: "row" }} />  
+                <EditUserHeader source=