diff --git a/app/screens/main.js b/app/screens/main.js index 5e256f7..ee79ad6 100644 --- a/app/screens/main.js +++ b/app/screens/main.js @@ -142,7 +142,7 @@ const styles = { position: 'relative' }, navbar: { - flex: 2 + flex: 1 }, chat: { flex: 15 diff --git a/app/screens/main/apis/news.js b/app/screens/main/apis/news.js index f66f0ab..fa4624a 100644 --- a/app/screens/main/apis/news.js +++ b/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 }, diff --git a/app/screens/main/chat.js b/app/screens/main/chat.js index 57d3fa3..2949fee 100644 --- a/app/screens/main/chat.js +++ b/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 { 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 { }); }); + var oldDOM = this.state.messagesDOM; + + + this.socket.on('initNews', (posts) => { console.log(posts); + + oldDOM.push( + + ); + 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 { 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 = ( @@ -142,17 +143,29 @@ export default class Chat extends Component { 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 = ( . . ); oldDOM.push(dotSeparator); + + var dateParts = isoFormatDateString.split("-"); + var jsDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2].substr(0,2)); + + var dateUpdate = ( + + {jsDate} + + ); + oldDOM.push(dateUpdate); } oldDOM.push(newMessage); + + this.setState({ messagesDOM: oldDOM, prevMessageUser: msg.user_id, @@ -191,6 +204,7 @@ export default class Chat extends Component { ); var avatarAlready = this.state.prevMessageUser == msg.user_id; + var result = ( @@ -225,7 +239,7 @@ export default class Chat extends Component { {this.state.messagesDOM.length == 0 ? ( - No conversation around you! Start it! + Looking for conversations going around you!!! ) : ( @@ -387,5 +401,14 @@ const styles = { sendIconColor: { fontSize: 25, color: '#0e8f9e' + }, + dateUpdateCont: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + margin: 10 + }, + dateUpdateTxt: { + fontSize: 12 } } diff --git a/app/screens/main/components/welcomemsg.js b/app/screens/main/components/welcomemsg.js new file mode 100644 index 0000000..c9ecbbc --- /dev/null +++ b/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 { + render() { + return ( + + Welcome to Tixto! Break the ice by starting a conversation! + + ); + } +} + +const styles = { + welcomeMsg: { + margin: 30, + padding: 20, + backgroundColor: 'black', + borderRadius: 8, + borderWidth: 3, + borderColor: 'gold' + }, + welcomeTxt: { + textAlign: 'center', + fontSize: 15, + color: 'gold' + } +} diff --git a/app/screens/main/navbar.js b/app/screens/main/navbar.js index d1a4256..04024f7 100644 --- a/app/screens/main/navbar.js +++ b/app/screens/main/navbar.js @@ -39,8 +39,6 @@ export default class Navbar extends Component { - Chat - online