From 587a1af3a2ee590ba33bb16429d4ebabeafedb08 Mon Sep 17 00:00:00 2001 From: talksik Date: Wed, 8 Aug 2018 08:04:03 -0700 Subject: [PATCH] adding in twitter frontend post in chat --- app/screens/main/apis/twitter.js | 67 ++++++++++++++++++++++++++++++++ app/screens/main/chat.js | 51 ++++++++++++------------ 2 files changed, 94 insertions(+), 24 deletions(-) create mode 100644 app/screens/main/apis/twitter.js diff --git a/app/screens/main/apis/twitter.js b/app/screens/main/apis/twitter.js new file mode 100644 index 0000000..364fa6d --- /dev/null +++ b/app/screens/main/apis/twitter.js @@ -0,0 +1,67 @@ +/* + * Twitter view component for the chat + */ +import React, { Component } from 'react'; +import { + Dimensions, + View, + Image, + 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 TwitterLocal extends Component { + render() { + return ( + + + 'this is the content of the tweet body longer than ever....Donal TRump you genius marketer awesome man!!!!!!!!!!!!!!!!asdfasdfsdfsd' + @Arjun Patel + + ); + } +} + +const styles = { + container: { + flex: 1, + 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: 'white' + }, + bodyTxt: { + fontSize: 16, + color: 'white', + margin: 5 + }, + screenNameTxt: { + fontSize: 12, + color: '#e5e7ea', + margin: 5, + alignSelf: 'flex-end' + } +} diff --git a/app/screens/main/chat.js b/app/screens/main/chat.js index c2967e6..97f7d1c 100644 --- a/app/screens/main/chat.js +++ b/app/screens/main/chat.js @@ -21,6 +21,8 @@ require('react-native'); // Socket.io imports import './UserAgent'; +import TwitterLocal from './apis/twitter.js'; + window.navigator.userAgent = "react-native"; const io = require('socket.io-client/dist/socket.io'); @@ -48,28 +50,28 @@ export default class Chat extends Component { console.log(props); } - // componentDidMount() { - // 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) => { - // this.addMessage(msg); - // }); - // }); - // - // this.socket.on('newMessage', (msg) => { - // this.addMessage(msg); - // }); - // } + componentDidMount() { + 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) => { + this.addMessage(msg); + }); + }); + + this.socket.on('newMessage', (msg) => { + this.addMessage(msg); + }); + } addMessage = (msg) => { console.log('New message received: '); @@ -165,6 +167,7 @@ export default class Chat extends Component { }} scrollEnabled={true} contentContainerStyle={styles.chatFieldScroll}> + {this.state.messagesDOM} @@ -219,8 +222,8 @@ const styles = { alignItems: 'center' }, loadingGif: { - height: 70, - width: 70 + height: 50, + width: 50 }, msgCont: { flexDirection: 'row',