added functionality to edit volunteer emails, added volunteer email s…

…aving to AsyncStorage

android/app/src/main/AndroidManifest.xml

@@ -4,6 +4,7 @@
     android:versionName="1.0">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.VIBRATE"/>
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
     <uses-sdk

components/App.js

@@ -22,11 +22,13 @@ import {ManualInput} from './manInput'
 import {Entry} from './entry'
 import {Confirmation} from './Confirmation'
 import {QrCamera} from './camera'
+import {Settings} from './Settings'
 const electronnative = StackNavigator({
   Home: { screen: Entry },
   QrCamera: {screen: QrCamera},
   Confirmation: {screen: Confirmation},
-  Manual: {screen: ManualInput}
+  Manual: {screen: ManualInput},
+  Settings: {screen: Settings, mode:'modal'}
 });
 
 

components/Confirmation.js

@@ -37,6 +37,7 @@ export class Confirmation extends React.Component {
     super(props)
     this.reset = this.reset.bind(this)
     this.backPress = this.backPress.bind(this)
+    this.rescan = this.rescan.bind(this)
   }
   componentDidMount(){
     if(!(Platform.OS === 'ios')){
@@ -53,6 +54,10 @@ export class Confirmation extends React.Component {
   backPress() {
     this.props.navigation.state.params.resetState()
   }
+  rescan(){
+    this.props.navigation.state.params.resetState()
+    this.props.navigation.dispatch(NavigationActions.back())
+  }
   reset(){
     return this.props.navigation.dispatch(NavigationActions.reset(
                  {
@@ -73,8 +78,11 @@ export class Confirmation extends React.Component {
       <View style={styles.container}>
       <Text style={styles.welcome}>This attendee's email is: </Text>
       <Text style={styles.instructions}>{this.props.navigation.state.params.email}</Text>
+      <Text>{"\n"}</Text>
       <View>
-      <Button onPress={this.reset} title="Navigate Back to Home"></Button>
+      <Button onPress={this.reset} title="Send Email"></Button>
+      <Text>{"\n"}{"\n"}{"\n"}</Text>
+      <Button onPress={this.rescan} title="Rescan QR Code"></Button>
       </View>
       </View>
     )

components/Default.js

@@ -28,14 +28,13 @@ export class Default extends Component {
   }
   navigateManual(){
     const {navigate} = this.props.navigation
-    navigate("QrCamera")
+    navigate("Manual")
   }
 
 
   render() {
     return (
       <View style = {styles.container}>
-      <Image source={require('../electron.png')} style = {styles.image} />
       <Text style={styles.welcome}>
       Hi, Welcome to Electron
       </Text>
@@ -44,7 +43,6 @@ export class Default extends Component {
       </Text>
       <Button onPress={this.navigateQR} title="Camera">Navigate</Button>
       <Text style = {styles.welcome}>
-      {"\n"}
       Or
       </Text>
       <Text style={styles.instructions}>
@@ -59,7 +57,7 @@ export class Default extends Component {
 
 const styles = StyleSheet.create({
   image: {
-    height: '20%',
+    height: '40%',
     width: '75%',
     resizeMode: "contain"
   },
@@ -69,9 +67,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
+  button: {
+    marginRight: 10,
+  },
   welcome: {
     fontSize: 25,
-    marginBottom: 10,
+    margin: 10,
   },
   instructions: {
     textAlign: 'center',

components/Settings.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Platform,
+  TouchableOpacity,
+  Linking,
+  Button,
+  AsyncStorage,
+  Image,
+  TextInput
+} from 'react-native';
+import Toast from 'react-native-simple-toast'
+import {NavigationActions} from 'react-navigation'
+
+export class Settings extends Component {
+  static navigationOptions = {
+    title: 'Settings',
+    mode: 'modal'
+  };
+  constructor(props){
+    super(props)
+    this.state = {
+      text: ''
+    }
+    this.saveEmail = this.saveEmail.bind(this)
+  }
+
+  saveEmail(){
+    AsyncStorage.setItem("volunteer", this.state.text)
+    Toast.show("Email successfully edited.")
+    this.props.navigation.dispatch(NavigationActions.back())
+  }
+  componentWillMount(){
+    AsyncStorage.getItem("volunteer").then(function(value){
+      console.log(value)
+      if(!(value === null)){
+        this.setState({text: value})
+      }
+    }.bind(this))
+  }
+
+  render() {
+    return (
+      <View style = {styles.container}>
+      <Text style={styles.welcome}>
+      Volunteer Email
+      </Text>
+      <TextInput
+        style={{height: 40, width:300}}
+        onChangeText={(text) => this.setState({text})}
+        value={this.state.text}
+      />
+      <Button onPress={this.saveEmail} title="Next"></Button>
+      </View>
+    )
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 3,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    marginTop: 50,
+    fontSize: 25,
+    marginBottom: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+});

components/camera.js

@@ -5,7 +5,8 @@ import {
   StyleSheet,
   Text,
   TouchableHighlight,
-  View
+  View,
+  Vibration
 } from 'react-native';
 import {
   StackNavigator,
@@ -42,7 +43,7 @@ export class QrCamera extends Component {
             }}
             style={styles.preview}
             aspect={Camera.constants.Aspect.fill}
-            onBarCodeRead = {this.barcode.bind(this)} onPress={this.takePicture.bind(this)}>
+            onBarCodeRead = {this.barcode.bind(this)}>
           </Camera>
         </View>
       );
@@ -51,21 +52,14 @@ export class QrCamera extends Component {
       console.log(this.state.detected)
       console.log(event.data)
       if(!this.state.detected){
+        Vibration.vibrate()
         const { navigate } = this.props.navigation;
         navigate("Confirmation", {email: event.data, resetState: this.resetState})
         this.setState({detected: true})
       }
 
     }
 
-    takePicture() {
-      console.warn("entered")
-      const options = {};
-      //options.location = ...
-      this.camera.capture({metadata: options})
-        .then((data) => console.log(data))
-        .catch(err => console.error(err));
-    }
   }
 
   const styles = StyleSheet.create({

components/entry.js

@@ -11,44 +11,56 @@ import {
   AsyncStorage,
   Image
 } from 'react-native';
+import {Volunteer} from './volunteer'
 
 import {Default} from './Default'
 
 
 export class Entry extends Component {
-  static navigationOptions = {
+  static navigationOptions =({navigation}) => ({
     title: 'Welcome',
-  };
-  constructor(){
-    super()
+    headerRight: <Button title="Settings" onPress ={() => navigation.navigate('Settings')}/>
+  });
+  constructor(props){
+    super(props)
     this.state = {
-      isNew: true
+      isNew: false,
     }
-    this.navigate = this.navigate.bind(this)
+    this.setNew = this.setNew.bind(this)
   }
-  componentDidMount(){
+  componentWillMount(){
+    //Functionality for the "Getting Started" Page and allowing users to set their API endpoints
     AsyncStorage.getItem("isNew").then(function(value){
       if(value === null){
-        console.log("isNull")
+        this.setState({isNew: true})
+        AsyncStorage.setItem("isNew": true)
       }
       else{
         this.setState({isNew: false})
       }
-    })
+    }.bind(this))
   }
-  navigate(input){
-    console.log("Entered")
-    this.props.navigation(input)
+  setNew(){
+    this.setState({isNew: !this.state.isNew})
   }
 
+
+
   render() {
-    const screen = <Default navigation = {this.props.navigation}/>
+    let screen = null
+    if(this.state.isNew){
+      screen = <Volunteer setNew = {this.setNew} />
+    }
+    else{
+      screen = <Default navigation = {this.props.navigation}/>
+    }
+    const { navigate } = this.props.navigation;
     return (
       <View style = {styles.container}>
       <Image source={require('../electron.png')} style = {styles.image} />
-
       {screen}
       </View>
+
     )
   }
 }
@@ -61,15 +73,17 @@ const styles = StyleSheet.create({
     resizeMode: "contain"
   },
   container: {
-    flex: 2,
-    justifyContent: 'center',
+    flex: 3,
+    justifyContent: 'flex-start',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
+  button: {
+    marginRight: 10,
+  },
   welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    marginBottom: 5,
+    fontSize: 25,
+    margin: 10,
   },
   instructions: {
     textAlign: 'center',

components/manInput.js

@@ -2,11 +2,14 @@ import React, { Component } from 'react';
 import { TextInput, StyleSheet, View, Text, Button } from 'react-native';
 
 export class ManualInput extends Component {
+  static navigationOptions = {
+    title: 'Manual Input',
+  };
   constructor(props) {
     super(props);
     this.state = { text: '' };
     this.confirmationScreen = this.confirmationScreen.bind(this)
-    this.resetState = this.resetState.bind("this")
+    this.resetState = this.resetState.bind(this)
   }
   resetState(){
     this.setState({text: ''})
@@ -24,7 +27,7 @@ export class ManualInput extends Component {
       Please enter the email address below.
       </Text>
       <TextInput
-        style={{height: 40, width:100}}
+        style={{height: 40, width:300}}
         onChangeText={(text) => this.setState({text})}
         value={this.state.text}
       />