flow: lots of UI, limiting

src/client/bar.jsx

@@ -2,47 +2,42 @@ import './bar.scss';
 
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 
 export default function Bar(props) {
   const {
+    active,
     branding,
     buttons,
-    isHorizontal,
+    className,
     onActive,
   } = props;
-  const [active, setActive] = useState(0);
-  useEffect(() => {
-    const clampedActive = Math.max(0, Math.min(buttons.length - 1, active));
-    if (active !== clampedActive) {
-      onActive(clampedActive, -1);
-    }
-    setActive(clampedActive);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [active, buttons.length]);
   return (
     <div
-      className={classnames(['bar', isHorizontal ? 'bar--horizontal' : 'bar--vertical'])}
+      className={classnames(['bar', className])}
     >
       <ul className="bar__buttons">
         {branding}
         {
-          buttons.map(({count, icon, label}, i) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <li className="bar__buttonItem" key={i}>
+          buttons.map(({
+            count,
+            icon,
+            label,
+          }, i) => (
+            <li
+              className="bar__buttonItem"
+              key={label}
+            >
               <button
                 className={classnames('bar__button', {active: i === active})}
-                onClick={() => {
-                  onActive(i, active);
-                  setActive(i);
-                }}
+                onClick={() => onActive(i, active)}
+                title={label}
                 type="button"
               >
                 <span
                   className="bar__buttonIcon"
                   role="img"
                   aria-label={label}
-                  title={label}
                 >
                   {icon}
                 </span>
@@ -57,17 +52,19 @@ export default function Bar(props) {
 }
 
 Bar.defaultProps = {
+  active: 0,
   branding: null,
-  isHorizontal: true,
+  className: '',
   onActive: () => {},
 };
 
 Bar.propTypes = {
+  active: PropTypes.number,
   branding: PropTypes.node,
   buttons: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     icon: PropTypes.string,
   })).isRequired,
-  isHorizontal: PropTypes.bool,
+  className: PropTypes.string,
   onActive: PropTypes.func,
 };

src/client/bar.scss

@@ -1,13 +1,7 @@
 @import '~/client/scss/colors.scss';
 
-.bar--horizontal {
-  height: 4em;
-  width: 100%;
-}
-
-.bar--vertical {
-  height: 100%;
-  width: 4em;
+.bar {
+  height: 3em;
 }
 
 .bar__items {
@@ -55,10 +49,10 @@
 .bar__button {
   background-color: #303030;
   border: none;
-  height: 3em;
+  height: 2em;
   position: relative;
   transition: 0.1s background-color;
-  width: 3em;
+  width: 2em;
   &:hover {
     background-color: #2a2a2a;
   }
@@ -82,7 +76,7 @@
 
 .bar__buttonIcon {
   display: flow-root;
-  font-size: 1.5em;
+  font-size: 1em;
 }
 
 .bar__buttonText {

src/client/channel.scss

@@ -25,6 +25,7 @@
 
 .channel {
   position: relative;
+  user-select: none;
 }
 
 .channel__link {

src/client/chat--center.jsx

@@ -1,14 +1,105 @@
 import './chat--center.scss';
 
 import React from 'react';
+import {useDispatch, useSelector} from 'react-redux';
 
+import {
+  leftActiveIndexSelector,
+  rightActiveIndexSelector,
+  setLeftActiveIndex,
+  setRightActiveIndex,
+  toggleLeftIsOpen,
+  toggleRightIsOpen,
+} from '~/common/state/app';
+import {
+  channelUsersSelector,
+} from '~/common/state/chat';
+import {
+  blockedSelector,
+  idSelector,
+  pendingFriendshipSelector,
+  unreadChannelSelector,
+  unreadUserSelector,
+} from '~/common/state/user';
+
+import useChannel from '~/client/hooks/useChannel';
+
+import Bar from './bar';
 import ChatMessages from './chat--messages';
 
 export default function ChatCenter() {
+  const dispatch = useDispatch();
+  const leftActiveIndex = useSelector(leftActiveIndexSelector);
+  const rightActiveIndex = useSelector(rightActiveIndexSelector);
+  const blockedIds = useSelector(blockedSelector);
+  const channel = useChannel();
+  const channelUsers = useSelector((state) => channelUsersSelector(state, channel));
+  const id = useSelector(idSelector);
+  const pendingFriendship = useSelector(pendingFriendshipSelector);
+  const unreadChannel = useSelector(unreadChannelSelector);
+  const unreadUser = useSelector(unreadUserSelector);
+  const leftButtons = [
+    {
+      count: unreadChannel,
+      icon: '💬',
+      label: 'Chat',
+    },
+    {
+      count: unreadUser + pendingFriendship.filter(({addeeId}) => addeeId === id).length,
+      icon: '😁',
+      label: 'Friends',
+    },
+  ];
+  const rightButtons = []
+    .concat(channelUsers.length > 0 ? [{icon: '🙃', label: 'Present'}] : [])
+    .concat(blockedIds.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []);
   return (
     <div
       className="center flexed"
     >
+      <div className="center__header">
+        <Bar
+          active={leftActiveIndex}
+          branding={(
+            <li className="bar__brandItem">
+              <div>
+                reddi
+                <span className="muted">?</span>
+              </div>
+              {' '}
+              <div>
+                chat
+                <span className="muted">!</span>
+              </div>
+            </li>
+          )}
+          buttons={leftButtons}
+          className="bar--left"
+          isHorizontal
+          onActive={(active, i) => {
+            if (i === active) {
+              dispatch(toggleLeftIsOpen());
+            }
+            dispatch(setLeftActiveIndex(active));
+          }}
+        />
+        <div className="center__headerChannel">
+          <span className="tiny">chatting in</span>
+          <span>/r/reddichat</span>
+        </div>
+        <Bar
+          active={rightActiveIndex}
+          buttons={rightButtons}
+          className="bar--right"
+          isHorizontal
+          onActive={(active, i) => {
+            if (i === active) {
+              dispatch(toggleRightIsOpen());
+            }
+            dispatch(setRightActiveIndex(active));
+          }}
+        />
+      </div>
       <ChatMessages />
     </div>
   );

src/client/chat--center.scss

@@ -9,3 +9,25 @@
     width: auto;
   }
 }
+
+.center__header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 3em;
+  position: relative;
+}
+
+.center__headerChannel {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--thick-title-font-family);
+  font-weight: bold;
+  user-select: none;
+  .tiny {
+    font-family: var(--title-font-family);
+    font-size: 0.7em;
+    align-self: center;
+  }
+}

src/client/chat--left.jsx

@@ -1,70 +1,27 @@
 import './chat--left.scss';
 
 import classnames from 'classnames';
-import React, {useState} from 'react';
+import React from 'react';
 import {useSelector} from 'react-redux';
 
 import {
-  idSelector,
-  pendingFriendshipSelector,
-  unreadChannelSelector,
-  unreadUserSelector,
-} from '~/common/state/user';
+  leftActiveIndexSelector,
+  leftIsOpenSelector,
+} from '~/common/state/app';
 
 import useBreakpoints from './hooks/useBreakpoints';
-import Bar from './bar';
 import ChatLeftFriends from './chat--leftFriends';
 import ChatLeftRooms from './chat--leftRooms';
 
 export default function ChatLeft() {
-  const {desktop, tablet} = useBreakpoints();
-  const [active, setActive] = useState(0);
-  const [isOpen, setIsOpen] = useState(true);
-  const toggleOpen = () => setIsOpen(!isOpen);
-  const id = useSelector(idSelector);
-  const pendingFriendship = useSelector(pendingFriendshipSelector);
-  const showsAsOpen = isOpen || desktop || !tablet;
-  const unreadChannel = useSelector(unreadChannelSelector);
-  const unreadUser = useSelector(unreadUserSelector);
-  const buttons = [
-    {
-      count: unreadChannel,
-      icon: '💬',
-      label: 'Chat',
-    },
-    {
-      count: unreadUser + pendingFriendship.filter(({addeeId}) => addeeId === id).length,
-      icon: '😁',
-      label: 'Friends',
-    },
-  ];
+  const active = useSelector(leftActiveIndexSelector);
+  const isOpen = useSelector(leftIsOpenSelector);
+  const {tablet} = useBreakpoints();
+  const showsAsOpen = isOpen || !tablet;
   return (
     <div
       className={classnames('left', 'flexed', showsAsOpen ? 'open' : 'closed')}
     >
-      <Bar
-        branding={(
-          <li className="bar__brandItem">
-            <div>
-              reddi
-              <span className="muted">?</span>
-            </div>
-            {' '}
-            <div>
-              chat
-              <span className="muted">!</span>
-            </div>
-          </li>
-        )}
-        buttons={buttons}
-        isHorizontal={showsAsOpen}
-        onActive={(active, i) => {
-          if (i === active || !isOpen) {
-            toggleOpen();
-          }
-          setActive(active);
-        }}
-      />
       {0 === active && <ChatLeftRooms />}
       {1 === active && <ChatLeftFriends />}
     </div>

src/client/chat--left.scss

@@ -3,6 +3,7 @@
 
 .left {
   background-color: #373737;
+  flex-shrink: 0;
   transform: translateX(-100%);
   transition: 0.2s width;
   @include breakpoint(tablet) {

src/client/chat--message.scss

@@ -47,7 +47,7 @@ header {
 }
 
 .chat--messageOwner {
-  color: #d68030aa;
+  color: lighten(#d68030aa, 15%);
   font-family: Caladea, 'Times New Roman', Times, serif;
   font-weight: bold;
   margin-bottom: 0.25rem;

src/client/chat--messages.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  height: 100%;
+  height: calc(100% - 3em);
 }
 
 .chat--messagesSmoosh {

src/client/chat--right.jsx

@@ -1,28 +1,30 @@
 import './chat--right.scss';
 
 import classnames from 'classnames';
-import React, {useState} from 'react';
+import React from 'react';
 import {useSelector} from 'react-redux';
 
+import {
+  rightActiveIndexSelector,
+  rightIsOpenSelector,
+} from '~/common/state/app';
 import {channelUsersSelector} from '~/common/state/chat';
 import {blockedSelector} from '~/common/state/user';
 
-import useBreakpoints from '~/client/hooks/useBreakpoints';
+import useBreakpoints from './hooks/useBreakpoints';
 import useChannel from '~/client/hooks/useChannel';
 
-import Bar from './bar';
 import ChatRightBlocked from './chat--rightBlocked';
 import ChatRightUsers from './chat--rightUsers';
 
 export default function ChatRight() {
-  const {desktop, tablet} = useBreakpoints();
-  const [active, setActive] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
+  const active = useSelector(rightActiveIndexSelector);
   const channel = useChannel();
   const blockedIds = useSelector(blockedSelector);
   const channelUsers = useSelector((state) => channelUsersSelector(state, channel));
-  const toggleOpen = () => setIsOpen(!isOpen);
-  const showsAsOpen = isOpen || desktop || !tablet;
+  const isOpen = useSelector(rightIsOpenSelector);
+  const {tablet} = useBreakpoints();
+  const showsAsOpen = isOpen || !tablet;
   const buttons = []
     .concat(channelUsers.length > 0 ? [{icon: '🙃', label: 'Present'}] : [])
     .concat(blockedIds.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []);
@@ -33,16 +35,6 @@ export default function ChatRight() {
     <div
       className={classnames('right', 'flexed', showsAsOpen ? 'open' : 'closed')}
     >
-      <Bar
-        buttons={buttons}
-        isHorizontal={showsAsOpen}
-        onActive={(active, i) => {
-          if (i === active || !isOpen) {
-            toggleOpen();
-          }
-          setActive(active);
-        }}
-      />
       {0 === active && channelUsers.length > 0 && <ChatRightUsers />}
       {1 === active && blockedIds.length > 0 && <ChatRightBlocked ids={blockedIds} />}
     </div>

src/client/chat--right.scss

@@ -2,6 +2,7 @@
 
 .right {
   background-color: #373737;
+  flex-shrink: 0;
   right: 0;
   transform: translateX(100%);
   transition: 0.2s width;

src/client/chat--submitMessage.jsx

@@ -20,15 +20,19 @@ export default function ChatSubmitMessage() {
       <form
         onSubmit={(event) => {
           event.preventDefault();
-          const message = text.slice(0, 1000).trim();
-          if (message) {
+          let caret = 0;
+          const message = text.trim();
+          let chunk;
+          // eslint-disable-next-line no-cond-assign
+          while (chunk = message.substr(caret, 512)) {
             dispatch(submitMessage({
               channel,
-              message,
+              message: chunk,
               owner: '/r/anonymous' === channel ? 0 : user.id,
               timestamp: Date.now(),
               uuid: uuidv4(),
             }));
+            caret += 512;
           }
           setText('');
         }}
@@ -38,7 +42,6 @@ export default function ChatSubmitMessage() {
           className="chat--messagesTextarea"
           name="message"
           type="textarea"
-          maxLength="1000"
           onChange={(event) => {
             setText(event.target.value);
           }}

src/client/chat.scss

@@ -13,7 +13,7 @@
 .flexed {
   position: absolute;
   height: 100%;
-  width: 4em;
+  width: 0;
   overflow: hidden;
   &:not(.center) {
     max-width: calc(100% - 2em);

src/client/store/effects.js

@@ -1,3 +1,4 @@
+import RateLimiterMemory from 'rate-limiter-flexible/lib/RateLimiterMemory';
 import {v4 as uuidv4} from 'uuid';
 
 import AddFavorite from '../../common/packets/add-favorite.packet';
@@ -43,6 +44,9 @@ import {
 
 import {socket} from '~/client/hooks/useSocket';
 
+const characterLimiter = new RateLimiterMemory({points: 2048, duration: 2});
+const messageLimiter = new RateLimiterMemory({points: 10, duration: 15});
+
 const effects = {
   [addFriendship]: ({dispatch}, {payload: {addeeId, adderId}}) => {
     dispatch(fetchUsernames([addeeId, adderId]));
@@ -99,22 +103,28 @@ const effects = {
     const {channel} = payload;
     socket.send(new Leave(payload), () => dispatch(leave({channel})));
   },
-  [submitMessage]: ({dispatch}, {payload}) => {
+  [submitMessage]: async ({dispatch}, {payload}) => {
     dispatch(addMessage(payload));
-    socket.send(new Message(payload), (error, result) => {
-      if (error) {
-        switch (error.code) {
-          case 429: {
+    const reject = (ttr) => {
       dispatch(rejectMessage(payload.uuid));
       dispatch(addMessage({
         ...payload,
         message: [
-                'You are sending too many messages.',
-                `Try again in ${error.ttr} second${1 === error.ttr ? '' : 's'}.`,
+          'You are sending too much.',
+          `Try again in ${ttr} second${1 === ttr ? '' : 's'}.`,
         ].join(' '),
         owner: -1,
         uuid: uuidv4(),
       }));
+    };
+    try {
+      await characterLimiter.consume('', payload.message.length);
+      await messageLimiter.consume('');
+      socket.send(new Message(payload), (error, result) => {
+        if (error) {
+          switch (error.code) {
+            case 429: {
+              reject(error.ttr);
               break;
             }
             default:
@@ -124,6 +134,10 @@ const effects = {
         const [timestamp, current] = result;
         dispatch(confirmMessage({current, previous: payload.uuid, timestamp}));
       });
+    }
+    catch (error) {
+      reject(Math.round(Math.max(0, error.msBeforeNext) / 1000) || 1);
+    }
   },
   [submitRemoveFavorite]: ({dispatch}, {payload}) => {
     dispatch(removeFromFavorites(payload));

src/client/store/index.js

@@ -2,8 +2,10 @@ import merge from 'deepmerge';
 import {combineReducers} from 'redux';
 import {connectRouter, routerMiddleware} from 'connected-react-router';
 
+import app from '~/common/state/app';
 import chat from '~/common/state/chat';
 import createHistory from '~/common/state/history';
+import {storageSubscription} from '~/common/state/storage';
 import user from '~/common/state/user';
 import usernames from '~/common/state/usernames';
 import createCommonStore from '~/common/store';
@@ -13,13 +15,14 @@ import {middleware as effectsMiddleware} from './effects';
 export default function createStore(options = {}) {
   const {history} = options;
   const reducer = combineReducers({
+    app,
     chat,
     history: createHistory(history),
     router: connectRouter(history),
     user,
     usernames,
   });
-  return createCommonStore(
+  const store = createCommonStore(
     merge(
       options,
       {
@@ -31,4 +34,6 @@ export default function createStore(options = {}) {
       },
     ),
   );
+  store.subscribe(storageSubscription(store));
+  return store;
 }

src/common/state/app.js

@@ -0,0 +1,61 @@
+import {createSlice, createSelector} from '@reduxjs/toolkit';
+
+import storage from './storage';
+
+export const appSelector = (state) => state.app;
+
+export const leftActiveIndexSelector = createSelector(
+  appSelector,
+  (app) => app.leftActiveIndex,
+);
+
+export const rightActiveIndexSelector = createSelector(
+  appSelector,
+  (app) => app.rightActiveIndex,
+);
+
+export const leftIsOpenSelector = createSelector(
+  appSelector,
+  (app) => app.leftIsOpen,
+);
+
+export const rightIsOpenSelector = createSelector(
+  appSelector,
+  (app) => app.rightIsOpen,
+);
+
+const slice = createSlice({
+  name: 'app',
+  initialState: storage(appSelector) || {
+    leftActiveIndex: 0,
+    leftIsOpen: true,
+    rightActiveIndex: 0,
+    rightIsOpen: true,
+  },
+  /* eslint-disable no-param-reassign */
+  extraReducers: {},
+  reducers: {
+    setLeftActiveIndex: (state, {payload: activeItem}) => {
+      state.leftActiveIndex = activeItem;
+    },
+    setRightActiveIndex: (state, {payload: activeItem}) => {
+      state.rightActiveIndex = activeItem;
+    },
+    toggleLeftIsOpen: (state) => {
+      state.leftIsOpen = !state.leftIsOpen;
+    },
+    toggleRightIsOpen: (state) => {
+      state.rightIsOpen = !state.rightIsOpen;
+    },
+  },
+  /* eslint-enable no-param-reassign */
+});
+
+export const {
+  setLeftActiveIndex,
+  setRightActiveIndex,
+  toggleLeftIsOpen,
+  toggleRightIsOpen,
+} = slice.actions;
+
+export default slice.reducer;

src/common/state/storage.js

@@ -0,0 +1,13 @@
+import throttle from 'lodash.throttle';
+
+export const storageSubscription = (store) => (
+  throttle(() => localStorage.setItem('redux-state', JSON.stringify(store.getState())), 1000)
+);
+
+export default (selector) => {
+  const state = localStorage.getItem('redux-state');
+  if (!state) {
+    return undefined;
+  }
+  return selector(JSON.parse(state));
+};

src/server/http.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import {createReadStream} from 'fs';
 import http, {ServerResponse} from 'http';
-import {join, resolve} from 'path';
+import {join} from 'path';
 
 import concat from 'concat-stream-p';
 import express from 'express';

src/server/packet/message.js

@@ -3,19 +3,23 @@ import {v4 as uuidv4} from 'uuid';
 import {parseChannel, validateChannel} from '~/common/channel';
 import Message from '~/common/packets/message.packet';
 
+import createLimiter from '~/server/limiter';
 import {allModels} from '~/server/models/registrar';
 
 import ValidationError from './validation-error';
 
+const characterLimiter = createLimiter({keyPrefix: 'characterLimiter', points: 2048, duration: 2});
+
 export default {
   Packet: Message,
   limiter: {points: 10, duration: 15},
-  validator: async ({data: {channel, message}}) => {
+  validator: async ({data: {channel, message}}, socket) => {
+    await characterLimiter.consume(socket.id, message.length);
     if (!validateChannel(channel)) {
       throw new ValidationError({code: 400, reason: 'Malformed channel'});
     }
-    if (message.length > 1024) {
-      throw new ValidationError({code: 400, reason: 'Your message was a bit too long'});
+    if (message.length > 512) {
+      throw new ValidationError({code: 400, reason: 'Message larger than 512 bytes'});
     }
   },
   responder: async ({data}, socket) => {

src/server/packet/unblock.js

@@ -18,7 +18,8 @@ export default {
       throw new ValidationError({code: 400, reason: "Wasn't blocking."});
     }
   },
-  responder: async ({data: blocked}, socket) => {
+  responder: async (packet, socket) => {
+    const {data: blocked} = packet;
     const {req} = socket;
     const {Block: BlockModel} = allModels();
     await BlockModel.destroy({