From 30c2d3835b830fbc5b86576c872c360decc78344 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 9 Mar 2022 01:03:03 +0100
Subject: [PATCH] Message: Fix editing while receiving message update (#1755)

---
 src/components/middle/composer/hooks/useEditing.ts | 13 +++++++------
 src/hooks/useOnChange.ts                           |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/middle/composer/hooks/useEditing.ts b/src/components/middle/composer/hooks/useEditing.ts
index a980e3521..10caebcf9 100644
--- a/src/components/middle/composer/hooks/useEditing.ts
+++ b/src/components/middle/composer/hooks/useEditing.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from '../../../../lib/teact/teact';
+import { useCallback } from '../../../../lib/teact/teact';
 import { getDispatch } from '../../../../lib/teact/teactn';
 
 import { ApiMessage } from '../../../../api/types';
@@ -8,6 +8,7 @@ import parseMessageInput from '../../../../util/parseMessageInput';
 import focusEditableElement from '../../../../util/focusEditableElement';
 import { hasMessageMedia } from '../../../../modules/helpers';
 import { getTextWithEntitiesAsHtml } from '../../../common/helpers/renderTextWithEntities';
+import useOnChange from '../../../../hooks/useOnChange';
 
 const useEditing = (
   htmlRef: { current: string },
@@ -18,21 +19,21 @@ const useEditing = (
 ) => {
   const { editMessage } = getDispatch();
 
-  // TODO useOnChange
-  // Handle editing message
-  useEffect(() => {
+  useOnChange(([prevEditedMessage]) => {
     if (!editedMessage) {
       setHtml('');
       return;
     }
-
+    if (prevEditedMessage?.id === editedMessage.id) {
+      return;
+    }
     setHtml(getTextWithEntitiesAsHtml(editedMessage.content.text));
 
     requestAnimationFrame(() => {
       const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
       focusEditableElement(messageInput, true);
     });
-  }, [editedMessage, setHtml]);
+  }, [editedMessage, setHtml] as const);
 
   const handleEditComplete = useCallback(() => {
     const { text, entities } = parseMessageInput(htmlRef.current!);
diff --git a/src/hooks/useOnChange.ts b/src/hooks/useOnChange.ts
index 228116acf..ca1f171c1 100644
--- a/src/hooks/useOnChange.ts
+++ b/src/hooks/useOnChange.ts
@@ -1,6 +1,6 @@
 import usePrevious from './usePrevious';
 
-const useOnChange = <T extends any[]>(cb: (args: T | []) => void, dependencies: T) => {
+const useOnChange = <T extends readonly any[]>(cb: (args: T | readonly []) => void, dependencies: T) => {
   const prevDeps = usePrevious<T>(dependencies);
   if (!prevDeps || dependencies.some((d, i) => d !== prevDeps[i])) {
     cb(prevDeps || []);