Ordering our messages

can’t have that now, can we?

This is actually quite easy. Right now, to go get our messages from the DB, our file looks like this:

messages.jsx

import React, { Component } from ‘react’;

import Message from ‘./message’; class Messages extends Component {

constructor(props) {

super(props);

this.chat = props.chat;

//init our Messages state with and empty conversation array

this.state = {

convo: []

};

} //when our component mounts, it will call to the database with

//this.chat.watch, setting the state and re-rendering our component

//with our messages componentDidMount() {

this.chat.watch().subscribe(

(messages) => {

let convo = messages.map(function(message) {

return message

});

this.setState({convo: convo});

},

(err) => {

console.log(err);

}

);

} //and our mappping function that used to render our dummy data,

//now outputs our db messages render() {

let msgsjsx = this.state.convo.map(function(message, i){

return <Message msg={message} key={i} />

});

return (

<div className=’container-fluid’>

{msgsjsx}

</div>

);

}

} export default Messages;

To get our messages ordering correctly, our good old fashioned Array.prototype.sort() comes to the rescue! We’re going to refactor our componentDidMount to look like this:

componentDidMount() {

this.chat.watch().subscribe(

(messages) => {

let allMSGS = messages.sort(function(a, b){

//this will return an array where the messages are sorted in

//descending order by time

return b.date — a.date;

})

this.setState({convo: allMSGS});

},

(err) => {

console.log(err);

}

);

}

Notice that inside our sorting function, we are using b.date -a.date. This is a property we are going to need to add to our message object, in order to accomplish the sort.

Inside of app.jsx, we have a sendMessage in our class object that looks like this:

sendMessage() {

if(this.state.text === false || this.state.author === false) {

alert(‘Invalid Submission’);

return;

}

let message = {

text: this.state.text,

author: this.state.author

};

chat.store(message);

}

Alter this method so the message object being created also has a date property:

sendMessage() {

if(this.state.text === ‘’ || this.state.author === ‘’) {

alert(‘Invalid Submission’);

return;

}

let now = Date.now();

let message = {

text: this.state.text,

author: this.state.author,

date: now

}

chat.store(message);

}

What this does, is it creates a Unix timestamp. It is the number of milliseconds that have elapsed since January 1, 1970. These numbers will allow our sort function to work in the way we wrote in. We’re almost done fixing our messaging display, but if we were to add messages and run localhost:8181 we would see this:

thats cool, but it’s not

Almost there! As we can see it’s sorting our timestamps, but only really smart humans can actually understand it. To transform this, we’re going to use a module from our updated package.json: Moment.js.

Update your message.jsx:

import React, { Component } from ‘react’;

import Moment from ‘moment’; export default class Message extends Component {

constructor(props) {

super(props);

this.props = props;

}

render() {

return (<div className=’row’>

<div className=’col-xs-2 center’>

{this.props.msg.author}

</div>

<div className=’col-xs-3 center’>

{ Moment(this.props.msg.date)

.format(‘MMMM Do YYYY, h:mm:ss a’)}

</div>

<div className=’col-xs-7 center’>

{this.props.msg.text}

</div>

</div>);

}

}

Open up localhost:8181 again, and it should look like this:

BAM!

THIS MIGHT BE A GOOD TIME TO TAKE A BREAK AND GIT COMMIT