Send Typing Start

theADAMJR · Aug 13, 2021 · 033cb45 · 033cb45
1 parent 0f3f44a
commit 033cb45
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/frontend/src/components/channel/message-box.tsx b/frontend/src/components/channel/message-box.tsx
@@ -16,7 +16,7 @@ const MessageBox: React.FunctionComponent<MessageBoxProps> = (props) => {
   const dispatch = useDispatch();
   const [content, setContent] = useState(props.content ?? '');
   const channel = useSelector((s: Store.AppStore) => s.ui.activeChannel)!;
-  const typing = useSelector(getTypersInChannel(channel.id));
+  const typers = useSelector(getTypersInChannel(channel.id));
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     handleEscape(event);
@@ -46,8 +46,17 @@ const MessageBox: React.FunctionComponent<MessageBoxProps> = (props) => {
 
   const user = (userId: string) => getUser(userId)(store.getState());
 
-  const typingUsers = () => typing.map(t =>
-    <span className="text-xs py-2">{user(t.userId)!.username} is typing</span>);
+  const typingMessage = () => {
+    const maxTypers = 3;
+    const typingUsers = typers.map(t => user(t.userId)!.username).join(', ');
+
+    if (!typers.length) return;
+
+    return (typers.length > maxTypers)
+      ? 'Many users are typing'
+      : `${typingUsers} is typing`
+  }
+
 
   return (
     <div className={`${props.editingMessageId ? 'mt-2' : 'px-4'}`}>
@@ -61,7 +70,7 @@ const MessageBox: React.FunctionComponent<MessageBoxProps> = (props) => {
         autoFocus />
       {(props.editingMessageId)
         ? <span className="text-xs py-2">escape to cancel • enter to save</span>
-        : <div className="w-full h-6">{typingUsers}</div>}
+        : <div className="w-full h-6">{typingMessage()}</div>}
     </div>
   );
 }

diff --git a/frontend/src/store/channels.ts b/frontend/src/store/channels.ts
@@ -35,8 +35,8 @@ export const getTypersInChannel = (channelId: string) => createSelector<any, any
 let lastTypedAt: Date;
 
 export const startTyping = (channelId: string) => (dispatch, getState) => {
-  const minsAgo = moment(lastTypedAt).diff(new Date(), 'minutes');
-  if (lastTypedAt && minsAgo < 5) return;
+  const secsAgo = moment(lastTypedAt).diff(new Date(), 'seconds');
+  if (lastTypedAt && secsAgo < 5) return;
 
   lastTypedAt = new Date();