adding in news component and saving avatars

app/screens/main.js

@@ -39,9 +39,7 @@ export default class Main extends Component<Props> {
         lat: props.lat
       }
     }
-  }
 
-  componentWillMount() {
     this.retrieveAvatar();
   }
 
@@ -51,22 +49,29 @@ export default class Main extends Component<Props> {
       if (value !== null) {
         // We have data!!
         console.log("Have avatar: " + value);
+
+        this.setState({
+          avatar: parseInt(value)
+        });
       } else {
-        this.storeAvatar(Math.floor(Math.random() * allAvatarLinks.length).toString());
+        var newValue = Math.floor(Math.random() * allAvatarLinks.length);
+        this.storeAvatar(newValue.toString());
+
+        this.setState({
+          avatar: newValue
+        });
       }
 
-      this.setState({
-        avatar: parseInt(value)
-      });
+
      } catch (error) {
        // Error retrieving data
        console.log(error);
      }
   }
 
-  storeAvatar = async (link) => {
+  storeAvatar = async (linkIndex) => {
     try {
-      await AsyncStorage.setItem('avatar', link);
+      await AsyncStorage.setItem('avatar', linkIndex);
     } catch (error) {
       // Error saving data
       console.log(error);
@@ -86,6 +91,8 @@ export default class Main extends Component<Props> {
     this.setState({
       avatar: newAvatar
     });
+
+    this.storeAvatar(newAvatar.toString());
   }
 
   openDrawer = () => {

app/screens/main/apis/news.js

@@ -0,0 +1,98 @@
+/*
+ * Twitter view component for the chat
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  TouchableOpacity,
+  Image,
+  Linking,
+  Text
+} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+type Props = {};
+export default class NewsPost extends Component<Props> {
+
+  handleClick = () => {
+    Linking.canOpenURL(this.props.url).then(supported => {
+      if (supported) {
+        Linking.openURL(this.props.url);
+      } else {
+        console.log("Don't know how to open URI: " + this.props.url);
+      }
+    });
+  };
+
+  render() {
+    const { title, source } = this.props;
+
+    return (
+      <TouchableOpacity onPress={this.handleClick} style={styles.container}>
+        <Icon
+          name='newspaper-o'
+          style={styles.icon}
+        />
+        <Text style={styles.bodyTxt}>{title}</Text>
+
+        <View style={styles.infoCont}>
+          <Text style={styles.typeTxt}>unversal</Text>
+          <Text style={styles.screenNameTxt}>@{source}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    backgroundColor: '#0e8f9e',
+    margin: 30,
+    padding: 10,
+    borderRadius: 5,
+    shadowColor: 'grey',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowRadius: 5,
+    shadowOpacity: 1.0,
+    elevation: 4
+  },
+  icon: {
+    borderRadius: 60,
+    fontSize: 20,
+    color: 'gold'
+  },
+  bodyTxt: {
+    fontSize: 16,
+    color: 'white',
+    margin: 5
+  },
+  infoCont: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'space-between',
+    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

@@ -22,6 +22,7 @@ require('react-native');
 // Socket.io imports
 import './UserAgent';
 import TwitterPost from './apis/twitter.js';
+import NewsPost from './apis/news.js';
 
 window.navigator.userAgent = "react-native";
 const io = require('socket.io-client/dist/socket.io');
@@ -50,7 +51,7 @@ export default class Chat extends Component<Props> {
     console.log(props);
   }
 
-  storeUserId = async (location, item) => {
+  storeItem = async (location, item) => {
     try {
       await AsyncStorage.setItem(location, item);
     } catch (error) {
@@ -72,7 +73,7 @@ export default class Chat extends Component<Props> {
         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('userId', result.user_id.toString());
+          this.storeItem('userId', result.user_id.toString());
           id = result.user_id;
         });
       }
@@ -101,6 +102,26 @@ export default class Chat extends Component<Props> {
       });
     });
 
+    this.socket.on('initNews', (posts) => {
+      console.log(posts);
+      this.setState({
+        news: posts,
+        postNum: 0
+      }, () => {
+        var welcomeMessage = {
+          id: 0,
+          text: 'Welcome to Nexto! Break the ice by starting a conversation!',
+          user_id: this.state.userId,
+          created: new Date(),
+          long: 0,
+          lat: 0,
+          avatar: this.props.avatar
+        };
+
+        this.addMessage(welcomeMessage);
+      });
+    });
+
     this.socket.on('newMessage', (msg) => {
       this.addMessage(msg);
     });
@@ -110,6 +131,15 @@ export default class Chat extends Component<Props> {
     console.log('New message received!');
     var oldDOM = this.state.messagesDOM;
 
+    if (oldDOM.length % 5 == 0) {
+      var actualPost = this.state.news[this.state.postNum];
+      var newPost = (
+        <NewsPost key={actualPost.uuid} title={actualPost.title} source={actualPost.thread.site} url={actualPost.url} />
+      );
+
+      oldDOM.push(newPost);
+    }
+
     var newMessage = this.createMessage(msg);
 
     if (this.state.prevMessageUser != msg.user_id && this.state.prevMessageUser) {
@@ -125,7 +155,8 @@ export default class Chat extends Component<Props> {
 
     this.setState({
       messagesDOM: oldDOM,
-      prevMessageUser: msg.user_id
+      prevMessageUser: msg.user_id,
+      postNum: this.state.postNum + 1
     });
   }
 
@@ -146,25 +177,32 @@ export default class Chat extends Component<Props> {
   }
 
   createMessage = (msg) => {
+    console.log(msg.id);
     var isUser = msg.user_id == 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: avatarLink}} />
       </View>
     );
+
     var avatarAlready = this.state.prevMessageUser == msg.user_id;
     var result = (
       <View key={msg.id}
         style={[contStyle, styles.msgCont, avatarAlready ? styles.avatarAlready : null]}>
+
         {!isUser && !avatarAlready ? avatar : null}
+
         <View style={[txtContStyle, styles.msgTxtCont]}>
           <Text style={[styles.msgText, txtStyle]}>{msg.text}</Text>
         </View>
+
         {isUser && !avatarAlready ? avatar : null}
+
       </View>
     );
     return result;
@@ -199,8 +237,9 @@ export default class Chat extends Component<Props> {
               }}
               scrollEnabled={true}
               contentContainerStyle={styles.chatFieldScroll}>
-              <TwitterPost />
+
               {this.state.messagesDOM}
+
             </ScrollView>
           </View>
           )