diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx index 30ae81ca..9504e184 100644 --- a/packages/react-chat/src/components/Channels/Channels.tsx +++ b/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) { - clearNotifications(channel.name); + if (notifications[channel.id] > 0) { + 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.name] + notifications[channel.id] > 0 && !channel.isMuted + ? notifications[channel.id] : undefined } onClick={() => { diff --git a/packages/react-chat/src/hooks/messenger/useMessages.ts b/packages/react-chat/src/hooks/messenger/useMessages.ts index dab8ff71..db0c9879 100644 --- a/packages/react-chat/src/hooks/messenger/useMessages.ts +++ b/packages/react-chat/src/hooks/messenger/useMessages.ts @@ -28,6 +28,7 @@ export function useMessages(chatId: string) { ), }; }); + console.log(`increase noti ${id}`); incNotification(id); } }, diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index 59cfc0fc..e579bd5f 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/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 () => { - // 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, { - 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(); + createCommunityMessenger(communityKey, addMessage).then((result) => { + setCommunity(result.community); + setMessenger(result.messenger); + }); }, []); useEffect(() => { diff --git a/packages/react-chat/src/hooks/messenger/useNotifications.ts b/packages/react-chat/src/hooks/messenger/useNotifications.ts index a0b393a7..8e9b6093 100644 --- a/packages/react-chat/src/hooks/messenger/useNotifications.ts +++ b/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, }; }); }, []); diff --git a/packages/react-chat/src/utils/createCommunityMessenger.ts b/packages/react-chat/src/utils/createCommunityMessenger.ts new file mode 100644 index 00000000..9161da1e --- /dev/null +++ b/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 }; +}