From a356f3b4213a4086fbb619fb4a50a136df3d7acd Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Mon, 15 Nov 2021 14:34:20 +0100
Subject: [PATCH] Add mention in channels (#128)

---
 .../src/components/Channels/Channel.tsx       |  5 +++--
 .../src/components/Channels/Channels.tsx      |  8 ++++++++
 .../src/contexts/messengerProvider.tsx        |  2 ++
 .../src/hooks/messenger/useMessages.ts        | 20 +++++++++++++++++--
 .../src/hooks/messenger/useMessenger.ts       | 14 +++++++++++--
 5 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx
index 2f2ee5fd..59443e5c 100644
--- a/packages/react-chat/src/components/Channels/Channel.tsx
+++ b/packages/react-chat/src/components/Channels/Channel.tsx
@@ -10,6 +10,7 @@ import { textMediumStyles } from "../Text";
 interface ChannelProps {
   channel: ChannelData;
   notification?: number;
+  mention?: number;
   isActive: boolean;
   isMuted: boolean;
   activeView?: boolean;
@@ -23,13 +24,13 @@ export function Channel({
   activeView,
   onClick,
   notification,
+  mention,
 }: ChannelProps) {
   const narrow = useNarrow();
   const className = useMemo(
     () => (narrow && !activeView ? "narrow" : activeView ? "active" : ""),
     [narrow]
   );
-  const mention = false;
   return (
     <ChannelWrapper
       className={
@@ -74,7 +75,7 @@ export function Channel({
         </ChannelTextInfo>
       </ChannelInfo>
       {notification && notification > 0 && !activeView && mention && (
-        <NotificationBagde>{notification}</NotificationBagde>
+        <NotificationBagde>{mention}</NotificationBagde>
       )}
       {isMuted && !notification && <MutedIcon />}
     </ChannelWrapper>
diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx
index d930fcfe..b03c554a 100644
--- a/packages/react-chat/src/components/Channels/Channels.tsx
+++ b/packages/react-chat/src/components/Channels/Channels.tsx
@@ -21,6 +21,8 @@ export function Channels({
 }: ChannelsProps) {
   const {
     clearNotifications,
+    clearMentions,
+    mentions,
     notifications,
     activeChannel,
     setActiveChannel,
@@ -32,6 +34,7 @@ export function Channels({
     if (channel) {
       if (notifications[channel.id] > 0) {
         clearNotifications(channel.id);
+        clearMentions(channel.id);
       }
     }
   }, [notifications, activeChannelId]);
@@ -49,6 +52,11 @@ export function Channels({
               ? notifications[channel.id]
               : undefined
           }
+          mention={
+            mentions[channel.id] > 0 && !channel.isMuted
+              ? mentions[channel.id]
+              : undefined
+          }
           onClick={() => {
             setActiveChannel(channel);
             if (onCommunityClick) {
diff --git a/packages/react-chat/src/contexts/messengerProvider.tsx b/packages/react-chat/src/contexts/messengerProvider.tsx
index 494e62e7..f86cdd7d 100644
--- a/packages/react-chat/src/contexts/messengerProvider.tsx
+++ b/packages/react-chat/src/contexts/messengerProvider.tsx
@@ -9,6 +9,8 @@ const MessengerContext = createContext<MessengerType>({
   sendMessage: async () => undefined,
   notifications: {},
   clearNotifications: () => undefined,
+  mentions: {},
+  clearMentions: () => undefined,
   loadPrevDay: async () => undefined,
   loadingMessages: false,
   communityData: undefined,
diff --git a/packages/react-chat/src/hooks/messenger/useMessages.ts b/packages/react-chat/src/hooks/messenger/useMessages.ts
index 4bf212e7..d1648578 100644
--- a/packages/react-chat/src/hooks/messenger/useMessages.ts
+++ b/packages/react-chat/src/hooks/messenger/useMessages.ts
@@ -2,20 +2,28 @@ import { useCallback, useMemo, useState } from "react";
 import {
   ApplicationMetadataMessage,
   Contacts,
+  Identity,
 } from "status-communities/dist/cjs";
+import { bufToHex } from "status-communities/dist/cjs/utils";
 
 import { ChatMessage } from "../../models/ChatMessage";
 import { binarySetInsert } from "../../utils";
 
 import { useNotifications } from "./useNotifications";
 
-export function useMessages(chatId: string, contacts?: Contacts) {
+export function useMessages(
+  chatId: string,
+  identity: Identity | undefined,
+  contacts?: Contacts
+) {
   const [messages, setMessages] = useState<{ [chatId: string]: ChatMessage[] }>(
     {}
   );
   const { notifications, incNotification, clearNotifications } =
     useNotifications();
 
+  const mentions = useNotifications();
+
   const addMessage = useCallback(
     (msg: ApplicationMetadataMessage, id: string, date: Date) => {
       const newMessage = ChatMessage.fromMetadataMessage(msg, date);
@@ -33,9 +41,15 @@ export function useMessages(chatId: string, contacts?: Contacts) {
           };
         });
         incNotification(id);
+        if (
+          identity &&
+          newMessage.content.includes(`@${bufToHex(identity.publicKey)}`)
+        ) {
+          mentions.incNotification(id);
+        }
       }
     },
-    [contacts]
+    [contacts, identity]
   );
 
   const activeMessages = useMemo(
@@ -48,5 +62,7 @@ export function useMessages(chatId: string, contacts?: Contacts) {
     addMessage,
     notifications,
     clearNotifications,
+    mentions: mentions.notifications,
+    clearMentions: mentions.clearNotifications,
   };
 }
diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts
index 65172d4f..0dbc70e2 100644
--- a/packages/react-chat/src/hooks/messenger/useMessenger.ts
+++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts
@@ -27,6 +27,8 @@ export type MessengerType = {
   ) => Promise<void>;
   notifications: { [chatId: string]: number };
   clearNotifications: (id: string) => void;
+  mentions: { [chatId: string]: number };
+  clearMentions: (id: string) => void;
   loadPrevDay: (id: string) => Promise<void>;
   loadingMessages: boolean;
   communityData: CommunityData | undefined;
@@ -79,8 +81,14 @@ export function useMessenger(
     });
   }, [internalContacts]);
 
-  const { addMessage, clearNotifications, notifications, messages } =
-    useMessages(chatId, contactsClass);
+  const {
+    addMessage,
+    clearNotifications,
+    notifications,
+    messages,
+    mentions,
+    clearMentions,
+  } = useMessages(chatId, identity, contactsClass);
   const [community, setCommunity] = useState<Community | undefined>(undefined);
   const { loadPrevDay, loadingMessages } = useLoadPrevDay(chatId, messenger);
 
@@ -180,5 +188,7 @@ export function useMessenger(
     channels,
     activeChannel,
     setActiveChannel,
+    mentions,
+    clearMentions,
   };
 }