From 430e0cbd469f8f44ece2c4a0404134740bee8397 Mon Sep 17 00:00:00 2001
From: Hunter275 <hunter@hunterthornsberry.com>
Date: Tue, 4 Feb 2025 23:30:39 -0500
Subject: [PATCH] Limit the length of messages to 200 bytes

---
 .../PageComponents/Messages/ChannelChat.tsx        |  2 +-
 .../PageComponents/Messages/MessageInput.tsx       | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 79950bf8..b636fbc6 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -69,7 +69,7 @@ export const ChannelChat = ({
         </div>
       </div>
       <div className="pl-3 pr-3 pt-3 pb-1">
-        <MessageInput to={to} channel={channel} />
+        <MessageInput to={to} channel={channel} maxBytes={200} />
       </div>
     </div>
   );
diff --git a/src/components/PageComponents/Messages/MessageInput.tsx b/src/components/PageComponents/Messages/MessageInput.tsx
index ae88f9ac..b9080bb2 100644
--- a/src/components/PageComponents/Messages/MessageInput.tsx
+++ b/src/components/PageComponents/Messages/MessageInput.tsx
@@ -9,11 +9,13 @@ import { useCallback, useMemo, useState } from "react";
 export interface MessageInputProps {
   to: Types.Destination;
   channel: Types.ChannelNumber;
+  maxBytes: number;
 }
 
 export const MessageInput = ({
   to,
   channel,
+  maxBytes,
 }: MessageInputProps): JSX.Element => {
   const {
     connection,
@@ -24,6 +26,7 @@ export const MessageInput = ({
   } = useDevice();
   const myNodeNum = hardware.myNodeNum;
   const [localDraft, setLocalDraft] = useState(messageDraft);
+  const [messageBytes, setMessageBytes] = useState(maxBytes);
 
   const debouncedSetMessageDraft = useMemo(
     () => debounce(setMessageDraft, 300),
@@ -60,8 +63,12 @@ export const MessageInput = ({
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    setLocalDraft(newValue);
-    debouncedSetMessageDraft(newValue);
+    const byteLength = new Blob([newValue]).size;
+    if (byteLength <= maxBytes) {
+      setLocalDraft(newValue);
+      debouncedSetMessageDraft(newValue);
+      setMessageBytes(maxBytes - byteLength);
+    }
   };
 
   return (
@@ -85,6 +92,9 @@ export const MessageInput = ({
               onChange={handleInputChange}
             />
           </span>
+          <div className="flex items-center">
+            {messageBytes}/{maxBytes}
+          </div>
           <Button type="submit">
             <SendIcon size={16} />
           </Button>