chat part working quite seemlessly with heroku server and database

- fixed many issues with keeping connection alive, avatars, userId, etc.

app/screens/loading.js

@@ -29,7 +29,7 @@ export default class Loading extends Component<Props> {
       /**
       *   todo fix AsyncStorage
       */
-      this.storeValues();
+      //this.storeValues();
       Actions.main({long: this.longitude.toString(), lat: this.latitude.toString()});
       },
       (error) => console.log(error),

app/screens/main.js

@@ -25,25 +25,46 @@ import AdSpace from './main/adspace.js';
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 
+const allAvatarLinks = ['https://images.pexels.com/photos/430207/pexels-photo-430207.jpeg?auto=compress&cs=tinysrgb&h=350', 'https://www.graphicpear.com/wp-content/uploads/2017/05/aaa.jpg', 'https://i.pinimg.com/736x/1f/12/87/1f1287b54f9d0c8f5c5fe86d27c95bbb--blue-patterns-indoor-outdoor-rugs.jpg'];
+
 type Props = {};
 export default class Main extends Component<Props> {
   constructor(props) {
     super(props);
-    this.position = {
-      long: this.props.long,
-      lat: this.props.lat
-    };
+
+    var avatarRandom = Math.floor(Math.random() * allAvatarLinks.length);
+
+    this.state = {
+      position: {
+        long: props.long,
+        lat: props.lat
+      },
+      avatar: avatarRandom
+    }
   }
 
-  closeDrawer = () => {
-    this.drawer._root.close();
-  };
-  openDrawer = () => {
-    this.drawer._root.open();
-  };
+  refreshConnection = () => {
+
+  }
+
+  disconnect = () => {
+    Actions.home();
+  }
+
+  refreshAvatar = () => {
+    var newAvatar = (this.state.avatar + 1) % allAvatarLinks.length;
+    this.setState({
+      avatar: newAvatar
+    });
+  }
 
   render() {
     console.log('in Main');
+    const { position, avatar } = this.state;
+    const avatarLink = allAvatarLinks[avatar];
+
+    console.log(position);
+
     return (
       <DrawerLayoutAndroid
         drawerWidth={300}
@@ -51,10 +72,10 @@ export default class Main extends Component<Props> {
         renderNavigationView={() => <Menu />}>
         <View style={styles.container}>
           <View style={styles.navbar}>
-            <Navbar />
+            <Navbar avatar={avatarLink} />
           </View>
           <View style={styles.chat}>
-            <Chat position={this.position} />
+            <Chat position={position} avatar={avatarLink} />
           </View>
           <View style={styles.adspace}>
             <AdSpace />

app/screens/main/chat.js

@@ -30,24 +30,36 @@ type Props = {};
 export default class Chat extends Component<Props> {
   constructor(props) {
     super(props);
-    this.userId = 1;
+
     this.state = {
       messageToSend : '',
       messagesDOM: [],
-      prevMessageUser: -1,
-      messages: [(<View key={0}><Text>adf</Text></View>), (<View key={1}><Text>second</Text></View>)]
+      prevMessageUser: null,
+      userId: null,
+
     };
     /**
     *   todo fix AsyncStorage
     */
-    this.position = this.props.position;
+
+    console.log(props);
   }
 
   componentDidMount() {
-    this.socket = io('10.0.2.2:3000', {jsonp: false});
+    this.socket = io('https://murmuring-sierra-86040.herokuapp.com', {jsonp: false});
     this.socket.on('connect', () => {
-      console.log('again');
-      this.socket.emit('initial', this.position);
+      this.socket.emit('initial', this.props.position);
+
+      fetch('https://murmuring-sierra-86040.herokuapp.com/userid')
+        .then((response) => response.json())
+        .then((responseJson) => {
+          console.log(responseJson);
+          this.setState({userId: responseJson.userId});
+        })
+        .catch((error) => {
+          console.log(error);
+          this.setState({userId: 1}); // TODO: error popup
+        });
     });
 
     this.socket.on('initMessages', (allMsg) => {
@@ -66,15 +78,15 @@ export default class Chat extends Component<Props> {
     console.log('New message received: ');
     var oldDOM = this.state.messagesDOM;
     var newMessage = this.createMessage(msg);
-    oldDOM.push(newMessage);
-    if (this.state.prevMessageUser != msg.userId) {
+    if (this.state.prevMessageUser != msg.userId && this.state.prevMessageUser) {
       var dotSeparator = (
-        <View key={-msg.id} style={styles.separatorCont}>
+        <View key={msg.text} style={styles.separatorCont}>
           <Text>. .</Text>
         </View>
       );
       oldDOM.push(dotSeparator);
     }
+    oldDOM.push(newMessage);
     this.setState({
       messagesDOM: oldDOM,
       prevMessageUser: msg.userId
@@ -82,12 +94,14 @@ export default class Chat extends Component<Props> {
   }
 
   sendMessage = () => {
+    console.log(this.state.userId);
     console.log('Message to send: ' + this.state.messageToSend);
     this.socket.emit('newMessage', {
-      userId: this.userId,
+      userId: this.state.userId,
       text: this.state.messageToSend,
-      lng: this.position.long,
-      lat: this.position.lat
+      lng: this.props.position.long,
+      lat: this.props.position.lat,
+      avatar: this.props.avatar
     });
     this.setState({
       messageToSend: ''
@@ -95,27 +109,27 @@ export default class Chat extends Component<Props> {
   }
 
   createMessage = (msg) => {
-    var isUser = msg.userId === this.userId;
+    var isUser = msg.userId == this.state.userId;
     var contStyle = isUser ? styles.userMsg : styles.otherMsg;
     var txtContStyle = isUser ? styles.userMsgBox : styles.otherMsgBox;
     var txtStyle = isUser ? styles.userTxt : null;
+    var avatarLink = msg.avatar;
     var avatar = (
       <View>
-        <Image style={styles.avatar} source={{uri: 'https://images.pexels.com/photos/430207/pexels-photo-430207.jpeg?auto=compress&cs=tinysrgb&h=350'}} />
+        <Image style={styles.avatar} source={{uri: avatarLink}} />
       </View>
     );
     var avatarAlready = this.state.prevMessageUser == msg.userId;
     var result = (
       <View key={msg.id}
         style={[contStyle, styles.msgCont, avatarAlready ? styles.avatarAlready : null]}>
-        {isUser || avatarAlready ? null : avatar}
+        {!isUser && !avatarAlready ? avatar : null}
         <View style={[txtContStyle, styles.msgTxtCont]}>
           <Text style={[styles.msgText, txtStyle]}>{msg.text}</Text>
         </View>
         {isUser && !avatarAlready ? avatar : null}
       </View>
     );
-    console.log(result);
     return result;
   }
 

app/screens/main/menu.js

@@ -1,12 +1,13 @@
 /*
- * AdSpace component within Main
+ * Menu with few options
  */
 import React, { Component } from 'react';
 import {
   Dimensions,
   View,
   Text,
-  ImageBackground
+  ImageBackground,
+  TouchableOpacity
 } from 'react-native';
 import {
   Actions
@@ -27,27 +28,33 @@ export default class Menu extends Component<Props> {
           <Text style={styles.hdrTxt}>Menu</Text>
         </ImageBackground>
         <View style={styles.main}>
-          <View style={styles.option}>
-            <Text style={styles.optTxt}>Refresh Connection</Text>
-            <Icon
-              name='track-changes'
-              style={styles.icons}
-            />
-          </View>
-          <View style={styles.option}>
-            <Text style={styles.optTxt}>Change Avatar</Text>
-            <Icon
-              name='refresh'
-              style={styles.icons}
-            />
-          </View>
-          <View style={styles.option}>
-            <Text style={styles.optTxt}>Disconnect</Text>
-            <Icon
-              name='exit-to-app'
-              style={styles.icons}
-            />
-          </View>
+          <TouchableOpacity>
+            <View style={styles.option}>
+              <Text style={styles.optTxt}>Refresh Connection</Text>
+              <Icon
+                name='track-changes'
+                style={styles.icons}
+              />
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity>
+            <View style={styles.option}>
+              <Text style={styles.optTxt}>Change Avatar</Text>
+              <Icon
+                name='refresh'
+                style={styles.icons}
+              />
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity>
+            <View style={styles.option}>
+              <Text style={styles.optTxt}>Disconnect</Text>
+              <Icon
+                name='exit-to-app'
+                style={styles.icons}
+              />
+            </View>
+          </TouchableOpacity>
         </View>
       </View>
     );

app/screens/main/navbar.js

@@ -19,7 +19,13 @@ const windowHeight = Dimensions.get('window').height;
 
 type Props = {};
 export default class Navbar extends Component<Props> {
+  constructor(props) {
+    super(props);
+  }
+
   render() {
+    const { avatar } = this.props;
+
     return (
       <View style={styles.container}>
         <View style={styles.iconCont}>
@@ -33,7 +39,7 @@ export default class Navbar extends Component<Props> {
           <Text style={styles.status}>online</Text>
         </View>
         <View style={styles.iconCont}>
-          <Image source={require('../../assets/images/patterns/1.jpg')} style={styles.avatar} />
+          <Image style={styles.avatar} source={{uri: avatar}} />
         </View>
       </View>
     );

server/app.js

@@ -4,10 +4,10 @@ var io = require('socket.io')(server);
 var mysql = require('mysql');
 
 var con = mysql.createConnection({
-  host: 'localhost',
-  user: 'root',
-  password: 'mysql',
-  database: 'nexto'
+  host: 'us-cdbr-iron-east-04.cleardb.net',
+  user: 'bc7fa7fdf1822b',
+  password: 'f62b55b3',
+  database: 'heroku_99e764eb3c2ab7e'
 });
 
 var port = 3000;
@@ -61,4 +61,13 @@ io.on('connection', function (socket) {
   socket.on('disconnect', function() {
     console.log('Client disconnected: ' + socket.id);
   });
+
+  connection.on('error', function (err) {
+    if (!err.fatal) {
+      return;
+    }
+    if (err.code !== 'PROTOCOL_CONNECTION_LOST') {
+      throw err;
+    }
+  });
 });