starting async functionality...completed mysql rest for the most part

- need to handle longitude and latitude queries

app/screens/loading.js

@@ -26,8 +26,7 @@ export default class Loading extends Component<Props> {
       this.latitude = parseFloat(position.coords.latitude);
       this.longitude = parseFloat(position.coords.longitude);
       console.log(String(this.latitude) + ' ' + String(this.longitude));
-      //AsyncStorage.setItem('longitude', this.longitude);
-      //AsyncStorage.setItem('latitude', this.latitude);
+      this.storeValues();
       Actions.main();
       },
       (error) => console.log(error),
@@ -38,6 +37,16 @@ export default class Loading extends Component<Props> {
     );
   }
 
+  storeValues = async () => {
+    try {
+      await AsyncStorage.setItem('long', this.longitude);
+      await AsyncStorage.setItem('lat', this.latitude);
+      console.log('Stored Values!');
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   render() {
     return (
       <View style={loadingStyles.container}>

app/screens/main/chat.js

@@ -8,7 +8,8 @@ import {
   Text,
   TextInput,
   Image,
-  TouchableOpacity
+  TouchableOpacity,
+  AsyncStorage
 } from 'react-native';
 import {
   Actions
@@ -33,6 +34,7 @@ export default class Chat extends Component<Props> {
       messagesDOM: [],
       prevMessageUser: -1
     };
+    this.getValues();
     this.socket = io('10.0.2.2:3000', {jsonp: false});
     this.socket.on('initMessages', (allMsg) => {
       console.log('Initial messages received: ' + allMsg);
@@ -46,10 +48,32 @@ export default class Chat extends Component<Props> {
     });
   }
 
+  getValues = async () => {
+    try {
+      const long = await AsyncStorage.getItem('long');
+      const lat = await AsyncStorage.getItem('lat');
+      this.long = JSON.parse(long);
+      this.lat = JSON.parse(lat);
+      console.log('Retrieved long: ' + this.long);
+      console.log('Retrieved lat: ' + this.lat);
+    } catch (error) {
+      console.log(error);
+      //tell UI that cannot find location
+    }
+  }
+
   addMessage = (msg) => {
     console.log('New message received: ' + msg);
     var oldDOM = this.state.messagesDOM;
     var newMessage = this.createMessage(msg);
+    if (this.state.prevMessageUser != msg.userId) {
+      var dotSeparator = (
+        <View key={-msg.id} style={styles.separatorCont}>
+          <Text>. .</Text>
+        </View>
+      );
+      oldDOM.push(dotSeparator);
+    }
     this.setState({
       messagesDOM: oldDOM.concat(newMessage),
       prevMessageUser: msg.userId
@@ -58,14 +82,16 @@ export default class Chat extends Component<Props> {
 
   sendMessage = () => {
     console.log('Message to send: ' + this.state.messageToSend);
-    this.socket.emit('newMessage', this.state.messageToSend);
+    this.socket.emit('newMessage', {
+      userId: this.userId,
+      text: this.state.messageToSend
+    });
     this.setState({
       messageToSend: ''
     });
   }
 
   createMessage = (msg) => {
-    console.log(msg.userId);
     var isUser = msg.userId === this.userId;
     var contStyle = isUser ? styles.userMsg : styles.otherMsg;
     var txtContStyle = isUser ? styles.userMsgBox : styles.otherMsgBox;
@@ -77,7 +103,8 @@ export default class Chat extends Component<Props> {
     );
     var avatarAlready = this.state.prevMessageUser == msg.userId;
     var result = (
-      <View key={msg.id} style={[contStyle, styles.msgCont]}>
+      <View key={msg.id}
+        style={[contStyle, styles.msgCont, avatarAlready ? styles.avatarAlready : null]}>
         {isUser || avatarAlready ? null : avatar}
         <View style={[txtContStyle, styles.msgTxtCont]}>
           <Text style={[styles.msgText, txtStyle]}>{msg.text}</Text>
@@ -89,15 +116,12 @@ export default class Chat extends Component<Props> {
   }
 
   messageInput = (text) => {
-    console.log('changing state of messageToSend');
     this.setState({
       messageToSend : text
     });
-    console.log(this.state.messageToSend);
   }
 
   render() {
-    console.log(this.state.messagesDOM);
     return (
       <View style={styles.container}>
 
@@ -119,6 +143,7 @@ export default class Chat extends Component<Props> {
               style={styles.inputField}
               placeholder="Type a message..."
               onChangeText={this.messageInput}
+              value={this.state.messageToSend}
             />
           </View>
           <View style={styles.iconCont}>
@@ -155,8 +180,7 @@ const styles = {
     },
     msgCont: {
       flexDirection: 'row',
-      alignItems: 'center',
-      margin: 10
+      alignItems: 'center'
     },
       userMsg: {
         alignSelf: 'flex-end'
@@ -164,13 +188,18 @@ const styles = {
       otherMsg: {
         alignSelf: 'flex-start'
       },
+      avatarAlready: {
+        marginRight: 45,
+        marginLeft: 45
+      },
     avatar: {
       height: 35,
       width: 35,
-      borderRadius: 100
+      borderRadius: 100,
+      margin: 5
     },
     msgTxtCont: {
-      margin: 12,
+      margin: 3,
       padding: 12,
       borderBottomRightRadius: 15,
       borderBottomLeftRadius: 15
@@ -190,6 +219,10 @@ const styles = {
       userTxt: {
         color: 'white'
       },
+    separatorCont: {
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
   inputMsgField: {
     flex: 1,
     flexDirection: 'row',

server/app.js

@@ -17,26 +17,11 @@ app.get('/', function (req, res) {
   res.sendFile(__dirname + '/index.html');
 });
 
-var exMessages = [
-  {
-    userId: 10,
-    id: 1,
-    text: "hey anyone wanna study 61A"
-  },
-  {
-    userId: 1, // current user has an id of 1
-    id: 2, // id of message itself
-    text: "Yea im down"
-  }
-];
-
 io.on('connection', function (socket) {
   console.log('Client connected: ' + socket.id);
-  console.log(socket.handshake.jsonp);
-  
-  con.query('SELECT * FROM messages;', function (err, result, fields) {
+
+  con.query('SELECT * FROM messages', function (err, result, fields) {
     if (err) throw err;
-    console.log(result);
     socket.emit('initMessages', result);
     console.log('sent all initial messages');
   });
@@ -44,7 +29,26 @@ io.on('connection', function (socket) {
   //io.on('test', () => console.log('worked~')); // test with web page
 
   socket.on('newMessage', function(msg) {
-    io.emit('newMessage', msg);
+    var sql = "INSERT INTO messages (userId, text, createdAt) VALUES (?, ?, ?)";
+    var currTime = new Date().toString();
+    con.query(sql, [msg.userId, msg.text, currTime], function(err, result) {
+      if (err) throw err;
+      console.log('Message sent to db!');
+
+      var msgId = 0;
+      con.query('SELECT LAST_INSERT_ID()', function(err, result) {
+        if(err) throw err;
+        msgId = result.'LAST_INSERT_ID()';
+        console.log(msgId);
+      });
+      var uploadedMsg = {
+        id: msgId,
+        userId: msg.userId,
+        text: msg.text,
+        createdAt: currTime
+      };
+      io.emit('newMessage', uploadedMsg);
+    });
   });
 
   socket.on('disconnect', function() {