Collapse and log join, part and quit, closes #27, log nick and topic changes, move state into irc package

2020-06-03 03:04:38 +02:00 · 2020-06-03 03:04:38 +02:00 · ead3b37cf9
commit ead3b37cf9
parent edd4d6eadb
37 changed files with 1980 additions and 969 deletions
--- a/client/css/style.css
+++ b/client/css/style.css
@ -725,6 +725,11 @@ input.chat-title {
  cursor: pointer;
 }

+.message-events-more {
+  font-weight: 700;
+  cursor: pointer;
+}
+
 .message-input-wrap {
  position: absolute;
  left: 0;
--- a/client/js/components/pages/Chat/Message.js
+++ b/client/js/components/pages/Chat/Message.js
@ -2,24 +2,23 @@ import React, { memo } from 'react';
 import classnames from 'classnames';
 import stringToRGB from 'utils/color';

-const Message = ({ message, coloredNick, style, onNickClick }) => {
+const Message = ({ message, coloredNick, onNickClick }) => {
  const className = classnames('message', {
    [`message-${message.type}`]: message.type
  });

  if (message.type === 'date') {
    return (
-      <div className={className} style={style}>
+      <div className={className}>
        {message.content}
        <hr />
      </div>
    );
  }

-  style = {
-    ...style,
-    paddingLeft: `${window.messageIndent + 15}px`,
-    textIndent: `-${window.messageIndent}px`
+  const style = {
+    paddingLeft: `${message.indent + 15}px`,
+    textIndent: `-${message.indent}px`
  };

  const senderStyle = {};
--- a/client/js/components/pages/Chat/MessageBox.js
+++ b/client/js/components/pages/Chat/MessageBox.js
@ -247,12 +247,13 @@ export default class MessageBox extends PureComponent {
    const message = messages[index - 1];

    return (
-      <Message
-        message={message}
-        coloredNick={coloredNicks}
-        style={style}
-        onNickClick={onNickClick}
-      />
+      <div style={style}>
+        <Message
+          message={message}
+          coloredNick={coloredNicks}
+          onNickClick={onNickClick}
+        />
+      </div>
    );
  };

--- a/client/js/modules/socket.js
+++ b/client/js/modules/socket.js
@ -1,21 +1,17 @@
 import { socketAction } from 'state/actions';
 import { setConnected } from 'state/app';
 import {
-  broadcast,
-  inform,
  print,
  addMessage,
-  addMessages
+  addMessages,
+  addEvent,
+  broadcastEvent
 } from 'state/messages';
 import { openModal } from 'state/modals';
 import { reconnect } from 'state/servers';
 import { select } from 'state/tab';
 import { find } from 'utils';

-function withReason(message, reason) {
-  return message + (reason ? ` (${reason})` : '');
-}
-
 function findChannels(state, server, user) {
  const channels = [];

@ -46,37 +42,34 @@ export default function handleSocket({
    },

    join({ user, server, channels }) {
-      dispatch(inform(`${user} joined the channel`, server, channels[0]));
+      dispatch(addEvent(server, channels[0], 'join', user));
    },

    part({ user, server, channel, reason }) {
-      dispatch(
-        inform(withReason(`${user} left the channel`, reason), server, channel)
-      );
+      dispatch(addEvent(server, channel, 'part', user, reason));
    },

    quit({ user, server, reason }) {
      const channels = findChannels(getState(), server, user);
-      dispatch(broadcast(withReason(`${user} quit`, reason), server, channels));
+      dispatch(broadcastEvent(server, channels, 'quit', user, reason));
    },

    nick({ server, oldNick, newNick }) {
      if (oldNick) {
        const channels = findChannels(getState(), server, oldNick);
-        dispatch(
-          broadcast(`${oldNick} changed nick to ${newNick}`, server, channels)
-        );
+        dispatch(broadcastEvent(server, channels, 'nick', oldNick, newNick));
      }
    },

    topic({ server, channel, topic, nick }) {
      if (nick) {
-        if (topic) {
+        dispatch(addEvent(server, channel, 'topic', nick, topic));
+        /* if (topic) {
          dispatch(inform(`${nick} changed the topic to:`, server, channel));
          dispatch(print(topic, server, channel));
        } else {
          dispatch(inform(`${nick} cleared the topic`, server, channel));
-        }
+        } */
      }
    },

--- a/client/js/modules/widthUpdates.js
+++ b/client/js/modules/widthUpdates.js
@ -10,7 +10,6 @@ const smallScreen = 600;

 export default function widthUpdates({ store }) {
  when(store, getCharWidth, charWidth => {
-    window.messageIndent = 6 * charWidth;
    const scrollBarWidth = measureScrollBarWidth();
    let prevWrapWidth;

--- a/client/js/state/tests/reducer-messages.test.js
+++ b/client/js/state/tests/reducer-messages.test.js
@ -1,6 +1,7 @@
 import reducer, { broadcast, getMessageTab } from '../messages';
 import * as actions from '../actions';
 import appReducer from '../app';
+import { unix } from 'utils';

 describe('message reducer', () => {
  it('adds the message on ADD_MESSAGE', () => {
@ -98,7 +99,7 @@ describe('message reducer', () => {
  it('adds date markers when prepending messages', () => {
    let state = {
      srv: {
-        '#chan1': [{ id: 0, date: new Date(1999, 0, 1) }]
+        '#chan1': [{ id: 0, date: new Date(1990, 0, 3) }]
      }
    };

@ -108,8 +109,8 @@ describe('message reducer', () => {
      tab: '#chan1',
      prepend: true,
      messages: [
-        { id: 1, date: new Date(1990, 0, 2) },
-        { id: 2, date: new Date(1990, 0, 3) }
+        { id: 1, time: unix(new Date(1990, 0, 1)) },
+        { id: 2, time: unix(new Date(1990, 0, 2)) }
      ]
    });

@ -150,7 +151,7 @@ describe('message reducer', () => {
  it('adds date markers when adding messages', () => {
    let state = {
      srv: {
-        '#chan1': [{ id: 0, date: new Date(1999, 0, 1) }]
+        '#chan1': [{ id: 0, date: new Date(1990, 0, 1) }]
      }
    };

@ -159,9 +160,9 @@ describe('message reducer', () => {
      server: 'srv',
      tab: '#chan1',
      messages: [
-        { id: 1, date: new Date(1990, 0, 2) },
-        { id: 2, date: new Date(1990, 0, 3) },
-        { id: 3, date: new Date(1990, 0, 3) }
+        { id: 1, time: unix(new Date(1990, 0, 2)) },
+        { id: 2, time: unix(new Date(1990, 0, 3)) },
+        { id: 3, time: unix(new Date(1990, 0, 3)) }
      ]
    });

--- a/client/js/state/messages.js
+++ b/client/js/state/messages.js
@ -1,3 +1,4 @@
+import React from 'react';
 import { createSelector } from 'reselect';
 import has from 'lodash/has';
 import {
@ -6,8 +7,10 @@ import {
  linkify,
  timestamp,
  isChannel,
-  formatDate
+  formatDate,
+  unix
 } from 'utils';
+import stringToRGB from 'utils/color';
 import colorify from 'utils/colorify';
 import createReducer from 'utils/createReducer';
 import { getApp } from './app';
@ -45,8 +48,214 @@ function init(state, server, tab) {
  }
 }

+const collapsedEvents = ['join', 'part', 'quit'];
+
+function shouldCollapse(msg1, msg2) {
+  return (
+    msg1.events &&
+    msg2.events &&
+    collapsedEvents.indexOf(msg1.events[0].type) !== -1 &&
+    collapsedEvents.indexOf(msg2.events[0].type) !== -1
+  );
+}
+
+const eventVerbs = {
+  join: 'joined the channel',
+  part: 'left the channel',
+  quit: 'quit'
+};
+
+function renderNick(nick, type = '') {
+  const style = {
+    color: stringToRGB(nick),
+    fontWeight: 400
+  };
+
+  return (
+    <span className="message-sender" style={style} key={`${nick} ${type}`}>
+      {nick}
+    </span>
+  );
+}
+
+function renderMore(count, type) {
+  return (
+    <span
+      className="message-events-more"
+      key={`more ${type}`}
+    >{`${count} more`}</span>
+  );
+}
+
+function renderEvent(event, type, nicks) {
+  const ending = eventVerbs[type];
+
+  if (nicks.length === 1) {
+    event.push(renderNick(nicks[0], type));
+    event.push(` ${ending}`);
+  }
+  if (nicks.length === 2) {
+    event.push(renderNick(nicks[0], type));
+    event.push(' and ');
+    event.push(renderNick(nicks[1], type));
+    event.push(` ${ending}`);
+  }
+  if (nicks.length > 2) {
+    event.push(renderNick(nicks[0], type));
+    event.push(', ');
+    event.push(renderNick(nicks[1], type));
+    event.push(' and ');
+    event.push(renderMore(nicks.length - 2, type));
+    event.push(` ${ending}`);
+  }
+}
+
+function renderEvents(events) {
+  const first = events[0];
+  if (first.type === 'nick') {
+    const [oldNick, newNick] = first.params;
+
+    return [renderNick(oldNick), ' changed nick to ', renderNick(newNick)];
+  }
+  if (first.type === 'topic') {
+    const [nick, newTopic] = first.params;
+    const topic = colorify(linkify(newTopic));
+
+    if (!topic) {
+      return [renderNick(nick), ' cleared the topic'];
+    }
+
+    const result = [renderNick(nick), ' changed the topic to: '];
+
+    if (Array.isArray(topic)) {
+      result.push(...topic);
+    } else {
+      result.push(topic);
+    }
+
+    return result;
+  }
+
+  const byType = {};
+  for (let i = events.length - 1; i >= 0; i--) {
+    const event = events[i];
+    const [nick] = event.params;
+
+    if (!byType[event.type]) {
+      byType[event.type] = [nick];
+    } else if (byType[event.type].indexOf(nick) === -1) {
+      byType[event.type].push(nick);
+    }
+  }
+
+  const result = [];
+
+  if (byType.join) {
+    renderEvent(result, 'join', byType.join);
+  }
+
+  if (byType.part) {
+    if (result.length > 1) {
+      result[result.length - 1] += ', ';
+    }
+    renderEvent(result, 'part', byType.part);
+  }
+
+  if (byType.quit) {
+    if (result.length > 1) {
+      result[result.length - 1] += ', ';
+    }
+    renderEvent(result, 'quit', byType.quit);
+  }
+
+  return result;
+}
+
 let nextID = 0;

+function initMessage(
+  state,
+  message,
+  server,
+  tab,
+  wrapWidth,
+  charWidth,
+  windowWidth,
+  prepend
+) {
+  const messages = state[server][tab];
+
+  if (messages.length > 0 && !prepend) {
+    const lastMessage = messages[messages.length - 1];
+    if (shouldCollapse(lastMessage, message)) {
+      lastMessage.events.push(message.events[0]);
+      lastMessage.content = renderEvents(lastMessage.events);
+
+      [lastMessage.breakpoints, lastMessage.length] = findBreakpoints(
+        lastMessage.content
+      );
+      lastMessage.height = messageHeight(
+        lastMessage,
+        wrapWidth,
+        charWidth,
+        6 * charWidth,
+        windowWidth
+      );
+
+      return false;
+    }
+  }
+
+  if (message.time) {
+    message.date = new Date(message.time * 1000);
+  } else {
+    message.date = new Date();
+  }
+
+  message.time = timestamp(message.date);
+
+  if (!message.id) {
+    message.id = nextID;
+    nextID++;
+  }
+
+  if (tab.charAt(0) === '#') {
+    message.channel = true;
+  }
+
+  if (message.events) {
+    message.type = 'info';
+    message.content = renderEvents(message.events);
+  } else {
+    message.content = message.content || '';
+    // Collapse multiple adjacent spaces into a single one
+    message.content = message.content.replace(/\s\s+/g, ' ');
+
+    if (message.content.indexOf('\x01ACTION') === 0) {
+      const { from } = message;
+      message.from = null;
+      message.type = 'action';
+      message.content = from + message.content.slice(7, -1);
+    }
+  }
+
+  if (!message.events) {
+    message.content = colorify(linkify(message.content));
+  }
+
+  [message.breakpoints, message.length] = findBreakpoints(message.content);
+  message.height = messageHeight(
+    message,
+    wrapWidth,
+    charWidth,
+    6 * charWidth,
+    windowWidth
+  );
+  message.indent = 6 * charWidth;
+
+  return true;
+}
+
 function createDateMessage(date) {
  const message = {
    id: nextID,
@ -68,14 +277,34 @@ function isSameDay(d1, d2) {
  );
 }

-function reducerPrependMessages(messages, server, tab, state) {
+function reducerPrependMessages(
+  state,
+  messages,
+  server,
+  tab,
+  wrapWidth,
+  charWidth,
+  windowWidth
+) {
  const msgs = [];

  for (let i = 0; i < messages.length; i++) {
-    if (i > 0 && !isSameDay(messages[i - 1].date, messages[i].date)) {
-      msgs.push(createDateMessage(messages[i].date));
+    const message = messages[i];
+    initMessage(
+      state,
+      message,
+      server,
+      tab,
+      wrapWidth,
+      charWidth,
+      windowWidth,
+      true
+    );
+
+    if (i > 0 && !isSameDay(messages[i - 1].date, message.date)) {
+      msgs.push(createDateMessage(message.date));
    }
-    msgs.push(messages[i]);
+    msgs.push(message);
  }

  const m = state[server][tab];
@ -110,15 +339,41 @@ function reducerAddMessage(message, server, tab, state) {
 export default createReducer(
  {},
  {
-    [actions.ADD_MESSAGE](state, { server, tab, message }) {
+    [actions.ADD_MESSAGE](
+      state,
+      { server, tab, message, wrapWidth, charWidth, windowWidth }
+    ) {
      init(state, server, tab);
-      reducerAddMessage(message, server, tab, state);
+
+      const shouldAdd = initMessage(
+        state,
+        message,
+        server,
+        tab,
+        wrapWidth,
+        charWidth,
+        windowWidth
+      );
+      if (shouldAdd) {
+        reducerAddMessage(message, server, tab, state);
+      }
    },

-    [actions.ADD_MESSAGES](state, { server, tab, messages, prepend }) {
+    [actions.ADD_MESSAGES](
+      state,
+      { server, tab, messages, prepend, wrapWidth, charWidth, windowWidth }
+    ) {
      if (prepend) {
        init(state, server, tab);
-        reducerPrependMessages(messages, server, tab, state);
+        reducerPrependMessages(
+          state,
+          messages,
+          server,
+          tab,
+          wrapWidth,
+          charWidth,
+          windowWidth
+        );
      } else {
        if (!messages[0].tab) {
          init(state, server, tab);
@ -128,7 +383,19 @@ export default createReducer(
          if (message.tab) {
            init(state, server, message.tab);
          }
-          reducerAddMessage(message, server, message.tab || tab, state);
+
+          const shouldAdd = initMessage(
+            state,
+            message,
+            server,
+            message.tab || tab,
+            wrapWidth,
+            charWidth,
+            windowWidth
+          );
+          if (shouldAdd) {
+            reducerAddMessage(message, server, message.tab || tab, state);
+          }
        });
      }
    },
@ -184,53 +451,6 @@ export default createReducer(
  }
 );

-function initMessage(message, tab, state) {
-  if (message.time) {
-    message.date = new Date(message.time * 1000);
-  } else {
-    message.date = new Date();
-  }
-
-  message.time = timestamp(message.date);
-
-  if (!message.id) {
-    message.id = nextID;
-    nextID++;
-  }
-
-  if (tab.charAt(0) === '#') {
-    message.channel = true;
-  }
-
-  message.content = message.content || '';
-
-  // Collapse multiple adjacent spaces into a single one
-  message.content = message.content.replace(/\s\s+/g, ' ');
-
-  if (message.content.indexOf('\x01ACTION') === 0) {
-    const { from } = message;
-    message.from = null;
-    message.type = 'action';
-    message.content = from + message.content.slice(7, -1);
-  }
-
-  const { wrapWidth, charWidth, windowWidth } = getApp(state);
-
-  message.length = message.content.length;
-  message.breakpoints = findBreakpoints(message.content);
-  message.height = messageHeight(
-    message,
-    wrapWidth,
-    charWidth,
-    6 * charWidth,
-    windowWidth
-  );
-
-  message.content = colorify(linkify(message.content));
-
-  return message;
-}
-
 export function getMessageTab(server, to) {
  if (!to || to === '*' || (!isChannel(to) && to.indexOf('.') !== -1)) {
    return server;
@ -284,19 +504,19 @@ export function updateMessageHeight(wrapWidth, charWidth, windowWidth) {
 export function sendMessage(content, to, server) {
  return (dispatch, getState) => {
    const state = getState();
+    const { wrapWidth, charWidth, windowWidth } = getApp(state);

    dispatch({
      type: actions.ADD_MESSAGE,
      server,
      tab: to,
-      message: initMessage(
-        {
-          from: state.servers[server].nick,
-          content
-        },
-        to,
-        state
-      ),
+      message: {
+        from: state.servers[server].nick,
+        content
+      },
+      wrapWidth,
+      charWidth,
+      windowWidth,
      socket: {
        type: 'message',
        data: { content, to, server }
@ -308,13 +528,19 @@ export function sendMessage(content, to, server) {
 export function addMessage(message, server, to) {
  const tab = getMessageTab(server, to);

-  return (dispatch, getState) =>
+  return (dispatch, getState) => {
+    const { wrapWidth, charWidth, windowWidth } = getApp(getState());
+
    dispatch({
      type: actions.ADD_MESSAGE,
      server,
      tab,
-      message: initMessage(message, tab, getState())
+      message,
+      wrapWidth,
+      charWidth,
+      windowWidth
    });
+  };
 }

 export function addMessages(messages, server, to, prepend, next) {
@ -328,20 +554,57 @@ export function addMessages(messages, server, to, prepend, next) {
      messages[0].next = true;
    }

-    messages.forEach(message =>
-      initMessage(message, message.tab || tab, state)
-    );
+    const { wrapWidth, charWidth, windowWidth } = getApp(state);

    dispatch({
      type: actions.ADD_MESSAGES,
      server,
      tab,
      messages,
-      prepend
+      prepend,
+      wrapWidth,
+      charWidth,
+      windowWidth
    });
  };
 }

+export function addEvent(server, tab, type, ...params) {
+  return addMessage(
+    {
+      type: 'info',
+      events: [
+        {
+          type,
+          params,
+          time: unix()
+        }
+      ]
+    },
+    server,
+    tab
+  );
+}
+
+export function broadcastEvent(server, channels, type, ...params) {
+  const now = unix();
+
+  return addMessages(
+    channels.map(channel => ({
+      type: 'info',
+      tab: channel,
+      events: [
+        {
+          type,
+          params,
+          time: now
+        }
+      ]
+    })),
+    server
+  );
+}
+
 export function broadcast(message, server, channels) {
  return addMessages(
    channels.map(channel => ({
--- a/client/js/utils/index.js
+++ b/client/js/utils/index.js
@ -141,6 +141,13 @@ export function timestamp(date = new Date()) {
 const dateFmt = new Intl.DateTimeFormat(window.navigator.language);
 export const formatDate = dateFmt.format;

+export function unix(date) {
+  if (date) {
+    return Math.floor(date.getTime() / 1000);
+  }
+  return Math.floor(Date.now() / 1000);
+}
+
 const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');

--- a/client/js/utils/messageHeight.js
+++ b/client/js/utils/messageHeight.js
@ -2,20 +2,40 @@ const lineHeight = 24;
 const userListWidth = 200;
 const smallScreen = 600;

-export function findBreakpoints(text) {
-  const breakpoints = [];
-
+function findBreakpointsString(text, breakpoints, index) {
  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 });
+      breakpoints.push({ end: i + index, next: i + 1 + index });
+    } else if (i !== text.length - 1 && (char === '-' || char === '?')) {
+      breakpoints.push({ end: i + 1 + index, next: i + 1 + index });
+    }
+  }
+}
+
+export function findBreakpoints(text) {
+  const breakpoints = [];
+  let length = 0;
+
+  if (typeof text === 'string') {
+    findBreakpointsString(text, breakpoints, length);
+    length = text.length;
+  } else if (Array.isArray(text)) {
+    for (let i = 0; i < text.length; i++) {
+      const node = text[i];
+
+      if (typeof node === 'string') {
+        findBreakpointsString(node, breakpoints, length);
+        length += node.length;
+      } else {
+        findBreakpointsString(node.props.children, breakpoints, length);
+        length += node.props.children.length;
+      }
    }
  }

-  return breakpoints;
+  return [breakpoints, length];
 }

 export function messageHeight(