Commit 339ee4d8 authored by Andrea Magnussen's avatar Andrea Magnussen
Browse files

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

Resolve "App cleanup"

Closes #29

See merge request !29
parents ba031a34 2c6a3d1b
......@@ -16,4 +16,4 @@ export const setClientToken = token => {
});
};
export default APIKit;
\ No newline at end of file
export default APIKit;
......@@ -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: {
......
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
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
......@@ -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>
);
......
......@@ -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: {
......
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,
}
})
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;
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
},
})
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>
......
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>
......
......@@ -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}
......
......@@ -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();
......
......@@ -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>
)
......
......@@ -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}/>
......
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"
......
......@@ -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>
......
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"
......
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=