From 7b3661b011ae051a604cd1dc1ecff75f5aa727c5 Mon Sep 17 00:00:00 2001
From: Sasha <oleksandr@status.im>
Date: Thu, 23 Feb 2023 12:00:20 +0100
Subject: [PATCH] create useMessages hook

---
 examples/web-chat/src/App.tsx    | 45 ++++++++++++++++++++------------
 examples/web-chat/src/Message.ts |  4 +--
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/examples/web-chat/src/App.tsx b/examples/web-chat/src/App.tsx
index bec82f5..adcf4af 100644
--- a/examples/web-chat/src/App.tsx
+++ b/examples/web-chat/src/App.tsx
@@ -6,15 +6,17 @@ import handleCommand from "./command";
 import Room from "./Room";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
-import { LightNode } from "@waku/interfaces";
 import { Decoder } from "@waku/core/lib/message/version_0";
-import { PageDirection } from "@waku/interfaces";
+import { PageDirection, LightNode, StoreQueryOptions } from "@waku/interfaces";
 
-import { useWaku, useFilterMessages, useStoreMessages } from "@waku/react";
+import {
+  useWaku,
+  useFilterMessages,
+  useStoreMessages,
+  useContentPair,
+} from "@waku/react";
 
 export const ChatContentTopic = "/toy-chat/2/huilong/proto";
-const ChatDecoder = new Decoder(ChatContentTopic);
-
 const startTime = new Date();
 // Only retrieve a week of history
 startTime.setTime(Date.now() - 1000 * 60 * 60 * 24 * 7);
@@ -35,18 +37,29 @@ const usePersistentNick = (): [
   return [nick, setNick];
 };
 
+type UseMessagesParams = {
+  node: undefined | LightNode;
+  decoder: Decoder;
+  options: StoreQueryOptions;
+};
+
+const useMessages = (params: UseMessagesParams): Message[] => {
+  const { messages: newMessages } = useFilterMessages(params);
+  const { messages: storedMessages } = useStoreMessages(params);
+
+  return React.useMemo((): Message[] => {
+    return [...storedMessages, ...newMessages]
+      .map(Message.fromWakuMessage)
+      .filter((v): v is Message => !!v);
+  }, [storedMessages, newMessages]);
+};
+
 export default function App() {
   const { node } = useWaku<LightNode>();
-
-  const [nick, setNick] = usePersistentNick();
-
-  const { messages } = useFilterMessages({
+  const { decoder } = useContentPair(ChatContentTopic);
+  const messages = useMessages({
     node,
-    decoder: ChatDecoder,
-  });
-  const { messages: storeMessages } = useStoreMessages({
-    node,
-    decoder: ChatDecoder,
+    decoder,
     options: {
       pageSize: 5,
       pageDirection: PageDirection.FORWARD,
@@ -57,7 +70,7 @@ export default function App() {
     },
   });
 
-  console.log(messages, storeMessages);
+  const [nick, setNick] = usePersistentNick();
 
   return (
     <div
@@ -66,7 +79,7 @@ export default function App() {
     >
       <Room
         nick={nick}
-        messages={[]}
+        messages={messages}
         commandHandler={(input: string) => {
           handleCommand(input, node, setNick).then(({ command, response }) => {
             const commandMessages = response.map((msg) => {
diff --git a/examples/web-chat/src/Message.ts b/examples/web-chat/src/Message.ts
index ef22844..11c5dab 100644
--- a/examples/web-chat/src/Message.ts
+++ b/examples/web-chat/src/Message.ts
@@ -1,4 +1,4 @@
-import { DecodedMessage } from "@waku/core/lib/message/version_0";
+import { IDecodedMessage } from "@waku/interfaces";
 import { ChatMessage } from "./chat_message";
 
 export class Message {
@@ -11,7 +11,7 @@ export class Message {
     this.sentTimestamp = sentTimestamp;
   }
 
-  static fromWakuMessage(wakuMsg: DecodedMessage): Message | undefined {
+  static fromWakuMessage(wakuMsg: IDecodedMessage): Message | undefined {
     if (wakuMsg.payload) {
       try {
         const chatMsg = ChatMessage.decode(wakuMsg.payload);