From dba21d201c183d0b461297975bcd4a3990a43526 Mon Sep 17 00:00:00 2001
From: Dinesh <chdinesh1089@gmail.com>
Date: Thu, 7 Jan 2021 00:52:28 +0530
Subject: [PATCH] typing: Display several people are typing...

Displays "Several people are typing..." when more than 3 users
are typing to avoid typing notifications in streams being too noisy.

A side effect is it shows the same message in pms too.
---
 static/js/typing_events.js                | 15 +++++++++++++--
 static/templates/typing_notifications.hbs | 10 +++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/static/js/typing_events.js b/static/js/typing_events.js
index 6538527e9c..9fe771a3bc 100644
--- a/static/js/typing_events.js
+++ b/static/js/typing_events.js
@@ -19,6 +19,10 @@ import * as typing_data from "./typing_data";
 // and expire its typing status
 const TYPING_STARTED_EXPIRY_PERIOD = 15000; // 15s
 
+// If number of users typing exceed this,
+// we render "Several people are typing..."
+const MAX_USERS_TO_DISPLAY_NAME = 3;
+
 // Note!: There are also timing constants in typing_status.js
 // that make typing indicators work.
 
@@ -50,10 +54,17 @@ function get_users_typing_for_narrow() {
 export function render_notifications_for_narrow() {
     const user_ids = get_users_typing_for_narrow();
     const users_typing = user_ids.map((user_id) => people.get_by_user_id(user_id));
-    if (users_typing.length === 0) {
+    const num_of_users_typing = users_typing.length;
+
+    if (num_of_users_typing === 0) {
         $("#typing_notifications").hide();
     } else {
-        $("#typing_notifications").html(render_typing_notifications({users: users_typing}));
+        $("#typing_notifications").html(
+            render_typing_notifications({
+                users: users_typing,
+                several_users: num_of_users_typing >= MAX_USERS_TO_DISPLAY_NAME,
+            }),
+        );
         $("#typing_notifications").show();
     }
 }
diff --git a/static/templates/typing_notifications.hbs b/static/templates/typing_notifications.hbs
index 7b5958357e..6f4dd6faca 100644
--- a/static/templates/typing_notifications.hbs
+++ b/static/templates/typing_notifications.hbs
@@ -1,6 +1,10 @@
 {{! Typing notifications }}
 <ul id="typing_notification_list">
-    {{#each users}}
-    {{> typing_notification}}
-    {{/each}}
+    {{#if several_users}}
+        <li class="typing_notification">{{t "Several people are typing…" }}</li>
+    {{else}}
+        {{#each users}}
+        {{> typing_notification}}
+        {{/each}}
+    {{/if}}
 </ul>