Fix notifications and refactor useMessenger (#91)

packages/react-chat/src/components/Channels/Channels.tsx

@@ -23,8 +23,8 @@ export function Channels({
   useEffect(() => {
     const channel = channels.find((channel) => channel.id === activeChannelId);
     if (channel) {
-      if (notifications[channel.name] > 0) {
+      if (notifications[channel.id] > 0) {
-        clearNotifications(channel.name);
+        clearNotifications(channel.id);
       }
     }
   }, [notifications, activeChannelId]);
@@ -38,8 +38,8 @@ export function Channels({
           isActive={channel.id === activeChannelId}
           isMuted={channel.isMuted || false}
           notification={
-            notifications[channel.name] > 0 && !channel.isMuted
+            notifications[channel.id] > 0 && !channel.isMuted
-              ? notifications[channel.name]
+              ? notifications[channel.id]
               : undefined
           }
           onClick={() => {

packages/react-chat/src/hooks/messenger/useMessages.ts

@@ -28,6 +28,7 @@ export function useMessages(chatId: string) {
             ),
           };
         });
+        console.log(`increase noti ${id}`);
         incNotification(id);
       }
     },

packages/react-chat/src/hooks/messenger/useMessenger.ts

@@ -1,9 +1,8 @@
 // import { StoreCodec } from "js-waku";
-import { StoreCodec } from "js-waku";
 import { useCallback, useEffect, useState } from "react";
-import { Community, Identity, Messenger } from "status-communities/dist/cjs";
+import { Community, Messenger } from "status-communities/dist/cjs";
 
-import { loadIdentity, saveIdentity } from "../../utils";
+import { createCommunityMessenger } from "../../utils/createCommunityMessenger";
 
 import { useLoadPrevDay } from "./useLoadPrevDay";
 import { useMessages } from "./useMessages";
@@ -16,53 +15,10 @@ export function useMessenger(chatId: string, communityKey: string) {
   const { loadPrevDay, loadingMessages } = useLoadPrevDay(chatId, messenger);
 
   useEffect(() => {
-    const createMessenger = async () => {
+    createCommunityMessenger(communityKey, addMessage).then((result) => {
-      // Test password for now
+      setCommunity(result.community);
-      // Need design for password input
+      setMessenger(result.messenger);
-
+    });
-      let identity = await loadIdentity("test");
-      if (!identity) {
-        identity = Identity.generate();
-        await saveIdentity(identity, "test");
-      }
-      const messenger = await Messenger.create(identity, {
-        libp2p: {
-          config: {
-            pubsub: {
-              enabled: true,
-              emitSelf: true,
-            },
-          },
-        },
-      });
-      await new Promise((resolve) => {
-        messenger.waku.libp2p.peerStore.on(
-          "change:protocols",
-          ({ protocols }) => {
-            if (protocols.includes(StoreCodec)) {
-              resolve("");
-            }
-          }
-        );
-      });
-      const community = await Community.instantiateCommunity(
-        communityKey,
-        messenger.waku
-      );
-      setCommunity(community);
-      await Promise.all(
-        Array.from(community.chats.values()).map(async (chat) => {
-          await messenger.joinChat(chat);
-          messenger.addObserver(
-            (msg, date) => addMessage(msg, chat.id, date),
-            chat.id
-          );
-          clearNotifications(chat.id);
-        })
-      );
-      setMessenger(messenger);
-    };
-    createMessenger();
   }, []);
 
   useEffect(() => {

packages/react-chat/src/hooks/messenger/useNotifications.ts

@@ -8,7 +8,7 @@ export function useNotifications() {
     setNotifications((prevNotifications) => {
       return {
         ...prevNotifications,
-        [id]: prevNotifications[id] + 1,
+        [id]: (prevNotifications?.[id] ?? 0) + 1,
       };
     });
   }, []);

packages/react-chat/src/utils/createCommunityMessenger.ts

@@ -0,0 +1,52 @@
+import { StoreCodec } from "js-waku";
+import { Community, Identity, Messenger } from "status-communities/dist/cjs";
+import { ApplicationMetadataMessage } from "status-communities/dist/cjs";
+
+import { loadIdentity, saveIdentity } from "./";
+
+const WAKU_OPTIONS = {
+  libp2p: {
+    config: {
+      pubsub: {
+        enabled: true,
+        emitSelf: true,
+      },
+    },
+  },
+};
+
+export async function createCommunityMessenger(
+  communityKey: string,
+  addMessage: (msg: ApplicationMetadataMessage, id: string, date: Date) => void
+) {
+  // Test password for now
+  // Need design for password input
+  let identity = await loadIdentity("test");
+  if (!identity) {
+    identity = Identity.generate();
+    await saveIdentity(identity, "test");
+  }
+  const messenger = await Messenger.create(identity, WAKU_OPTIONS);
+  await new Promise((resolve) => {
+    messenger.waku.libp2p.peerStore.on("change:protocols", ({ protocols }) => {
+      if (protocols.includes(StoreCodec)) {
+        resolve("");
+      }
+    });
+  });
+  const community = await Community.instantiateCommunity(
+    communityKey,
+    messenger.waku
+  );
+  await Promise.all(
+    Array.from(community.chats.values()).map(async (chat) => {
+      await messenger.joinChat(chat);
+      messenger.addObserver(
+        (msg, date) => addMessage(msg, chat.id, date),
+        chat.id
+      );
+    })
+  );
+
+  return { messenger, community, identity };
+}