address draft warning review feedback

Author: dnywh

src/components/ChatWindow/ChatWindow.tsx

@@ -69,6 +69,7 @@ const defaultChatRenderOptions: ChatRenderOptions = {
   timeZone: CHAT_RENDER_TIME_ZONE,
   useRelativeDayLabels: false,
 };
+const CHAT_DRAFT_WRITE_DELAY_MS = 150;
 
 function getChatDraftStorageKey({
   threadId,
@@ -174,6 +175,13 @@ const ChatWindow = memo(function ChatWindow({
   const realListing = isDemo ? null : (listing as ChatListing);
   const sendMutation = useInlineMutation<ChatSendResult>();
   const lastReadSignatureRef = useRef<string | null>(null);
+  const draftWriteTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const pendingDraftWriteRef = useRef<{
+    key: string;
+    message: string;
+  } | null>(null);
 
   const [message, setMessage] = useState("");
   const [threadId, setThreadId] = useState<string | null>(
@@ -239,11 +247,51 @@ const ChatWindow = memo(function ChatWindow({
     return errorMessage;
   }
 
+  function clearPendingDraftWrite() {
+    if (draftWriteTimeoutRef.current) {
+      clearTimeout(draftWriteTimeoutRef.current);
+      draftWriteTimeoutRef.current = null;
+    }
+  }
+
+  function flushPendingDraftWrite() {
+    clearPendingDraftWrite();
+
+    if (!pendingDraftWriteRef.current) {
+      return;
+    }
+
+    const { key, message } = pendingDraftWriteRef.current;
+    pendingDraftWriteRef.current = null;
+    sessionStorage.setItem(key, message);
+  }
+
+  function scheduleDraftWrite(key: string, nextMessage: string) {
+    clearPendingDraftWrite();
+    pendingDraftWriteRef.current = {
+      key,
+      message: nextMessage,
+    };
+    draftWriteTimeoutRef.current = setTimeout(() => {
+      flushPendingDraftWrite();
+    }, CHAT_DRAFT_WRITE_DELAY_MS);
+  }
+
+  function removeDraftWrite(key: string) {
+    if (pendingDraftWriteRef.current?.key === key) {
+      clearPendingDraftWrite();
+      pendingDraftWriteRef.current = null;
+    }
+
+    sessionStorage.removeItem(key);
+  }
+
   useEffect(() => {
     setClientTimeZone(getClientTimeZone());
   }, []);
 
   useEffect(() => {
+    flushPendingDraftWrite();
     setThreadId(existingThread?.id ?? null);
     setMessages(getThreadMessages(existingThread));
     setMessage(
@@ -252,6 +300,13 @@ const ChatWindow = memo(function ChatWindow({
     lastReadSignatureRef.current = null;
   }, [draftStorageKey, existingThread]);
 
+  useEffect(
+    () => () => {
+      flushPendingDraftWrite();
+    },
+    []
+  );
+
   useEffect(() => {
     if (isDemo || !supabase || !threadId || !user?.id) {
       return;
@@ -386,7 +441,7 @@ const ChatWindow = memo(function ChatWindow({
       setThreadId(sentThreadId);
       setMessages((previousMessages) => [...previousMessages, sentMessage]);
       if (draftStorageKey) {
-        sessionStorage.removeItem(draftStorageKey);
+        removeDraftWrite(draftStorageKey);
       }
       setMessage("");
     }
@@ -408,9 +463,9 @@ const ChatWindow = memo(function ChatWindow({
     }
 
     if (nextMessage.trim().length > 0) {
-      sessionStorage.setItem(draftStorageKey, nextMessage);
+      scheduleDraftWrite(draftStorageKey, nextMessage);
     } else {
-      sessionStorage.removeItem(draftStorageKey);
+      removeDraftWrite(draftStorageKey);
     }
   };
 

src/components/ListingWrite/ListingWrite.tsx

@@ -300,9 +300,18 @@ export default function ListingWrite({
       visibility,
     ]
   );
-  const hasUnsavedChanges =
-    JSON.stringify(initialListingValues) !==
-    JSON.stringify(currentListingValues);
+  const initialListingValuesJson = useMemo(
+    () => JSON.stringify(initialListingValues),
+    [initialListingValues]
+  );
+  const currentListingValuesJson = useMemo(
+    () => JSON.stringify(currentListingValues),
+    [currentListingValues]
+  );
+  const hasUnsavedChanges = useMemo(
+    () => initialListingValuesJson !== currentListingValuesJson,
+    [currentListingValuesJson, initialListingValuesJson]
+  );
   const errorCount = Object.keys(errors).length;
   const feedbackError =
     deleteMutation.result.error || submitMutation.result.error;