Message display improvements

Let's take some time to do some quick UI improvements to our message display, before we move on to the user profile page.

Multiple users

If you try logging out and signing in with a new user, all the messages from all users are displayed, as shown:

There's no differentiation between my messages, and the messages of other users. The classic chat application pattern is to put one user's messages on one side, and one on the other. Our CSS is all ready to handle that—we just have to assign the class "mine" to messages that match the current user.

Since we have access to the email of the message author in msg.author, we can compare that to the user we have stored in the state of App. Let’s pass that down as a prop to ChatContainer:

<Route
  exact
  path="/"
  render={() => (
    <ChatContainer
      onSubmit={this.handleSubmitMessage}
      user={this.state.user}
      messages={this.state.messages}
    />
  )}
/>

Then, we can add a conditional in our className...