Merge pull request #258 from waku-org/chore/refactor

chore(web-chat): cleanup refactor

examples/web-chat/src/ChatList.tsx

@@ -1,11 +1,8 @@
 import { useEffect, useRef } from "react";
 import { Message } from "./Message";
+import type { ChatListProps } from "./types";
 
-interface Props {
-  messages: Message[];
-}
-
-export default function ChatList(props: Props) {
+export default function ChatList(props: ChatListProps) {
   const renderedMessages = props.messages.map((message) => (
     <div
       key={

examples/web-chat/src/MessageInput.tsx

@@ -1,13 +1,9 @@
 import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
 import { useWaku } from "@waku/react";
 import { LightNode } from "@waku/interfaces";
+import { MessageInputProps } from "./types";
 
-interface Props {
-  hasLightPushPeers: boolean;
-  sendMessage: ((msg: string) => Promise<void>) | undefined;
-}
-
-export default function MessageInput(props: Props) {
+export default function MessageInput(props: MessageInputProps) {
   const { hasLightPushPeers } = props;
   const { node } = useWaku<LightNode>();
 

examples/web-chat/src/Room.tsx

@@ -2,17 +2,11 @@ import type { LightNode } from "@waku/interfaces";
 import ChatList from "./ChatList";
 import MessageInput from "./MessageInput";
 import { useWaku, useContentPair, useLightPush } from "@waku/react";
-import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
 import { useNodePeers, usePeers } from "./hooks";
+import type { RoomProps } from "./types";
 
-interface Props {
-  messages: Message[];
-  commandHandler: (cmd: string) => void;
-  nick: string;
-}
-
-export default function Room(props: Props) {
+export default function Room(props: RoomProps) {
   const { node } = useWaku<LightNode>();
   const { encoder } = useContentPair();
   const { push: onPush } = useLightPush({ node, encoder });

examples/web-chat/src/config.ts

@@ -1,9 +1 @@
-import { Protocols } from "@waku/interfaces";
-
 export const CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
-
-export const PROTOCOLS = [
-  Protocols.Filter,
-  Protocols.Store,
-  Protocols.LightPush,
-];

examples/web-chat/src/hooks.ts

@@ -1,18 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
+import { EPeersByDiscoveryEvents, LightNode, Tags } from "@waku/interfaces";
 import type { PeerId } from "@libp2p/interface-peer-id";
-import type { Peer } from "@libp2p/interface-peer-store";
-import {
-  EPeersByDiscoveryEvents,
-  LightNode,
-  StoreQueryOptions,
-  Waku,
-  Tags,
-} from "@waku/interfaces";
-import type { waku } from "@waku/sdk";
 
 import { useFilterMessages, useStoreMessages } from "@waku/react";
+import type {
+  UseMessagesParams,
+  UseMessagesResult,
+  UsePeersParams,
+  UsePeersResults,
+} from "./types";
+import { handleCatch } from "./utils";
 
 export const usePersistentNick = (): [
   string,
@@ -29,14 +28,6 @@ export const usePersistentNick = (): [
   return [nick, setNick];
 };
 
-type UseMessagesParams = {
-  node: undefined | LightNode;
-  decoder: undefined | waku.Decoder;
-  options: StoreQueryOptions;
-};
-
-type UseMessagesResult = [Message[], (v: Message[]) => void];
-
 export const useMessages = (params: UseMessagesParams): UseMessagesResult => {
   const { messages: newMessages } = useFilterMessages(params);
   const { messages: storedMessages } = useStoreMessages(params);
@@ -163,17 +154,6 @@ export const useNodePeers = (node: undefined | LightNode) => {
   };
 };
 
-type UsePeersParams = {
-  node: undefined | Waku;
-};
-
-type UsePeersResults = {
-  allConnected?: PeerId[];
-  storePeers?: PeerId[];
-  filterPeers?: PeerId[];
-  lightPushPeers?: PeerId[];
-};
-
 /**
  * Hook returns map of peers for different protocols.
  * If protocol is not implemented on the node peers are undefined.
@@ -216,13 +196,3 @@ export const usePeers = (params: UsePeersParams): UsePeersResults => {
 
   return peers;
 };
-
-function handleCatch(promise?: Promise<Peer[]>): Promise<Peer[] | undefined> {
-  if (!promise) {
-    return Promise.resolve(undefined);
-  }
-
-  return promise.catch((_) => {
-    return undefined;
-  });
-}

examples/web-chat/src/index.tsx

@@ -6,7 +6,8 @@ import { wakuPeerExchangeDiscovery } from "@waku/peer-exchange";
 import "./index.css";
 
 import App from "./App";
-import { CONTENT_TOPIC, PROTOCOLS } from "./config";
+import { CONTENT_TOPIC } from "./config";
+import { Protocols } from "@waku/interfaces";
 
 const NODE_OPTIONS = {
   libp2p: {
@@ -23,7 +24,15 @@ const NODE_OPTIONS = {
 
 ReactDOM.render(
   <React.StrictMode>
-    <LightNodeProvider options={NODE_OPTIONS} protocols={PROTOCOLS}>
+    <LightNodeProvider
+      options={NODE_OPTIONS}
+      protocols={[
+        Protocols.Relay,
+        Protocols.Store,
+        Protocols.Filter,
+        Protocols.LightPush,
+      ]}
+    >
       <ContentPairProvider contentTopic={CONTENT_TOPIC}>
         <App />
       </ContentPairProvider>

examples/web-chat/src/types.ts

@@ -0,0 +1,38 @@
+import type { PeerId } from "@libp2p/interface-peer-id";
+import type { LightNode, StoreQueryOptions, Waku } from "@waku/interfaces";
+import type { Decoder } from "@waku/sdk";
+import type { Message } from "./Message";
+
+export type UsePeersParams = {
+  node: undefined | Waku;
+};
+
+export type UsePeersResults = {
+  allConnected?: PeerId[];
+  storePeers?: PeerId[];
+  filterPeers?: PeerId[];
+  lightPushPeers?: PeerId[];
+};
+
+export type UseMessagesParams = {
+  node: undefined | LightNode;
+  decoder: undefined | Decoder;
+  options: StoreQueryOptions;
+};
+
+export type UseMessagesResult = [Message[], (v: Message[]) => void];
+
+export interface ChatListProps {
+  messages: Message[];
+}
+
+export interface MessageInputProps {
+  hasLightPushPeers: boolean;
+  sendMessage: ((msg: string) => Promise<void>) | undefined;
+}
+
+export interface RoomProps {
+  messages: Message[];
+  commandHandler: (cmd: string) => void;
+  nick: string;
+}

examples/web-chat/src/utils.ts

@@ -0,0 +1,15 @@
+import type { Peer } from "@libp2p/interface-peer-store";
+
+export async function handleCatch(
+  promise?: Promise<Peer[]>
+): Promise<Peer[] | undefined> {
+  if (!promise) {
+    return Promise.resolve(undefined);
+  }
+
+  try {
+    return await promise;
+  } catch (_) {
+    return undefined;
+  }
+}