Pre-linkify messages and store breakpoints

client/src/js/actions/message.js

@@ -1,5 +1,5 @@
 import * as actions from '../actions';
-import { messageHeight } from '../util';
+import { findBreakpoints, messageHeight, linkify, timestamp } from '../util';
 
 function initMessage(message, state) {
   message.dest = message.to || message.from || message.server;
@@ -11,13 +11,23 @@ function initMessage(message, state) {
     message.channel = true;
   }
 
-  // Combine multiple adjacent spaces into a single one
+  // Collapse multiple adjacent spaces into a single one
   message.message = message.message.replace(/\s\s+/g, ' ');
 
+  if (message.message.indexOf('\x01ACTION') === 0) {
+    const from = message.from;
+    message.from = null;
+    message.type = 'action';
+    message.message = from + message.message.slice(7, -1);
+  }
+
   const charWidth = state.environment.get('charWidth');
   const wrapWidth = state.environment.get('wrapWidth');
 
+  message.length = message.message.length;
+  message.breakpoints = findBreakpoints(message.message);
   message.height = messageHeight(message, wrapWidth, charWidth, 6 * charWidth);
+  message.message = linkify(message.message);
 
   return message;
 }
@@ -34,23 +44,25 @@ export function sendMessage(message, to, server) {
   return (dispatch, getState) => {
     const state = getState();
 
-    dispatch(initMessage({
+    dispatch({
       type: actions.SEND_MESSAGE,
+      message: initMessage({
         from: state.servers.getIn([server, 'nick']),
         message,
         to,
         server,
-      time: new Date(),
+        time: timestamp()
+      }, state),
       socket: {
         type: 'chat',
         data: { message, to, server }
       }
-    }, state));
+    });
   };
 }
 
 export function addMessage(message) {
-  message.time = new Date();
+  message.time = timestamp();
 
   return (dispatch, getState) => dispatch({
     type: actions.ADD_MESSAGE,
@@ -59,7 +71,7 @@ export function addMessage(message) {
 }
 
 export function addMessages(messages) {
-  const now = new Date();
+  const now = timestamp();
 
   return (dispatch, getState) => {
     const state = getState();

client/src/js/components/Message.js

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import { timestamp, linkify } from '../util';
 
 export default class Message extends PureComponent {
   handleSenderClick = () => {
@@ -11,24 +10,7 @@ export default class Message extends PureComponent {
 
   render() {
     const { message } = this.props;
-    const classes = ['message'];
+    const className = message.type ? `message message-${message.type}` : '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`,
@@ -36,10 +18,13 @@ export default class Message extends PureComponent {
     };
 
     return (
-      <p className={classes.join(' ')} style={style}>
+      <p className={className} style={style}>
-        <span className="message-time">{timestamp(message.time)}</span>
+        <span className="message-time">{message.time}</span>
-        {sender}
+        {message.from &&
-        <span>{' '}{linkify(message.message)}</span>
+          <span className="message-sender" onClick={this.handleSenderClick}>
+            {' '}{message.from}
+          </span>
+        }{' '}{message.message}
       </p>
     );
   }

client/src/js/reducers/messages.js

@@ -11,25 +11,20 @@ const Message = Record({
   message: '',
   time: null,
   type: null,
+  channel: false,
   height: 0,
-  channel: false
+  length: 0,
+  breakpoints: null
 });
 
 function addMessage(state, message) {
-  if (message.message.indexOf('\x01ACTION') === 0) {
-    const from = message.from;
-    message.from = null;
-    message.type = 'action';
-    message.message = from + message.message.slice(7, -1);
-  }
-
   return state.updateIn([message.server, message.dest], List(),
     list => list.push(new Message(message)));
 }
 
 export default createReducer(Map(), {
   [actions.SEND_MESSAGE](state, action) {
-    return addMessage(state, action);
+    return addMessage(state, action.message);
   },
 
   [actions.ADD_MESSAGE](state, action) {

client/src/js/util/index.js

@@ -1,6 +1,6 @@
 import padStart from 'lodash/padStart';
 
-export messageHeight from './messageHeight';
+export { findBreakpoints, messageHeight } from './messageHeight';
 export linkify from './linkify';
 
 export function normalizeChannel(channel) {

client/src/js/util/messageHeight.js

@@ -2,7 +2,23 @@ const lineHeight = 24;
 let prevWidth;
 let windowWidth;
 
-export default function messageHeight(message, width, charWidth, indent = 0) {
+export function findBreakpoints(text) {
+  const breakpoints = [];
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text.charAt(i);
+
+    if (char === ' ') {
+      breakpoints.push({ end: i, next: i + 1 });
+    } else if (char === '-' && i !== text.length - 1) {
+      breakpoints.push({ end: i + 1, next: i + 1 });
+    }
+  }
+
+  return breakpoints;
+}
+
+export function messageHeight(message, width, charWidth, indent = 0) {
   let pad = (6 + (message.from ? message.from.length + 1 : 0)) * charWidth;
   let height = lineHeight + 4;
 
@@ -17,32 +33,27 @@ export default function messageHeight(message, width, charWidth, indent = 0) {
     }
   }
 
-  if (pad + (message.message.length * charWidth) < width) {
+  if (pad + (message.length * charWidth) < width) {
     return height;
   }
 
+  const breaks = message.breakpoints;
   let prevBreak = 0;
   let prevPos = 0;
 
-  for (let i = 0, len = message.message.length; i < len; i++) {
+  for (let i = 0; i < breaks.length; i++) {
-    const c = message.message.charAt(i);
+    if (pad + ((breaks[i].end - prevBreak) * charWidth) >= width) {
-
-    if (c === ' ' || c === '-') {
-      const end = c === ' ' ? i : i + 1;
-
-      if (pad + ((end - prevBreak) * charWidth) >= width) {
       prevBreak = prevPos;
       pad = indent;
       height += lineHeight;
     }
 
-      prevPos = i + 1;
+    prevPos = breaks[i].next;
-    } else if (i === len - 1) {
+  }
-      if (pad + ((len - prevBreak) * charWidth) >= width) {
+
+  if (pad + ((message.length - prevBreak) * charWidth) >= width) {
     height += lineHeight;
   }
-    }
-  }
 
   return height;
 }