Fix channel messages (#32)

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

@@ -47,7 +47,7 @@ export function Channels({
             isActive={channel.id === activeChannelId}
             isMuted={channel.isMuted || false}
             notification={
-              notifications[channel.name] > 0
+              notifications[channel.name] > 0 && !channel.isMuted
                 ? notifications[channel.name]
                 : undefined
             }

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -24,7 +24,7 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
     <MessagesWrapper ref={ref}>
       {messages.map((message, idx) => {
         return (
-          <MessageOuterWrapper key={idx}>
+          <MessageOuterWrapper key={message.date.getTime()}>
             {(idx === 0 ||
               messages[idx - 1].date.getDay() !=
                 messages[idx].date.getDay()) && (

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

@@ -12,6 +12,7 @@ import { ChatMessage } from "../models/ChatMessage";
 
 export function useMessenger(chatId: string, chatIdList: string[]) {
   const [messenger, setMessenger] = useState<Messenger | undefined>(undefined);
+  const [activeMessages, setActiveMessages] = useState<ChatMessage[]>([]);
   const [messages, setMessages] = useState<{ [chatId: string]: ChatMessage[] }>(
     {}
   );
@@ -153,9 +154,13 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
     [chatId, messenger]
   );
 
+  useEffect(() => {
+    setActiveMessages(messages?.[chatId] ?? []);
+  }, [messages, chatId]);
+
   return {
     messenger,
-    messages: messages?.[chatId] ?? [],
+    messages: activeMessages,
     sendMessage,
     notifications,
     clearNotifications,