Add message scrollback

client/src/css/style.css

@@ -403,6 +403,13 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   right: 200px;
 }
 
+.messagebox-top-indicator {
+  color: #999;
+  height: 100px;
+  text-align: center;
+  padding-top: 40px;
+}
+
 .VirtualScroll {
   overflow-x: hidden !important;
 }

client/src/js/actions.js

@@ -5,6 +5,7 @@ export const CLOSE_PRIVATE_CHAT = 'CLOSE_PRIVATE_CHAT';
 export const COMMAND = 'COMMAND';
 export const CONNECT = 'CONNECT';
 export const DISCONNECT = 'DISCONNECT';
+export const FETCH_MESSAGES = 'FETCH_MESSAGES';
 export const HIDE_MENU = 'HIDE_MENU';
 export const INPUT_HISTORY_ADD = 'INPUT_HISTORY_ADD';
 export const INPUT_HISTORY_DECREMENT = 'INPUT_HISTORY_DECREMENT';

client/src/js/actions/message.js

@@ -1,5 +1,6 @@
 import * as actions from '../actions';
 import { findBreakpoints, messageHeight, linkify, timestamp } from '../util';
+import { getSelectedMessages } from '../reducers/messages';
 
 let nextID = 0;
 
@@ -47,6 +48,32 @@ function getMessageTab(server, to) {
   return to;
 }
 
