changes to all

app/screens/main.js

@@ -142,7 +142,7 @@ const styles = {
     position: 'relative'
   },
   navbar: {
-    flex: 2
+    flex: 1
   },
   chat: {
     flex: 15

app/screens/main/apis/news.js

@@ -53,7 +53,7 @@ const styles = {
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'column',
-    backgroundColor: '#0e8f9e',
+    backgroundColor: 'black',
     margin: 30,
     padding: 10,
     borderRadius: 5,
@@ -87,7 +87,6 @@ const styles = {
     typeTxt: {
       fontSize: 12,
       color: 'gold',
-      backgroundColor: 'black',
       borderRadius: 4,
       padding: 5
     },

app/screens/main/chat.js

@@ -24,6 +24,8 @@ import './UserAgent';
 import TwitterPost from './apis/twitter.js';
 import NewsPost from './apis/news.js';
 
+import WelcomeMsg from './components/welcomemsg.js';
+
 window.navigator.userAgent = "react-native";
 const io = require('socket.io-client/dist/socket.io');
 
@@ -90,7 +92,7 @@ export default class Chat extends Component<Props> {
   componentDidMount() {
     var stored_userId = this.retrieveUserId();
 
-    this.socket = io('https://murmuring-sierra-86040.herokuapp.com/', {jsonp: false});
+    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});
     });
@@ -102,23 +104,20 @@ export default class Chat extends Component<Props> {
       });
     });
 
+    var oldDOM = this.state.messagesDOM;
+
+
+
     this.socket.on('initNews', (posts) => {
       console.log(posts);
+
+      oldDOM.push(
+        <WelcomeMsg key={0} />
+      );
+
       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);
       });
     });
 
@@ -131,7 +130,9 @@ export default class Chat extends Component<Props> {
     console.log('New message received!');
     var oldDOM = this.state.messagesDOM;
 
-    if (oldDOM.length % 5 == 0) {
+    var newNews = oldDOM.length % 5 == 0;
+
+    if (newNews) {
       var actualPost = this.state.news[this.state.postNum];
       var newPost = (
         <NewsPost key={actualPost.uuid} title={actualPost.title} source={actualPost.thread.site} url={actualPost.url} />
@@ -142,17 +143,29 @@ export default class Chat extends Component<Props> {
 
     var newMessage = this.createMessage(msg);
 
-    if (this.state.prevMessageUser != msg.user_id && this.state.prevMessageUser) {
+    if (this.state.prevMessageUser != msg.user_id && this.state.prevMessageUser || newNews) {
       var dotSeparator = (
         <View key={msg.created} style={styles.separatorCont}>
           <Text>. .</Text>
         </View>
       );
       oldDOM.push(dotSeparator);
+
+      var dateParts = isoFormatDateString.split("-");
+      var jsDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2].substr(0,2));
+
+      var dateUpdate = (
+        <View key={msg.created} style={styles.dateUpdateCont}>
+          <Text style={styles.dateUpdateTxt}>{jsDate}</Text>
+        </View>
+      );
+      oldDOM.push(dateUpdate);
     }
 
     oldDOM.push(newMessage);
 
+
+
     this.setState({
       messagesDOM: oldDOM,
       prevMessageUser: msg.user_id,
@@ -191,6 +204,7 @@ export default class Chat extends Component<Props> {
     );
 
     var avatarAlready = this.state.prevMessageUser == msg.user_id;
+
     var result = (
       <View key={msg.id}
         style={[contStyle, styles.msgCont, avatarAlready ? styles.avatarAlready : null]}>
@@ -225,7 +239,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>No conversation around you! Start it!</Text>
+            <Text>Looking for conversations going around you!!!</Text>
           </View>)
           :
           (
@@ -387,5 +401,14 @@ const styles = {
     sendIconColor: {
       fontSize: 25,
       color: '#0e8f9e'
+    },
+  dateUpdateCont: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10
+  },
+    dateUpdateTxt: {
+      fontSize: 12
     }
 }

app/screens/main/components/welcomemsg.js

@@ -0,0 +1,40 @@
+/*
+ * Twitter view component for the chat
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  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 WelcomeMsg extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.welcomeMsg}>
+        <Text style={styles.welcomeTxt}>Welcome to Tixto! Break the ice by starting a conversation!</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  welcomeMsg: {
+    margin: 30,
+    padding: 20,
+    backgroundColor: 'black',
+    borderRadius: 8,
+    borderWidth: 3,
+    borderColor: 'gold'
+  },
+    welcomeTxt: {
+      textAlign: 'center',
+      fontSize: 15,
+      color: 'gold'
+    }
+}

app/screens/main/navbar.js

@@ -39,8 +39,6 @@ export default class Navbar extends Component<Props> {
         </View>
 
         <View style={styles.headerTxt}>
-          <Text style={styles.head}>Chat</Text>
-
           <View style={styles.statusCont}>
             <Icon style={styles.statusIcon} name='check-circle' />
             <Text style={styles.statusTxt}>online</Text>