diff options
| -rw-r--r-- | mobile/App.js | 2 | ||||
| -rw-r--r-- | mobile/components/GreetingPage.js | 65 | ||||
| -rw-r--r-- | mobile/package.json | 1 | ||||
| -rw-r--r-- | mobile/screens/Form1.js | 86 |
4 files changed, 140 insertions, 14 deletions
diff --git a/mobile/App.js b/mobile/App.js index 4348381..f36b696 100644 --- a/mobile/App.js +++ b/mobile/App.js @@ -4,7 +4,7 @@ import { Ionicons } from '@expo/vector-icons'; import { createStackNavigator, createAppContainer } from 'react-navigation'; import GreetingPage from './components/GreetingPage'; -import FormPage from './components/FormPage'; +import FormPage from './screens/Form1'; const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage,}, diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index 8b87474..e8da92e 100644 --- a/mobile/components/GreetingPage.js +++ b/mobile/components/GreetingPage.js @@ -1,10 +1,49 @@ import React, { Component } from 'react'; -import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight} from 'react-native'; +import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight, Platform} from 'react-native'; import { Ionicons } from '@expo/vector-icons'; import { createStackNavigator, createAppContainer } from 'react-navigation'; +import { Location, Permissions, Constants } from 'expo'; export default class GreetingPage extends Component { //Every component needs a render() function + state = { + location: null, + errorMessage: null, + }; + + componentWillMount() { + if (Platform.OS === 'android' && !Constants.isDevice) { + this.setState({ + errorMessage: 'This will not work on an android device', + }); + } else { + this._getLocationAsync(); + } + } + + _getLocationAsync = async () => { + let { status } = await Permissions.askAsync(Permissions.LOCATION); + if (status !== 'granted') { + this.setState({ + errorMessage: 'Permission to access location was denied', + }); + } + + let location = await Location.getCurrentPositionAsync({}); + this.setState({ location }); + }; + + moveToFormPage = () => { + this._getLocationAsync; + if (this.state.location === null) { + Alert.alert("There was a problem accessing your location"); + return; + } + const coordinates = [this.state.location.coords.longitude, this.state.location.coords.latitude]; + this.props.navigation.navigate('FormPage', {coordinates : coordinates}); + } + + render() { return ( //<View> acts like the way <div> does in JavaScript @@ -16,18 +55,19 @@ export default class GreetingPage extends Component { <View style={styles.titleContainer}> <Text style={styles.title}> - [Place text here!] + Ensure that location services are enabled! </Text> </View> - <TouchableHighlight - style={styles.first_button_container} - onPress={() => this.props.navigation.navigate('FormPage')}> + <TouchableHighlight + style={styles.first_button_container} + onPress={() => { this.moveToFormPage() + }}> <View style={styles.press_button}> <View> - <Text style={styles.current_location_title}> + <Text style={styles.current_location_title}> Use Current Location </Text> </View> @@ -40,15 +80,13 @@ export default class GreetingPage extends Component { </TouchableHighlight> - <TouchableHighlight - style={styles.second_button_container} - onPress={() => this.props.navigation.navigate('FormPage')}> + <TouchableHighlight style={styles.second_button_container}> <View style={styles.press_button}> <View> - <Text style={styles.current_location_title}> - Drop Pin - </Text> + <Text style={styles.current_location_title}> + Drop Pin + </Text> </View> <View marginTop = {20}> @@ -82,7 +120,8 @@ const styles = StyleSheet.create( { marginTop: 10, textAlign: 'center', opacity: 0.9, - fontSize: 30 + fontSize: 18, + fontStyle: 'italic' }, current_location_title: { color: '#FFF', diff --git a/mobile/package.json b/mobile/package.json index 0c3b6c2..488e885 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -15,6 +15,7 @@ "expo": "^32.0.0", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", + "react-native-elements": "^1.1.0", "react-navigation": "^3.0.9" }, "devDependencies": { diff --git a/mobile/screens/Form1.js b/mobile/screens/Form1.js new file mode 100644 index 0000000..16ced64 --- /dev/null +++ b/mobile/screens/Form1.js @@ -0,0 +1,86 @@ +import React, { Component } from 'react'; +import {Text, Alert, AppRegistry, StyleSheet, View } from 'react-native'; +import { Button, Input, CheckBox } from 'react-native-elements'; + +export default class Form1 extends Component { + _onPressButton1() { + const { navigation } = this.props; + const coordinates = navigation.getParam('coordinates'); + //var coordinates = this.coordinates ? coordinates : []; + fetch('https://helpthehome-qa.herokuapp.com/mobilerequest', { + method: 'POST', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + 'coordinates': coordinates, + 'type': "Point", + 'isInjured': this.state.injured, + 'reasonForHelp': this.state.why, + 'ageRange': this.state.age, + 'clothingDescription': this.state.appearance + }), + }); + // TODO: handle the response from the serve and decide what to display + // based on that + // for now just to back to the home page + Alert.alert("You will now be redirected to the main page"); + this.props.navigation.navigate('GreetingPage'); +} + _onPressButton2() { + Alert.alert('Continue:') + } + constructor(props) { + super(props); + this.state = { + age: '', + appearance: '', + injured: false, + why: '' + }; + } + + render() { + return ( + <View style={{padding: 40}}> + <Text>Age:</Text> + <Input + style={{height: 40}} + placeholder="Estimate is fine" + onChangeText={(age) => this.setState({age})} + /> + <Text>Appearance:</Text> + <Input + style={{height: 40}} + placeholder="What are they wearing?" + onChangeText={(appearance) => this.setState({appearance})} + /> + <CheckBox + center + title="Are they injured?" + checked={this.state.injured} + onPress={() => this.setState({ injured: !this.state.injured })} + /> + <Text>Reason for help?</Text> + <Input + style={{height: 40}} + placeholder="Please keep it short" + onChangeText={(why) => this.setState({why})} + /> + <View style={{padding: 40}}> + <Button + buttonStyle={{backgroundColor:"green"}} + onPress={() => this._onPressButton1()} + title="Submit!" + /> + <Button + containerStyle={{paddingTop: 10}} + onPress={() => this.props.navigation.navigate('GreetingPage')} + title="Go Back" + /> + </View> + </View> + ); + } +} |