+export function fetchMessages() {
+  return (dispatch, getState) => {
+    const state = getState();
+    const first = getSelectedMessages(state).get(0);
+
+    if (!first) {
+      return;
+    }
+
+    const tab = state.tab.selected;
+    if (tab.isChannel()) {
+      dispatch({
+        type: actions.FETCH_MESSAGES,
+        socket: {
+          type: 'fetch_messages',
+          data: {
+            server: tab.server,
+            channel: tab.name,
+            next: first.id
+          }
+        }
+      });
+    }
+  };
+}
+
 export function updateMessageHeight() {
   return (dispatch, getState) => dispatch({
     type: actions.UPDATE_MESSAGE_HEIGHT,
@@ -86,19 +113,24 @@ export function addMessage(message, server, to) {
   });
 }
 
-export function addMessages(messages, server, to) {
+export function addMessages(messages, server, to, prepend, next) {
   const tab = getMessageTab(server, to);
 
   return (dispatch, getState) => {
     const state = getState();
 
+    if (next) {
+      messages[0].id = next;
+    }
+
     messages.forEach(message => initMessage(message, server, message.tab || tab, state));
 
     dispatch({
       type: actions.ADD_MESSAGES,
       server,
       tab,
-      messages
+      messages,
+      prepend
     });
   };
 }

client/src/js/components/Message.js

@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react';
 
 export default class Message extends PureComponent {
-  handleNickClick = () => this.props.onNickClick(this.props.message);
-
   render() {
     const { message } = this.props;
     const className = message.type ? `message message-${message.type}` : 'message';

client/src/js/components/MessageBox.js

@@ -1,34 +1,65 @@
 import React, { PureComponent } from 'react';
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import debounce from 'lodash/debounce';
 import Message from './Message';
 import { measureScrollBarWidth } from '../util';
 
 const scrollBarWidth = measureScrollBarWidth();
 const listStyle = { padding: '7px 0', boxSizing: 'content-box' };
+const threshold = 100;
 
 export default class MessageBox extends PureComponent {
   componentWillUpdate(nextProps) {
+    if (nextProps.messages !== this.props.messages) {
+      this.list.recomputeRowHeights();
+    }
+
     if (nextProps.tab !== this.props.tab) {
       this.bottom = true;
     }
 
-    if (nextProps.messages !== this.props.messages) {
-      this.list.recomputeRowHeights();
+    if (nextProps.messages.get(0) !== this.props.messages.get(0)) {
+      if (nextProps.tab === this.props.tab) {
+        const addedMessages = nextProps.messages.size - this.props.messages.size;
+        let addedHeight = 0;
+        for (let i = 0; i < addedMessages; i++) {
+          addedHeight += nextProps.messages.get(i).height;
+        }
+
+        this.nextScrollTop = addedHeight + this.container.scrollTop;
+      }
+
+      this.loading = false;
     }
   }
 
   componentDidUpdate() {
-    if (this.bottom) {
-      this.list.scrollToRow(this.props.messages.size);
+    if (this.nextScrollTop > 0) {
+      this.container.scrollTop = this.nextScrollTop;
+      this.nextScrollTop = 0;
+    } else if (this.bottom) {
+      this.container.scrollTop = this.container.scrollHeight;
     }
 
     this.updateWidth();
   }
 
-  getRowHeight = ({ index }) => this.props.messages.get(index).height;
+  getRowHeight = ({ index }) => {
+    if (index === 0) {
+      if (this.props.hasMoreMessages) {
+        return 100;
+      }
+      return 0;
+    }
+    return this.props.messages.get(index - 1).height;
+  }
 
-  listRef = el => { this.list = el; };
+  listRef = el => {
+    this.list = el;
+    // eslint-disable-next-line no-underscore-dangle
+    this.container = el.Grid._scrollingContainer;
+  };
 
   updateWidth = (width) => {
     const { tab, setWrapWidth, updateMessageHeight } = this.props;
@@ -42,9 +73,7 @@ export default class MessageBox extends PureComponent {
       this.width = wrapWidth;
     }
 
-    // eslint-disable-next-line no-underscore-dangle
-    const container = this.list.Grid._scrollingContainer;
-    if (container.scrollHeight > container.clientHeight) {
+    if (this.container.scrollHeight > this.container.clientHeight) {
       wrapWidth -= scrollBarWidth;
     }
 
@@ -59,13 +88,59 @@ export default class MessageBox extends PureComponent {
     this.updateWidth(size.width - 30);
   };
 
+  fetchMore = debounce(() => {
+    this.loading = true;
+    this.props.onFetchMore();
+  }, 100);
+
   handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
+    if (this.props.hasMoreMessages &&
+      scrollTop <= threshold &&
+      scrollTop < this.prevScrollTop &&
+      !this.loading) {
+      if (this.mouseDown) {
+        this.shouldFetch = true;
+      } else {
+        this.fetchMore();
+      }
+    }
+
     this.bottom = scrollTop + clientHeight >= scrollHeight;
+    this.prevScrollTop = scrollTop;
+  };
+
+  handleMouseDown = () => {
+    this.mouseDown = true;
+  };
+
+  handleMouseUp = () => {
+    this.mouseDown = false;
+
+    if (this.shouldFetch) {
+      this.shouldFetch = false;
+      this.loading = true;
+      this.props.onFetchMore();
+    }
   };
 
   renderMessage = ({ index, style }) => {
+    if (index === 0) {
+      if (this.props.hasMoreMessages) {
+        return (
+          <div
+            key="top"
+            className="messagebox-top-indicator"
+            style={style}
+          >
+            Loading messages...
+          </div>
+        );
+      }
+      return null;
+    }
+
     const { messages, onNickClick } = this.props;
-    const message = messages.get(index);
+    const message = messages.get(index - 1);
 
     return (
       <Message
@@ -79,14 +154,18 @@ export default class MessageBox extends PureComponent {
 
   render() {
     return (
-      <div className="messagebox">
+      <div
+        className="messagebox"
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+      >
         <AutoSizer onResize={this.handleResize}>
           {({ width, height }) => (
             <List
               ref={this.listRef}
               width={width}
               height={height - 14}
-              rowCount={this.props.messages.size}
+              rowCount={this.props.messages.size + 1}
               rowHeight={this.getRowHeight}
               rowRenderer={this.renderMessage}
               onScroll={this.handleScroll}

client/src/js/containers/Chat.js

@@ -12,12 +12,14 @@ import { part } from '../actions/channel';
 import { openPrivateChat, closePrivateChat } from '../actions/privateChat';
 import { searchMessages, toggleSearch } from '../actions/search';
 import { select, setSelectedTab } from '../actions/tab';
-import { runCommand, sendMessage, updateMessageHeight } from '../actions/message';
+import { runCommand, sendMessage, updateMessageHeight, fetchMessages } from '../actions/message';
 import { disconnect } from '../actions/server';
 import { setWrapWidth, setCharWidth } from '../actions/environment';
 import { stringWidth } from '../util';
 import { toggleUserList } from '../actions/ui';
 import * as inputHistoryActions from '../actions/inputHistory';
+import { getSelectedTab } from '../reducers/tab';
+import { getSelectedMessages } from '../reducers/messages';
 
 function updateSelected({ params, dispatch }) {
   if (params.server) {
@@ -64,9 +66,11 @@ class Chat extends PureComponent {
     this.props.select(tab.server, message.from);
   };
 
+  handleFetchMore = () => this.props.dispatch(fetchMessages());
+
   render() {
     const { title, tab, channel, search, history,
-      messages, users, showUserList, inputActions } = this.props;
+      messages, hasMoreMessages, users, showUserList, inputActions } = this.props;
 
     let chatClass;
     if (tab.isChannel()) {
@@ -95,10 +99,12 @@ class Chat extends PureComponent {
         />
         <MessageBox
           messages={messages}
+          hasMoreMessages={hasMoreMessages}
           tab={tab}
           setWrapWidth={this.props.setWrapWidth}
           updateMessageHeight={this.props.updateMessageHeight}
           onNickClick={this.handleMessageNickClick}
+          onFetchMore={this.handleFetchMore}
         />
         <MessageInput
           tab={tab}
@@ -120,8 +126,6 @@ class Chat extends PureComponent {
   }
 }
 
-const tabSelector = state => state.tab.selected;
-const messageSelector = state => state.messages;
 const serverSelector = state => state.servers;
 const channelSelector = state => state.channels;
 const searchSelector = state => state.search;
@@ -134,14 +138,8 @@ const historySelector = state => {
   return state.input.history.get(state.input.index);
 };
 
-const selectedMessagesSelector = createSelector(
-  tabSelector,
-  messageSelector,
-  (tab, messages) => messages.getIn([tab.server, tab.name || tab.server], List())
-);
-
 const selectedChannelSelector = createSelector(
-  tabSelector,
+  getSelectedTab,
   channelSelector,
   (tab, channels) => channels.getIn([tab.server, tab.name], Map())
 );
@@ -152,16 +150,22 @@ const usersSelector = createSelector(
 );
 
 const titleSelector = createSelector(
-  tabSelector,
+  getSelectedTab,
   serverSelector,
   (tab, servers) => tab.name || servers.getIn([tab.server, 'name'])
 );
 
+const getHasMoreMessages = createSelector(
+  getSelectedMessages,
+  messages => messages.get(0) && typeof messages.get(0).id === 'string'
+);
+
 const mapStateToProps = createStructuredSelector({
   title: titleSelector,
-  tab: tabSelector,
+  tab: getSelectedTab,
   channel: selectedChannelSelector,
-  messages: selectedMessagesSelector,
+  messages: getSelectedMessages,
+  hasMoreMessages: getHasMoreMessages,
   users: usersSelector,
   showUserList: showUserListSelector,
   search: searchSelector,

client/src/js/index.js

@@ -48,8 +48,8 @@ if (env.users) {
 }
 
 if (env.messages) {
-  const { messages, server, to } = env.messages;
-  store.dispatch(addMessages(messages, server, to));
+  const { messages, server, to, next } = env.messages;
+  store.dispatch(addMessages(messages, server, to, false, next));
 }
 
 handleSocket(socket, store);

client/src/js/reducers/messages.js

@@ -1,7 +1,9 @@
 import { List, Map, Record } from 'immutable';
+import { createSelector } from 'reselect';
 import createReducer from '../util/createReducer';
 import { messageHeight } from '../util';
 import * as actions from '../actions';
+import { getSelectedTab } from './tab';
 
 const Message = Record({
   id: null,
@@ -19,16 +21,30 @@ function addMessage(state, { server, tab, message }) {
   return state.updateIn([server, tab], List(), list => list.push(new Message(message)));
 }
 
+export const getMessages = state => state.messages;
+
+export const getSelectedMessages = createSelector(
+  getSelectedTab,
+  getMessages,
+  (tab, messages) => messages.getIn([tab.server, tab.name || tab.server], List())
+);
+
 export default createReducer(Map(), {
   [actions.SEND_MESSAGE]: addMessage,
   [actions.ADD_MESSAGE]: addMessage,
 
-  [actions.ADD_MESSAGES](state, { server, tab, messages }) {
-    return state.withMutations(s =>
-      messages.forEach(message =>
-        s.updateIn([server, tab], List(), list => list.push(new Message(message)))
-      )
-    );
+  [actions.ADD_MESSAGES](state, { server, tab, messages, prepend }) {
+    return state.withMutations(s => {
+      if (prepend) {
+        for (let i = messages.length - 1; i >= 0; i--) {
+          s.updateIn([server, tab], List(), list => list.unshift(new Message(messages[i])));
+        }
+      } else {
+        messages.forEach(message =>
+          s.updateIn([server, tab], List(), list => list.push(new Message(message)))
+        );
+      }
+    });
   },
 
   [actions.DISCONNECT](state, { server }) {

client/src/js/reducers/tab.js

@@ -19,6 +19,8 @@ const State = Record({
   history: List()
 });
 
+export const getSelectedTab = state => state.tab.selected;
+
 export default createReducer(new State(), {
   [actions.SELECT_TAB](state, action) {
     const tab = new Tab(action);

client/src/js/socket.js

@@ -29,25 +29,25 @@ export default function handleSocket(socket, { dispatch, getState }) {
       dispatch(addMessage(message, message.server, message.from));
     },
 
-    messages({ messages, server, to }) {
-      dispatch(addMessages(messages, server, to));
+    messages({ messages, server, to, prepend, next }) {
+      dispatch(addMessages(messages, server, to, prepend, next));
     },
 
-    join(data) {
+    join({ user, server, channels }) {
       const state = getState();
-      const { server, channel } = state.tab.selected;
-      if (server && channel) {
-        const { nick } = state.servers.get(server);
-        const [joinedChannel] = data.channels;
-        if (server === data.server &&
-          nick === data.user &&
-          channel !== joinedChannel &&
-          normalizeChannel(channel) === normalizeChannel(joinedChannel)) {
+      const tab = state.tab.selected;
+      const [joinedChannel] = channels;
+      if (tab.server && tab.name) {
+        const { nick } = state.servers.get(tab.server);
+        if (tab.server === server &&
+          nick === user &&
+          tab.name !== joinedChannel &&
+          normalizeChannel(tab.name) === normalizeChannel(joinedChannel)) {
           dispatch(select(server, joinedChannel));
         }
       }
 
-      dispatch(inform(`${data.user} joined the channel`, data.server, data.channels[0]));
+      dispatch(inform(`${user} joined the channel`, server, joinedChannel));
     },
 
     servers(data) {