From 708791f986028794e242c85e481eca3c8679e530 Mon Sep 17 00:00:00 2001
From: Sarthak Sharma <7lovesharma7@gmail.com>
Date: Thu, 5 Nov 2020 03:04:01 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Feature:=20Give=20Tab=20Notifica?=
 =?UTF-8?q?tion=20on=20New=20Message=20(#9847)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Narender Singh <narender2031@gmail.com>
---
 app/javascript/chat/chat.jsx                     | 13 ++++++++++---
 .../utilities/connect/newMessageNotify.js        | 16 ++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/utilities/connect/newMessageNotify.js

diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx
index 64c88fbb9..d06a9862e 100644
--- a/app/javascript/chat/chat.jsx
+++ b/app/javascript/chat/chat.jsx
@@ -7,6 +7,7 @@
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 import { setupPusher } from '../utilities/connect';
+import notifyUser from '../utilities/connect/newMessageNotify';
 import debounceAction from '../utilities/debounceAction';
 import { addSnackbarItem } from '../Snackbar';
 import { processImageUpload } from '../article-form/actions';
@@ -452,13 +453,13 @@ export default class Chat extends Component {
       activeChannelId,
       scrolled,
       chatChannels,
+      currentUserId,
       unopenedChannelIds,
     } = this.state;
 
     const receivedChatChannelId = message.chat_channel_id;
     const messageList = document.getElementById('messagelist');
     let newMessages = [];
-
     const nearBottom =
       messageList.scrollTop + messageList.offsetHeight + 400 >
       messageList.scrollHeight;
@@ -466,7 +467,12 @@ export default class Chat extends Component {
     if (nearBottom) {
       scrollToBottom();
     }
-    // Remove reduntant messages
+
+    // If I'm not sender and tab is not active
+    if (message.user_id !== currentUserId && document.hidden) {
+      notifyUser();
+    }
+
     if (
       message.temp_id &&
       messages[receivedChatChannelId] &&
@@ -474,6 +480,7 @@ export default class Chat extends Component {
         (oldmessage) => oldmessage.temp_id === message.temp_id,
       ) > -1
     ) {
+      // Remove reduntant messages
       return;
     }
 
@@ -485,7 +492,7 @@ export default class Chat extends Component {
       }
     }
 
-    //Show alert if message received and you have scrolled up
+    // Show alert if message received and you have scrolled up
     const newShowAlert =
       activeChannelId === receivedChatChannelId
         ? { showAlert: !nearBottom }
diff --git a/app/javascript/utilities/connect/newMessageNotify.js b/app/javascript/utilities/connect/newMessageNotify.js
new file mode 100644
index 000000000..5fc555061
--- /dev/null
+++ b/app/javascript/utilities/connect/newMessageNotify.js
@@ -0,0 +1,16 @@
+export default function notifyUser() {
+  modifyTitle();
+}
+
+const modifyTitle = () => {
+  const oldTitle = document.title;
+  const titleAlert = setInterval(() => {
+    if (document.title === oldTitle) document.title = 'New Message 👋';
+    else document.title = oldTitle;
+  }, 2000);
+
+  setTimeout(() => {
+    clearInterval(titleAlert);
+    document.title = oldTitle;
+  }, 12000);
+};