Improve message rendering

client/src/js/components/Message.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import Autolinker from 'autolinker';
+import pure from 'pure-render-decorator';
+import { timestamp } from '../util';
+
+@pure
+export default class Message extends Component {
+  handleSenderClick = () => {
+    const { message, openPrivateChat, select } = this.props;
+
+    openPrivateChat(message.server, message.from);
+    select(message.server, message.from, true);
+  };
+
+  render() {
+    const { message } = this.props;
+    const content = Autolinker.link(message.message, { stripPrefix: false });
+    const classes = ['message'];
+    let sender = null;
+
+    if (message.type) {
+      classes.push(`message-${message.type}`);
+    }
+
+    if (message.from) {
+      sender = (
+        <span>
+          {' '}
+          <span className="message-sender" onClick={this.handleSenderClick}>
+            {message.from}
+          </span>
+        </span>
+      );
+    }
+
+    const style = {
+      paddingLeft: `${window.messageIndent + 15}px`,
+      textIndent: `-${window.messageIndent}px`
+    };
+
+    return (
+      <p className={classes.join(' ')} style={style}>
+        <span className="message-time">{timestamp(message.time)}</span>
+        {sender}
+        <span dangerouslySetInnerHTML={{ __html: ` ${content}` }}></span>
+      </p>
+    );
+  }
+}