Add mention in channels (#128)

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>

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) {

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,

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,
   };
 }

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,
   };
 }