Persist message draft

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,7 +1,5 @@
 import type React from "react";
 
-import { useForm } from "react-hook-form";
-
 import { IconButton } from "@app/components/form/IconButton.js";
 import { Input } from "@app/components/form/Input.js";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -14,20 +12,13 @@ export interface MessageInputProps {
 }
 
 export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
-  const { connection, setMessageState } = useDevice();
+  const { connection, setMessageState, messageDraft, setMessageDraft } =
+    useDevice();
 
-  const { register, handleSubmit } = useForm<{
+  const sendText = async (message: string) => {
-    message: string;
-  }>({
-    defaultValues: {
-      message: ""
-    }
-  });
-
-  const onSubmit = handleSubmit(async (data) => {
     await connection
       ?.sendText({
-        text: data.message,
+        text: message,
         wantAck: true,
         channel: channel.config.index as Types.ChannelNumber
       })
@@ -35,11 +26,18 @@ export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
       .catch((e: Types.PacketError) =>
         setMessageState(channel.config.index, e.id, e.error)
       );
-  });
+  };
 
   return (
     <div className="flex gap-2">
-      <form className="w-full" onSubmit={onSubmit}>
+      <form
+        className="w-full"
+        onSubmit={(e) => {
+          e.preventDefault();
+          sendText(messageDraft);
+          setMessageDraft("");
+        }}
+      >
         <div className="flex flex-grow gap-2">
           <span className="w-full">
             <Input
@@ -47,7 +45,8 @@ export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
               minLength={2}
               label=""
               placeholder="Enter Message"
-              {...register("message")}
+              value={messageDraft}
+              onChange={(e) => setMessageDraft(e.target.value)}
             />
           </span>
           <IconButton

src/core/stores/deviceStore.ts

@@ -69,6 +69,7 @@ export interface Device {
   shutdownDialogOpen: boolean;
   rebootDialogOpen: boolean;
   pendingSettingsChanges: boolean;
+  messageDraft: string;
 
   setReady(ready: boolean): void;
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -101,6 +102,7 @@ export interface Device {
   setShutdownDialogOpen: (open: boolean) => void;
   setRebootDialogOpen: (open: boolean) => void;
   processPacket: (data: processPacketParams) => void;
+  setMessageDraft: (message: string) => void;
 }
 
 export interface DeviceState {
@@ -141,6 +143,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           shutdownDialogOpen: false,
           rebootDialogOpen: false,
           pendingSettingsChanges: false,
+          messageDraft: "",
 
           setReady: (ready: boolean) => {
             set(
@@ -231,6 +234,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                       device.moduleConfig.cannedMessage =
                         config.payloadVariant.cannedMessage;
                       break;
+                    case "audio":
+                      device.moduleConfig.audio = config.payloadVariant.audio;
                   }
                 }
               })
@@ -548,6 +553,16 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                 }
               })
             );
+          },
+          setMessageDraft: (message: string) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  device.messageDraft = message;
+                }
+              })
+            );
           }
         });
       })