diff --git a/app/screens/loading.js b/app/screens/loading.js index 5685539..1a3c410 100644 --- a/app/screens/loading.js +++ b/app/screens/loading.js @@ -26,8 +26,7 @@ export default class Loading extends Component { this.latitude = parseFloat(position.coords.latitude); this.longitude = parseFloat(position.coords.longitude); console.log(String(this.latitude) + ' ' + String(this.longitude)); - //AsyncStorage.setItem('longitude', this.longitude); - //AsyncStorage.setItem('latitude', this.latitude); + this.storeValues(); Actions.main(); }, (error) => console.log(error), @@ -38,6 +37,16 @@ export default class Loading extends Component { ); } + storeValues = async () => { + try { + await AsyncStorage.setItem('long', this.longitude); + await AsyncStorage.setItem('lat', this.latitude); + console.log('Stored Values!'); + } catch (error) { + console.log(error); + } + } + render() { return ( diff --git a/app/screens/main/chat.js b/app/screens/main/chat.js index 5b1bee4..241fcee 100644 --- a/app/screens/main/chat.js +++ b/app/screens/main/chat.js @@ -8,7 +8,8 @@ import { Text, TextInput, Image, - TouchableOpacity + TouchableOpacity, + AsyncStorage } from 'react-native'; import { Actions @@ -33,6 +34,7 @@ export default class Chat extends Component { messagesDOM: [], prevMessageUser: -1 }; + this.getValues(); this.socket = io('10.0.2.2:3000', {jsonp: false}); this.socket.on('initMessages', (allMsg) => { console.log('Initial messages received: ' + allMsg); @@ -46,10 +48,32 @@ export default class Chat extends Component { }); } + getValues = async () => { + try { + const long = await AsyncStorage.getItem('long'); + const lat = await AsyncStorage.getItem('lat'); + this.long = JSON.parse(long); + this.lat = JSON.parse(lat); + console.log('Retrieved long: ' + this.long); + console.log('Retrieved lat: ' + this.lat); + } catch (error) { + console.log(error); + //tell UI that cannot find location + } + } + addMessage = (msg) => { console.log('New message received: ' + msg); var oldDOM = this.state.messagesDOM; var newMessage = this.createMessage(msg); + if (this.state.prevMessageUser != msg.userId) { + var dotSeparator = ( + + . . + + ); + oldDOM.push(dotSeparator); + } this.setState({ messagesDOM: oldDOM.concat(newMessage), prevMessageUser: msg.userId @@ -58,14 +82,16 @@ export default class Chat extends Component { sendMessage = () => { console.log('Message to send: ' + this.state.messageToSend); - this.socket.emit('newMessage', this.state.messageToSend); + this.socket.emit('newMessage', { + userId: this.userId, + text: this.state.messageToSend + }); this.setState({ messageToSend: '' }); } 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; @@ -77,7 +103,8 @@ export default class Chat extends Component { ); var avatarAlready = this.state.prevMessageUser == msg.userId; var result = ( - + {isUser || avatarAlready ? null : avatar} {msg.text} @@ -89,15 +116,12 @@ export default class Chat extends Component { } messageInput = (text) => { - console.log('changing state of messageToSend'); this.setState({ messageToSend : text }); - console.log(this.state.messageToSend); } render() { - console.log(this.state.messagesDOM); return ( @@ -119,6 +143,7 @@ export default class Chat extends Component { style={styles.inputField} placeholder="Type a message..." onChangeText={this.messageInput} + value={this.state.messageToSend} /> @@ -155,8 +180,7 @@ const styles = { }, msgCont: { flexDirection: 'row', - alignItems: 'center', - margin: 10 + alignItems: 'center' }, userMsg: { alignSelf: 'flex-end' @@ -164,13 +188,18 @@ const styles = { otherMsg: { alignSelf: 'flex-start' }, + avatarAlready: { + marginRight: 45, + marginLeft: 45 + }, avatar: { height: 35, width: 35, - borderRadius: 100 + borderRadius: 100, + margin: 5 }, msgTxtCont: { - margin: 12, + margin: 3, padding: 12, borderBottomRightRadius: 15, borderBottomLeftRadius: 15 @@ -190,6 +219,10 @@ const styles = { userTxt: { color: 'white' }, + separatorCont: { + justifyContent: 'center', + alignItems: 'center' + }, inputMsgField: { flex: 1, flexDirection: 'row', diff --git a/server/app.js b/server/app.js index f0ddf6e..3a4bea5 100644 --- a/server/app.js +++ b/server/app.js @@ -17,26 +17,11 @@ 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('Client connected: ' + socket.id); - console.log(socket.handshake.jsonp); - - con.query('SELECT * FROM messages;', function (err, result, fields) { + + con.query('SELECT * FROM messages', function (err, result, fields) { if (err) throw err; - console.log(result); socket.emit('initMessages', result); console.log('sent all initial messages'); }); @@ -44,7 +29,26 @@ io.on('connection', function (socket) { //io.on('test', () => console.log('worked~')); // test with web page socket.on('newMessage', function(msg) { - io.emit('newMessage', msg); + var sql = "INSERT INTO messages (userId, text, createdAt) VALUES (?, ?, ?)"; + var currTime = new Date().toString(); + con.query(sql, [msg.userId, msg.text, currTime], function(err, result) { + if (err) throw err; + console.log('Message sent to db!'); + + var msgId = 0; + con.query('SELECT LAST_INSERT_ID()', function(err, result) { + if(err) throw err; + msgId = result.'LAST_INSERT_ID()'; + console.log(msgId); + }); + var uploadedMsg = { + id: msgId, + userId: msg.userId, + text: msg.text, + createdAt: currTime + }; + io.emit('newMessage', uploadedMsg); + }); }); socket.on('disconnect', function() {