From 74b6bd11b46a3a34852ecf82dad445d30aa60327 Mon Sep 17 00:00:00 2001
From: Sasha <118575614+weboko@users.noreply.github.com>
Date: Thu, 2 Mar 2023 00:56:20 +0100
Subject: [PATCH] fix: minor issues in the web-chat (#218)

* improve condition for message sending, fix clear input issue

* prevent display of empty messages
---
 examples/web-chat/src/MessageInput.tsx | 3 ++-
 examples/web-chat/src/Room.tsx         | 2 +-
 examples/web-chat/src/hooks.ts         | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/examples/web-chat/src/MessageInput.tsx b/examples/web-chat/src/MessageInput.tsx
index 78f3fae..86b0f4c 100644
--- a/examples/web-chat/src/MessageInput.tsx
+++ b/examples/web-chat/src/MessageInput.tsx
@@ -23,13 +23,14 @@ export default function MessageInput(props: Props) {
   const [isActive, setActiveButton] = useState<boolean>(false);
 
   const onMessage = async () => {
-    if (props.sendMessage) {
+    if (props.sendMessage && inputText) {
       await props.sendMessage(inputText);
       setInputText("");
     }
   };
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
     setInputText(event.target.value);
   };
 
diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx
index d661fa2..432f567 100644
--- a/examples/web-chat/src/Room.tsx
+++ b/examples/web-chat/src/Room.tsx
@@ -22,7 +22,7 @@ export default function Room(props: Props) {
   const { storePeers, filterPeers, lightPushPeers } = usePeers({ node });
 
   const onSend = async (text: string) => {
-    if (!onPush) {
+    if (!onPush || !text) {
       return;
     }
 
diff --git a/examples/web-chat/src/hooks.ts b/examples/web-chat/src/hooks.ts
index bab01c4..bc9d8db 100644
--- a/examples/web-chat/src/hooks.ts
+++ b/examples/web-chat/src/hooks.ts
@@ -46,6 +46,7 @@ export const useMessages = (params: UseMessagesParams): UseMessagesResult => {
       .map(Message.fromWakuMessage)
       .concat(localMessages)
       .filter((v): v is Message => !!v)
+      .filter((v) => v.payloadAsUtf8 !== "")
       .sort(
         (left, right) => left.timestamp.getTime() - right.timestamp.getTime()
       );