From a2b851e34cf6f32de2105e252416002d8e1a181a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 13 Nov 2022 17:05:40 +0400
Subject: [PATCH] Message: Update message tail color after adding text (#2122)

---
 src/components/middle/message/Invoice.tsx  | 15 +++++++-----
 src/components/middle/message/Location.tsx | 28 ++++++++++++++--------
 src/components/middle/message/Photo.tsx    | 22 ++++++++++-------
 3 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/components/middle/message/Invoice.tsx b/src/components/middle/message/Invoice.tsx
index 9a419f15f..9deb3c6a8 100644
--- a/src/components/middle/message/Invoice.tsx
+++ b/src/components/middle/message/Invoice.tsx
@@ -1,6 +1,6 @@
-import type { FC } from '../../../lib/teact/teact';
-import React, { memo, useLayoutEffect, useRef } from '../../../lib/teact/teact';
+import React, { memo, useRef } from '../../../lib/teact/teact';
 
+import type { FC } from '../../../lib/teact/teact';
 import type { ApiMessage } from '../../../api/types';
 import type { ISettings } from '../../../types';
 
@@ -10,6 +10,7 @@ import { formatCurrency } from '../../../util/formatCurrency';
 import renderText from '../../common/helpers/renderText';
 import getCustomAppendixBg from './helpers/getCustomAppendixBg';
 
+import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
 import useLang from '../../../hooks/useLang';
 import useMedia from '../../../hooks/useMedia';
 
@@ -49,20 +50,22 @@ const Invoice: FC<OwnProps> = ({
 
   const photoUrl = useMedia(getWebDocumentHash(photo));
 
-  useLayoutEffect(() => {
+  useLayoutEffectWithPrevDeps(([prevShouldAffectAppendix]) => {
     if (!shouldAffectAppendix) {
+      if (prevShouldAffectAppendix) {
+        ref.current!.closest<HTMLDivElement>('.message-content')!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
+      }
       return;
     }
 
-    const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
-
     if (photoUrl) {
+      const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
       getCustomAppendixBg(photoUrl, false, isInSelectMode, isSelected, theme).then((appendixBg) => {
         contentEl.style.setProperty('--appendix-bg', appendixBg);
         contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
       });
     }
-  }, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme]);
+  }, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme] as const);
 
   return (
     <div
diff --git a/src/components/middle/message/Location.tsx b/src/components/middle/message/Location.tsx
index 9281da4ab..4952833f1 100644
--- a/src/components/middle/message/Location.tsx
+++ b/src/components/middle/message/Location.tsx
@@ -1,8 +1,8 @@
-import type { FC } from '../../../lib/teact/teact';
 import React, {
   memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
 } from '../../../lib/teact/teact';
 
+import type { FC } from '../../../lib/teact/teact';
 import type { ApiChat, ApiMessage, ApiUser } from '../../../api/types';
 import type { ISettings } from '../../../types';
 
@@ -14,19 +14,21 @@ import {
   isOwnMessage,
   isUserId,
 } from '../../../global/helpers';
-import useMedia from '../../../hooks/useMedia';
 import getCustomAppendixBg from './helpers/getCustomAppendixBg';
 import { formatCountdownShort, formatLastUpdated } from '../../../util/dateFormat';
-import useLang from '../../../hooks/useLang';
-import useForceUpdate from '../../../hooks/useForceUpdate';
-import useTimeout from '../../../hooks/useTimeout';
 import {
   getMetersPerPixel, getVenueColor, getVenueIconUrl, prepareMapUrl,
 } from '../../../util/map';
+import { getServerTime } from '../../../util/serverTime';
+
+import useMedia from '../../../hooks/useMedia';
+import useLang from '../../../hooks/useLang';
+import useForceUpdate from '../../../hooks/useForceUpdate';
+import useTimeout from '../../../hooks/useTimeout';
 import buildClassName from '../../../util/buildClassName';
 import usePrevious from '../../../hooks/usePrevious';
 import useInterval from '../../../hooks/useInterval';
-import { getServerTime } from '../../../util/serverTime';
+import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
 
 import Avatar from '../../common/Avatar';
 import Skeleton from '../../ui/Skeleton';
@@ -143,17 +145,23 @@ const Location: FC<OwnProps> = ({
     }
   }, [updateCountdown]);
 
-  useLayoutEffect(() => {
-    if (shouldRenderText) return;
-    const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
+  useLayoutEffectWithPrevDeps(([prevShouldRenderText]) => {
+    if (shouldRenderText) {
+      if (!prevShouldRenderText) {
+        ref.current!.closest<HTMLDivElement>('.message-content')!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
+      }
+      return;
+    }
+
     if (mapBlobUrl) {
+      const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
       getCustomAppendixBg(mapBlobUrl, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => {
         contentEl.style.setProperty('--appendix-bg', appendixBg);
         contentEl.classList.add('has-appendix-thumb');
         contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
       });
     }
-  }, [isOwn, isInSelectMode, isSelected, theme, mapBlobUrl, shouldRenderText]);
+  }, [shouldRenderText, isOwn, isInSelectMode, isSelected, theme, mapBlobUrl] as const);
 
   useEffect(() => {
     // Prevent map refetching for slight location changes
diff --git a/src/components/middle/message/Photo.tsx b/src/components/middle/message/Photo.tsx
index c8360dcd2..71d048d74 100644
--- a/src/components/middle/message/Photo.tsx
+++ b/src/components/middle/message/Photo.tsx
@@ -1,11 +1,12 @@
-import type { FC } from '../../../lib/teact/teact';
 import React, {
-  useCallback, useLayoutEffect, useRef, useState,
+  useCallback, useRef, useState,
 } from '../../../lib/teact/teact';
 
+import type { FC } from '../../../lib/teact/teact';
 import type { ApiMessage } from '../../../api/types';
 import type { ISettings } from '../../../types';
 import type { IMediaDimensions } from './helpers/calculateAlbumLayout';
+import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
 
 import { CUSTOM_APPENDIX_ATTRIBUTE } from '../../../config';
 import {
@@ -16,16 +17,17 @@ import {
   isOwnMessage,
   getMessageMediaFormat,
 } from '../../../global/helpers';
-import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
+import buildClassName from '../../../util/buildClassName';
+import getCustomAppendixBg from './helpers/getCustomAppendixBg';
+import { calculateMediaDimensions } from './helpers/mediaDimensions';
+
 import { useIsIntersecting } from '../../../hooks/useIntersectionObserver';
 import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress';
 import useShowTransition from '../../../hooks/useShowTransition';
 import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef';
 import usePrevious from '../../../hooks/usePrevious';
 import useMediaTransition from '../../../hooks/useMediaTransition';
-import buildClassName from '../../../util/buildClassName';
-import getCustomAppendixBg from './helpers/getCustomAppendixBg';
-import { calculateMediaDimensions } from './helpers/mediaDimensions';
+import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
 
 import ProgressSpinner from '../../ui/ProgressSpinner';
 
@@ -126,13 +128,15 @@ const Photo: FC<OwnProps> = ({
   }, [fullMediaData, isUploading, message, onCancelUpload, onClick]);
 
   const isOwn = isOwnMessage(message);
-  useLayoutEffect(() => {
+  useLayoutEffectWithPrevDeps(([prevShouldAffectAppendix]) => {
     if (!shouldAffectAppendix) {
+      if (prevShouldAffectAppendix) {
+        ref.current!.closest<HTMLDivElement>('.message-content')!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
+      }
       return;
     }
 
     const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
-
     if (fullMediaData) {
       getCustomAppendixBg(fullMediaData, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => {
         contentEl.style.setProperty('--appendix-bg', appendixBg);
@@ -141,7 +145,7 @@ const Photo: FC<OwnProps> = ({
     } else {
       contentEl.classList.add('has-appendix-thumb');
     }
-  }, [fullMediaData, isOwn, shouldAffectAppendix, isInSelectMode, isSelected, theme]);
+  }, [shouldAffectAppendix, fullMediaData, isOwn, isInSelectMode, isSelected, theme] as const);
 
   const { width, height, isSmall } = dimensions || calculateMediaDimensions(message, noAvatars);