From 4be2f0f4b27aa0958c74a03858cb95fb413e96a9 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 25 Jul 2020 08:18:21 -0500
Subject: [PATCH] feat: undelivered UI

---
 src/client/chat--message.jsx       | 19 +++++++++++++++++--
 src/client/chat--message.scss      |  4 ++++
 src/client/chat--submitMessage.jsx |  1 +
 src/common/state/chat.js           |  7 ++++++-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/client/chat--message.jsx b/src/client/chat--message.jsx
index 320c223..6e2d39c 100644
--- a/src/client/chat--message.jsx
+++ b/src/client/chat--message.jsx
@@ -2,7 +2,7 @@ import './chat--message.scss';
 
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import ReactMarkdown from 'react-markdown';
 import {useSelector} from 'react-redux';
 
@@ -12,12 +12,18 @@ export default function ChatMessage(props) {
   const {
     message: {
       owner,
+      pending,
       message,
       timestamp,
       rejected,
     },
     isShort,
   } = props;
+  const [undelivered, setUndelivered] = useState(false);
+  useEffect(() => {
+    const handle = setTimeout(() => pending && setUndelivered(true), 500);
+    return () => clearTimeout(handle);
+  });
   const username = useSelector((state) => usernameSelector(state, owner));
   const dtf = new Intl.DateTimeFormat(undefined, {
     hour: '2-digit',
@@ -34,7 +40,15 @@ export default function ChatMessage(props) {
   );
   return (
     <div
-      className={classnames('chat--message', {rejected, short: isShort, system: -1 === owner})}
+      className={classnames(
+        'chat--message',
+        {
+          rejected,
+          short: isShort,
+          system: -1 === owner,
+          undelivered,
+        },
+      )}
     >
       {
         !isShort && (
@@ -58,6 +72,7 @@ ChatMessage.propTypes = {
   isShort: PropTypes.bool.isRequired,
   message: PropTypes.shape({
     message: PropTypes.string,
+    pending: PropTypes.bool,
     rejected: PropTypes.bool,
     timestamp: PropTypes.number,
     owner: PropTypes.number,
diff --git a/src/client/chat--message.scss b/src/client/chat--message.scss
index b828c26..9dd9aa4 100644
--- a/src/client/chat--message.scss
+++ b/src/client/chat--message.scss
@@ -3,12 +3,16 @@
 .chat--message {
   margin-top: 0.75rem;
   padding: 0.25rem 1rem;
+  transition: opacity 0.5s;
   &.rejected {
     background-color: rgba(200, 0, 0, 0.2);
   }
   &.system {
     background-color: rgba(200, 0, 0, 0.2);
   }
+  &.undelivered {
+    opacity: 0.3;
+  }
 }
 
 .chat--message, .chat--message * {
diff --git a/src/client/chat--submitMessage.jsx b/src/client/chat--submitMessage.jsx
index 019fe53..b845722 100644
--- a/src/client/chat--submitMessage.jsx
+++ b/src/client/chat--submitMessage.jsx
@@ -29,6 +29,7 @@ export default function ChatSubmitMessage() {
               channel,
               message: chunk,
               owner: '/r/anonymous' === channel ? 0 : user.id,
+              pending: true,
               timestamp: Date.now(),
               uuid: uuidv4(),
             }));
diff --git a/src/common/state/chat.js b/src/common/state/chat.js
index 7f22655..2844bfb 100644
--- a/src/common/state/chat.js
+++ b/src/common/state/chat.js
@@ -42,7 +42,12 @@ const slice = createSlice({
       channels[channel].messages.push(uuid);
     },
     confirmMessage: ({channels, messages}, {payload: {previous, current, timestamp}}) => {
-      messages[current] = {...messages[previous], timestamp, uuid: current};
+      const {pending, ...previousMessage} = messages[previous];
+      messages[current] = {
+        ...previousMessage,
+        timestamp,
+        uuid: current,
+      };
       delete messages[previous];
       const {[messages[current].channel]: channel} = channels;
       const index = channel.messages.findIndex((uuid) => uuid === previous);