adding in ability to stay the same user with storing in asyncstorage

app/screens/main/apis/twitter.js

@@ -14,7 +14,7 @@ const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 
 type Props = {};
-export default class TwitterLocal extends Component<Props> {
+export default class TwitterPost extends Component<Props> {
   render() {
     return (
       <View style={styles.container}>
@@ -23,7 +23,11 @@ export default class TwitterLocal extends Component<Props> {
           style={styles.icon}
         />
         <Text style={styles.bodyTxt}>'this is the content of the tweet body longer than ever....Donal TRump you genius marketer awesome man!!!!!!!!!!!!!!!!asdfasdfsdfsd'</Text>
-        <Text style={styles.screenNameTxt}>@Arjun Patel</Text>
+
+        <View style={styles.infoCont}>
+          <Text style={styles.typeTxt}>local</Text>
+          <Text style={styles.screenNameTxt}>@Arjun Patel</Text>
+        </View>
       </View>
     );
   }
@@ -31,7 +35,6 @@ export default class TwitterLocal extends Component<Props> {
 
 const styles = {
   container: {
-    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'column',
@@ -51,17 +54,30 @@ const styles = {
   icon: {
     borderRadius: 60,
     fontSize: 20,
-    color: 'white'
+    color: 'gold'
   },
   bodyTxt: {
     fontSize: 16,
     color: 'white',
     margin: 5
   },
-  screenNameTxt: {
+  infoCont: {
-    fontSize: 12,
+    flex: 1,
-    color: '#e5e7ea',
+    alignSelf: 'stretch',
-    margin: 5,
+    justifyContent: 'space-between',
-    alignSelf: 'flex-end'
+    alignItems: 'center',
-  }
+    flexDirection: 'row',
+    margin: 5
+  },
+    typeTxt: {
+      fontSize: 12,
+      color: 'gold',
+      backgroundColor: 'black',
+      borderRadius: 4,
+      padding: 5
+    },
+    screenNameTxt: {
+      fontSize: 12,
+      color: 'gold'
+    }
 }

app/screens/main/chat.js

@@ -21,7 +21,7 @@ require('react-native');
 
 // Socket.io imports
 import './UserAgent';
-import TwitterLocal from './apis/twitter.js';
+import TwitterPost from './apis/twitter.js';
 
 window.navigator.userAgent = "react-native";
 const io = require('socket.io-client/dist/socket.io');
@@ -50,17 +50,50 @@ export default class Chat extends Component<Props> {
     console.log(props);
   }
 
+  storeUserId = async (id) => {
+    try {
+      await AsyncStorage.setItem('userId', id.toString());
+    } catch (error) {
+      // Error saving data
+      console.log(error);
+    }
+  }
+
+  retrieveUserId = async () => {
+    try {
+      const value = await AsyncStorage.getItem('userId');
+      var id;
+      if (value !== null) {
+        // We have data!!
+        console.log("Have user id: " + value);
+        this.socket.emit('userId', {user_id: parseInt(value), newUser: false, position: this.props.position, avatar: this.props.avatar});
+        id = parseInt(value);
+      } else {
+        this.socket.emit('userId', {user_id: value, newUser: true, position: this.props.position, avatar: this.props.avatar});
+        this.socket.on('getNewUserId', (result) => {
+          console.log('New id: ' + result.user_id);
+          this.storeUserId(result.user_id);
+          id = result.user_id;
+        });
+      }
+
+      this.setState({
+        userId: id
+      });
+     } catch (error) {
+       // Error retrieving data
+       console.log(error);
+     }
+  }
+
   componentDidMount() {
+    var stored_userId = this.retrieveUserId();
+
     this.socket = io('http://10.0.2.2:3000', {jsonp: false});
     this.socket.on('connect', () => {
       this.socket.emit('initial', {position: this.props.position, avatar: this.props.avatar});
     });
 
-    this.socket.on("userId", (obj) => {
-      console.log("User Id assigned: " + obj.userId);
-      this.setState({userId: obj.userId});
-    });
-
     this.socket.on('initMessages', (allMsg) => {
       console.log('Initial messages received: ' + allMsg);
       allMsg.map((msg) => {
@@ -74,7 +107,7 @@ export default class Chat extends Component<Props> {
   }
 
   addMessage = (msg) => {
-    console.log('New message received: ');
+    console.log('New message received!');
     var oldDOM = this.state.messagesDOM;
 
     var newMessage = this.createMessage(msg);
@@ -97,7 +130,6 @@ 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', {
@@ -155,7 +187,7 @@ export default class Chat extends Component<Props> {
         {this.state.messagesDOM.length == 0 ?
           (<View style={styles.chatFieldEmpty}>
             <Image style={styles.loadingGif} source={require(loadingGIF)} />
-            <Text>Loading the conversation around you!</Text>
+            <Text>No conversation around you! Start it!</Text>
           </View>)
           :
           (
@@ -167,7 +199,7 @@ export default class Chat extends Component<Props> {
               }}
               scrollEnabled={true}
               contentContainerStyle={styles.chatFieldScroll}>
-              <TwitterLocal />
+              <TwitterPost />
               {this.state.messagesDOM}
             </ScrollView>
           </View>