storing and retrieving long and lat values

app/screens/loading.js

@@ -25,7 +25,7 @@ export default class Loading extends Component<Props> {
       console.log('Getting User Location:');
       this.latitude = parseFloat(position.coords.latitude);
       this.longitude = parseFloat(position.coords.longitude);
-      console.log(String(this.latitude) + ' ' + String(this.longitude));
+      console.log(this.latitude.toString() + ' ' + this.longitude.toString());
       this.storeValues();
       Actions.main();
       },
@@ -39,9 +39,11 @@ 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!');
+      var toStore = [['long', this.longitude.toString()], ['lat', this.latitude.toString()]];
+      await AsyncStorage.multiSet(toStore, () => {
+        console.log('Stored values!');
+        Actions.main();
+      });
     } catch (error) {
       console.log(error);
     }

app/screens/main/UserAgent.js

@@ -0,0 +1 @@
+window.navigator.userAgent = 'react-native';

app/screens/main/chat.js

@@ -18,7 +18,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import { Fonts } from '../../utils/Fonts.js';
 
 // Socket.io imports
-window.navigator.userAgent = 'react-native';
+import './UserAgent';
 import io from 'socket.io-client/dist/socket.io';
 
 const windowWidth = Dimensions.get('window').width;
@@ -34,8 +34,34 @@ export default class Chat extends Component<Props> {
       messagesDOM: [],
       prevMessageUser: -1
     };
-    this.getValues();
+    this.getValues(); // from AsyncStorage
+
+  }
+
+  getValues = async () => {
+    try {
+      await AsyncStorage.multiGet(['long', 'lat'], (err, stores) => {
+        stores.map((result, i, store) => {
+          let key = store[i][0];
+          let value = store[i][1];
+          key == 'long' ? this.long = parseFloat(value) : this.lat = parseFloat(value);
+        });
+      });
+      console.log(this.long + ' ' + this.lat);
+    } catch (error) {
+      console.log(error);
+      // tell UI that cannot find location
+    }
+  }
+
+  componentDidMount() {
     this.socket = io('10.0.2.2:3000', {jsonp: false});
+    this.socket.on('connect', () => {
+      var position = {long: this.long, lat: this.lat};
+      console.log(position);
+      this.socket.emit('initial', position);
+    });
+
     this.socket.on('initMessages', (allMsg) => {
       console.log('Initial messages received: ' + allMsg);
       allMsg.map((msg) => {
@@ -48,20 +74,6 @@ 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;
@@ -84,7 +96,9 @@ export default class Chat extends Component<Props> {
     console.log('Message to send: ' + this.state.messageToSend);
     this.socket.emit('newMessage', {
       userId: this.userId,
-      text: this.state.messageToSend
+      text: this.state.messageToSend,
+      lng: this.long,
+      lat: this.lat
     });
     this.setState({
       messageToSend: ''
@@ -121,6 +135,10 @@ export default class Chat extends Component<Props> {
     });
   }
 
+  sendFieldStyle = () => {
+    return this.state.messageToSend == '' ? styles.sendIcon : styles.sendIconColor;
+  }
+
   render() {
     return (
       <View style={styles.container}>
@@ -150,7 +168,7 @@ export default class Chat extends Component<Props> {
             <TouchableOpacity onPress={this.sendMessage}>
               <Icon
                 name='send'
-                style={styles.sendIcon}
+                style={this.sendFieldStyle()}
               />
             </TouchableOpacity>
           </View>
@@ -229,7 +247,8 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'space-between',
     height: 50,
-    backgroundColor: 'white'
+    backgroundColor: 'white',
+    marginTop: 10
   },
   iconCont: {
     flex: 1,
@@ -247,5 +266,9 @@ const styles = {
     },
   sendIcon: {
     fontSize: 25
-  }
+  },
+    sendIconColor: {
+      fontSize: 25,
+      color: '#0e8f9e'
+    }
 }

server/app.js

@@ -20,32 +20,39 @@ app.get('/', function (req, res) {
 io.on('connection', function (socket) {
   console.log('Client connected: ' + socket.id);
 
-  con.query('SELECT * FROM messages', function (err, result, fields) {
-    if (err) throw err;
-    socket.emit('initMessages', result);
-    console.log('sent all initial messages');
+  socket.on('initial', (position) => {
+    console.log(position.long + ' ' + position.lat);
+    //var sql = 'select * from messages where lng = 0';
+    var sql = 'SELECT * FROM messages HAVING (6371393 * acos(cos(radians((?))) * cos(radians(lat)) * cos(radians(lng) - radians((?))) + sin(radians((?))) * sin(radians(lat))) < 100) ORDER BY id;'
+    con.query(sql, [position.lat, position.long, position.lat], function (err, result, fields) {
+      if (err) throw err;
+      socket.emit('initMessages', result);
+      console.log('sent all initial messages');
+    });
   });
 
   //io.on('test', () => console.log('worked~')); // test with web page
 
   socket.on('newMessage', function(msg) {
-    var sql = "INSERT INTO messages (userId, text, createdAt) VALUES (?, ?, ?)";
+    var sql = "INSERT INTO messages (userId, text, createdAt, lng, lat) VALUES (?, ?, ?, ?, ?)";
     var currTime = new Date().toString();
-    con.query(sql, [msg.userId, msg.text, currTime], function(err, result) {
+    con.query(sql, [msg.userId, msg.text, currTime, msg.lng, msg.lat], 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()';
+        msgId = result;
         console.log(msgId);
       });
       var uploadedMsg = {
         id: msgId,
         userId: msg.userId,
         text: msg.text,
-        createdAt: currTime
+        createdAt: currTime,
+        lng: msg.lng,
+        lat: msg.lat
       };
       io.emit('newMessage', uploadedMsg);
     });