diff --git a/app/screens/main/chat.js b/app/screens/main/chat.js index 415b50f..6ee9d15 100644 --- a/app/screens/main/chat.js +++ b/app/screens/main/chat.js @@ -15,6 +15,10 @@ import { import Icon from 'react-native-vector-icons/MaterialIcons'; import { Fonts } from '../../utils/Fonts.js'; +// Socket.io imports +window.navigator.userAgent = 'react-native'; +import io from 'socket.io-client/dist/socket.io'; + const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; @@ -22,22 +26,54 @@ type Props = {}; export default class Chat extends Component { constructor(props) { super(props); - var exMessages = [ - { - id: 1, - text: "hey anyone wanna study 61A" - }, - { - id: 2, - text: "Yea im down" - } - ]; + this.userId = 1; this.state = { messageToSend : '', - messagesDOM: exMessages.map( - (msg) => {msg.text} - ) + messagesDOM: [], + prevMessageUser: -1 }; + this.socket = io('10.0.2.2:3000', {jsonp: false}); + this.socket.on('message', (msg) => { + console.log('New message received: ' + msg); + var oldDOM = this.state.messagesDOM; + var newMessage = this.createMessage(msg); + this.setState({ + messagesDOM: oldDOM.concat(newMessage), + prevMessageUser: msg.userId + }); + }); + } + + /*componentWillMount() { + this.setState({ + messagesDOM: exMessages.map( + (msg) => this.createMessage(msg) + ) + }); + }*/ + + createMessage = (msg) => { + console.log(msg.userId); + var isUser = msg.userId === this.userId; + var contStyle = isUser ? styles.userMsg : styles.otherMsg; + var txtContStyle = isUser ? styles.userMsgBox : styles.otherMsgBox; + var txtStyle = isUser ? styles.userTxt : null; + var avatar = ( + + + + ); + var avatarAlready = this.state.prevMessageUser == msg.userId; + var result = ( + + {isUser || avatarAlready ? null : avatar} + + {msg.text} + + {isUser && !avatarAlready ? avatar : null} + + ); + return result; } messageInput = (text) => { @@ -52,24 +88,20 @@ export default class Chat extends Component { console.log(this.state.messagesDOM); return ( - - {this.state.messagesDOM.length == 0 ? - ( + {this.state.messagesDOM.length == 0 ? + + No one's talkin around you! Start it up! - ) - : - ( - {this.state.messagesDOM} - ) - } - - - - - cra + + : + + {this.state.messagesDOM} + + } + + console.log('serving on port: ' + port)); + +app.get('/', function (req, res) { + res.sendFile(__dirname + '/index.html'); +}); + +var exMessages = [ + { + userId: 10, + id: 1, + text: "hey anyone wanna study 61A" + }, + { + userId: 1, // current user has an id of 1 + id: 2, // id of message itself + text: "Yea im down" + } +]; + +io.on('connection', function (socket) { + console.log(socket.id); + exMessages.map((msg) => { + socket.emit('message', msg); + console.log('sending msg by msg'); + }); + + io.on('test', () => console.log('worked~')); +}); diff --git a/server/index.html b/server/index.html new file mode 100644 index 0000000..fa052bc --- /dev/null +++ b/server/index.html @@ -0,0 +1,7 @@ +

Welcome

+ + +