From 2410f8df482882b8d02c014065e263a27eb95106 Mon Sep 17 00:00:00 2001
From: Sasha <oleksandr@status.im>
Date: Thu, 23 Feb 2023 13:04:38 +0100
Subject: [PATCH] create hooks file

---
 examples/web-chat/src/App.tsx  | 45 +++-------------------------------
 examples/web-chat/src/hooks.ts | 39 +++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 41 deletions(-)
 create mode 100644 examples/web-chat/src/hooks.ts

diff --git a/examples/web-chat/src/App.tsx b/examples/web-chat/src/App.tsx
index adcf4af..a7d6bfb 100644
--- a/examples/web-chat/src/App.tsx
+++ b/examples/web-chat/src/App.tsx
@@ -4,17 +4,12 @@ import React, { useEffect, useState } from "react";
 import "./App.css";
 import handleCommand from "./command";
 import Room from "./Room";
-import { generate } from "server-name-generator";
 import { Message } from "./Message";
-import { Decoder } from "@waku/core/lib/message/version_0";
-import { PageDirection, LightNode, StoreQueryOptions } from "@waku/interfaces";
+import { PageDirection, LightNode } from "@waku/interfaces";
 
-import {
-  useWaku,
-  useFilterMessages,
-  useStoreMessages,
-  useContentPair,
-} from "@waku/react";
+import { useWaku, useContentPair } from "@waku/react";
+
+import { useMessages, usePersistentNick } from "./hooks";
 
 export const ChatContentTopic = "/toy-chat/2/huilong/proto";
 const startTime = new Date();
@@ -22,38 +17,6 @@ const startTime = new Date();
 startTime.setTime(Date.now() - 1000 * 60 * 60 * 24 * 7);
 const endTime = new Date();
 
-const usePersistentNick = (): [
-  string,
-  React.Dispatch<React.SetStateAction<string>>
-] => {
-  const [nick, setNick] = useState<string>(() => {
-    const persistedNick = window.localStorage.getItem("nick");
-    return persistedNick !== null ? persistedNick : generate();
-  });
-  useEffect(() => {
-    localStorage.setItem("nick", nick);
-  }, [nick]);
-
-  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 { decoder } = useContentPair(ChatContentTopic);
diff --git a/examples/web-chat/src/hooks.ts b/examples/web-chat/src/hooks.ts
new file mode 100644
index 0000000..8b87393
--- /dev/null
+++ b/examples/web-chat/src/hooks.ts
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { generate } from "server-name-generator";
+import { Message } from "./Message";
+import { Decoder } from "@waku/core/lib/message/version_0";
+import { LightNode, StoreQueryOptions } from "@waku/interfaces";
+
+import { useFilterMessages, useStoreMessages } from "@waku/react";
+
+export const usePersistentNick = (): [
+  string,
+  React.Dispatch<React.SetStateAction<string>>
+] => {
+  const [nick, setNick] = useState<string>(() => {
+    const persistedNick = window.localStorage.getItem("nick");
+    return persistedNick !== null ? persistedNick : generate();
+  });
+  useEffect(() => {
+    localStorage.setItem("nick", nick);
+  }, [nick]);
+
+  return [nick, setNick];
+};
+
+type UseMessagesParams = {
+  node: undefined | LightNode;
+  decoder: Decoder;
+  options: StoreQueryOptions;
+};
+
+export 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]);
+};