feat: added message persistance

src/components/PageComponents/Messages/MessageInput.tsx

@@ -5,7 +5,7 @@ import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/core";
 import { SendIcon } from "lucide-react";
 import { startTransition, useCallback, useMemo, useState } from "react";
-import { useMessageStore } from "@core/stores/messageStore.ts";
+import { ChatTypes, useMessageStore } from "@core/stores/messageStore.ts";
 
 export interface MessageInputProps {
   to: Types.Destination;
@@ -18,55 +18,40 @@ export const MessageInput = ({
   channel,
   maxBytes,
 }: MessageInputProps) => {
-  const {
-    connection,
-    messageDraft,
-    setMessageDraft,
-    hardware,
-  } = useDevice();
-  const { setMessageState } = useMessageStore()
-  const myNodeNum = hardware.myNodeNum;
+  const { connection, messageDraft, setMessageDraft } = useDevice();
+  const { setMessageState, activeChat } = useMessageStore();
+
   const [localDraft, setLocalDraft] = useState(messageDraft);
   const [messageBytes, setMessageBytes] = useState(0);
 
   const debouncedSetMessageDraft = useMemo(
-    () => debounce(setMessageDraft, 300),
-    [setMessageDraft],
+    () => debounce((value: string) => setMessageDraft(value), 300),
+    [setMessageDraft]
   );
 
-  // sends the message to the selected destination
-  const sendText = useCallback(
-    async (message: string) => {
+  const calculateBytes = (text: string) => new Blob([text]).size;
 
-      await connection
-        ?.sendText(message, to, true, channel)
-        .then((id: number) =>
-          setMessageState(
-            to === "broadcast" ? "broadcast" : "direct",
-            channel,
-            to as number,
-            myNodeNum,
-            id,
-            "ack",
-          )
-        )
-        .catch((e: Types.PacketError) =>
-          setMessageState(
-            to === "broadcast" ? "broadcast" : "direct",
-            channel,
-            to as number,
-            myNodeNum,
-            e.id,
-            e.error,
-          )
-        );
-    },
-    [channel, connection, myNodeNum, setMessageState, to],
-  );
+  const chatType = to === 'broadcast' ? ChatTypes.BROADCAST : ChatTypes.DIRECT;
+
+  const sendText = useCallback(async (message: string) => {
+    try {
+      const messageId = await connection?.sendText(message, to, true, channel);
+      if (messageId !== undefined) {
+        setMessageState({ type: chatType, key: activeChat, messageId, newState: 'ack' });
+      }
+    } catch (e: any) {
+      setMessageState({
+        type: chatType,
+        key: activeChat,
+        messageId: e?.id,
+        newState: 'failed',
+      });
+    }
+  }, [channel, connection, setMessageState, to, activeChat, chatType]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    const byteLength = new Blob([newValue]).size;
+    const byteLength = calculateBytes(newValue);
 
     if (byteLength <= maxBytes) {
       setLocalDraft(newValue);
@@ -75,24 +60,29 @@ export const MessageInput = ({
     }
   };
 
+  const handleBeforeInput = (e: React.FormEvent<HTMLInputElement>) => {
+    const nextValue = localDraft + (e.nativeEvent as InputEvent).data;
+    if (calculateBytes(nextValue) > maxBytes) {
+      e.preventDefault();
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!localDraft.trim()) return;
+
+    startTransition(() => {
+      sendText(localDraft.trim());
+      setLocalDraft("");
+      setMessageDraft("");
+      setMessageBytes(0);
+    });
+  };
+
   return (
     <div className="flex gap-2">
-      <form
-        className="w-full"
-        action={(formData: FormData) => {
-          // prevent user from sending blank/empty message
-          if (localDraft === "") return;
-          const message = formData.get("messageInput") as string;
-          startTransition(() => {
-            sendText(message);
-            setLocalDraft("");
-            setMessageDraft("");
-            setMessageBytes(0);
-
-          });
-        }}
-      >
-        <div className="flex grow gap-2 ">
+      <form className="w-full" onSubmit={handleSubmit}>
+        <div className="flex grow gap-2">
           <label className="w-full">
             <Input
               autoFocus
@@ -101,13 +91,18 @@ export const MessageInput = ({
               placeholder="Enter Message"
               value={localDraft}
               onChange={handleInputChange}
+              onBeforeInput={handleBeforeInput}
             />
           </label>
+
           <label data-testid="byte-counter" className="flex items-center w-24 p-2 place-content-end">
             {messageBytes}/{maxBytes}
           </label>
 
-          <Button type="submit" className="dark:bg-white dark:text-slate-900 dark:hover:bg-slate-400 dark:hover:text-white">
+          <Button
+            type="submit"
+            className="dark:bg-white dark:text-slate-900 dark:hover:bg-slate-400 dark:hover:text-white"
+          >
             <SendIcon size={16} />
           </Button>
         </div>