updated mobile form, updated web schemas, and /mobilerequest handler. No front end web changes yet

2 files changed, 129 insertions, 68 deletions

diff --git a/mobile/package.json b/mobile/package.json
index 488e885..80a591e 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -15,8 +15,8 @@
     "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"
+    "react-navigation": "^3.0.9",
+    "tcomb-form-native": "^0.6.20"
   },
   "devDependencies": {
     "babel-preset-expo": "^5.0.0",
diff --git a/mobile/screens/Form1.js b/mobile/screens/Form1.js
index 2a52499..8e946fc 100644
--- a/mobile/screens/Form1.js
+++ b/mobile/screens/Form1.js
@@ -1,9 +1,81 @@
 import React, { Component } from 'react';
-import {Text, Alert, AppRegistry, StyleSheet, View } from 'react-native';
-import { Button, Input, CheckBox } from 'react-native-elements';
+import { StyleSheet, Button, KeyboardAvoidingView } from 'react-native';
 import { Constants } from 'expo';
+import t from 'tcomb-form-native';
+
+const Form = t.form.Form;
+
+var Gender = t.enums({
+  "Male"  : "Male",
+  "Female": "Female",
+  "Unsure": "Can't say for sure",
+});
+
+var AgeRanges = t.enums({
+  "0-20" : "Under 20 years",
+  "20-30": "20 - 30 years",
+  "30-50": "30 - 50 years",
+  "50+"  : "Over 50 years",
+});
+
+var Races = t.enums({
+  "White"     : "European or White",
+  "eAsian"    : "East Asian",
+  "sAsian"    : "South Asian",
+  "Black"     : "Black or African American",
+  "Aboriginal": "Aboriginal",
+  "Other"     : "Other",
+});
+
+const Report = t.struct({
+  gender    : Gender,
+  age       : AgeRanges,
+  race      : Races,
+  longhair  : t.Boolean,
+  longbeard : t.Boolean,
+  extra     : t.maybe(t.String)
+});
+
+const options = {
+  label: "Help us identify them!",
+  fields: {
+    gender: {
+      auto: 'none',
+      nullOption: {value: '', text: "Gender"},
+      error: "Please pick an option for this field",
+    },
+    age: {
+      auto: 'none',
+      nullOption: {value: '', text: "Guess their age"},
+      error: "Please pick an option for this field"
+    },
+    race: {
+      auto: 'none',
+      nullOption: {value: '', text: "Race"},
+      error: "Please pick an option for this field",
+    },
+    longhair: {
+      label: "Long hair?"
+    },
+    longbeard: {
+      label: "Long beard?"
+    },
+    extra: {
+      label: "Distinctive features",
+      help: "How would you identify them in a crowd? Tattoos, peircings, holding a sign etc.",
+    },
+  },
+};
 
 export default class Form1 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: null,
+    };
+  }
+
   getApiUrl() {
     var releaseChannel = Constants.manifest.releaseChannel;
     if (releaseChannel === undefined) return Constants.manifest.extra.apiUrl.dev
@@ -11,83 +83,72 @@ export default class Form1 extends Component {
     if (releaseChannel.indexOf('staging') !== -1) return Constants.manifest.extra.apiUrl.staging
   }
 
-  _onPressButton1() {
+  _onSubmitPress(values) {
     const { navigation } = this.props;
     const coordinates = navigation.getParam('coordinates');
-    var uri = this.getApiUrl();
-    fetch(uri, {
+    var url = this.getApiUrl();
+    fetch(url, {
       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
-  this.props.navigation.navigate('GreetingPage');
-}
-  _onPressButton2() {
-    Alert.alert('Continue:')
+        coordinates : coordinates,
+        gender      : values.gender,
+        age         : values.age,
+        race        : values.race,
+        longhair    : values.longhair,
+        longbeard   : values.longbeard,
+        extra       : (values.extra) ? values.extra : ""
+      }),
+    });
+    //// TODO: handle the response from the serve and decide what to display
+    //// based on that
+    //// for now just to back to the home page
+    //this.props.navigation.navigate('GreetingPage');
   }
-  constructor(props) {
-    super(props);
-      this.state = {
-        age: '',
-        appearance: '',
-        injured: false,
-        why: ''
-      };
+
+  handleSubmit() {
+     var value = this.refs.form.getValue();
+     if (value) {
+       this._onSubmitPress(value);
+       //this.clearForm();
+     }
+  }
+
+  onChange(value) {
+    this.setState({ value });
+  }
+
+  clearForm() {
+    this.setState({ value: null });
   }
 
   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>
+      <KeyboardAvoidingView
+            style={styles.container}
+            behavior="position"
+      >
+        <Form
+            ref="form" // assign a reference
+            type={Report}
+            options={options}
+            value={this.state.value}
+            onChange={this.onChange.bind(this)}
+        />
+        <Button title="Submit" onPress={() => this.handleSubmit()} />
+      </KeyboardAvoidingView>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    marginTop: 50,
+    padding: 20,
+    backgroundColor: '#ffffff',
+  },
+});