Merge pull request #2506 from ecency/nt/warning-fix

fixed component update from inside function body issue

src/components/markdownEditor/styles/markdownEditorStyles.js

@@ -17,7 +17,7 @@ export default EStyleSheet.create({
     color: '$primaryBlack',
     backgroundColor: '$primaryBackgroundColor',
     textAlignVertical: 'top',
-    minHeight:isAndroidOreo() ?  undefined : '$deviceHeight/2',
+    minHeight: isAndroidOreo() ? undefined : '$deviceHeight/2',
     maxHeight: isAndroidOreo() ? '$deviceHeight' : undefined,
   },
   previewContainer: {

src/components/postElements/body/view/commentBodyView.tsx

@@ -153,7 +153,10 @@ const CommentBody = ({
     actionLink.current.show();
   }
 
-  const _handleSetSelectedImage = (imageLink:string) => {
+  const _handleSetSelectedImage = (imageLink:string, postImgUrls:string[]) => {
+    if(postImages.length !== postImgUrls.length){
+      setPostImages(postImgUrls);
+    }
     setSelectedImage(imageLink);
     actionImage.current.show();
   }
@@ -282,17 +285,6 @@ const CommentBody = ({
   };
 
 
- 
-
-
-  const _onElementIsImage = useCallback((imgUrl) =>{
-    if(postImages.indexOf(imgUrl) == -1){
-        postImages.push(imgUrl);
-        setPostImages(postImages);
-      }
-  },[postImages])
-
-
   return (
     <Fragment>
       <Modal key={`mkey-${created.toString()}`} visible={isImageModalOpen} transparent={true}>
@@ -337,7 +329,6 @@ const CommentBody = ({
               contentWidth={_contentWidth}
               body={body}
               isComment={true}
-              onElementIsImage={_onElementIsImage}
               setSelectedImage={_handleSetSelectedImage}
               setSelectedLink={_handleSetSelectedLink}
               handleOnPostPress={_handleOnPostPress}

src/components/postElements/body/view/postBodyView.js

@@ -256,19 +256,15 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => {
     }
   };
 
-  const _onElementIsImage = (imgUrl) => {
-    if (postImages.indexOf(imgUrl) == -1) {
-      postImages.push(imgUrl);
-      setPostImages(postImages);
-    }
-  };
-
   const _handleSetSelectedLink = (link) => {
     setSelectedLink(link);
     actionLink.current.show();
   };
 
-  const _handleSetSelectedImage = (imageLink) => {
+  const _handleSetSelectedImage = (imageLink, postImgUrls) => {
+    if (postImages.length !== postImgUrls.length) {
+      setPostImages(postImgUrls);
+    }
     setSelectedImage(imageLink);
     actionImage.current.show();
   };
@@ -335,7 +331,6 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => {
           body={html}
           contentWidth={width ? width : WIDTH - 32}
           onLoaded={_handleLoadEnd}
-          onElementIsImage={_onElementIsImage}
           setSelectedImage={_handleSetSelectedImage}
           setSelectedLink={_handleSetSelectedLink}
           handleOnPostPress={_handleOnPostPress}

src/components/postHtmlRenderer/postHtmlRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 import RenderHTML, { CustomRendererProps, Element, TNode } from 'react-native-render-html';
 import { useHtmlIframeProps, iframeModel } from '@native-html/iframe-plugin';
 import styles from './postHtmlRendererStyles';
@@ -7,7 +7,6 @@ import VideoThumb from './videoThumb';
 import { AutoHeightImage } from '../autoHeightImage/autoHeightImage';
 import WebView from 'react-native-webview';
 import { VideoPlayer } from '..';
-import { useHtmlTableProps } from '@native-html/table-plugin';
 import { ScrollView } from 'react-native-gesture-handler';
 import { prependChild, removeElement } from 'htmlparser2/node_modules/domutils';
 
@@ -16,9 +15,8 @@ interface PostHtmlRendererProps {
   body: string;
   isComment?: boolean;
   onLoaded?: () => void;
-  setSelectedImage: (imgUrl: string) => void;
+  setSelectedImage: (imgUrl: string, postImageUrls:string[]) => void;
   setSelectedLink: (url: string) => void;
-  onElementIsImage: (imgUrl: string) => void;
   handleOnPostPress: (permlink: string, authro: string) => void;
   handleOnUserPress: (username: string) => void;
   handleTagPress: (tag: string, filter?: string) => void;
@@ -34,13 +32,15 @@ export const PostHtmlRenderer = memo(
     onLoaded,
     setSelectedImage,
     setSelectedLink,
-    onElementIsImage,
     handleOnPostPress,
     handleOnUserPress,
     handleTagPress,
     handleVideoPress,
     handleYoutubePress,
   }: PostHtmlRendererProps) => {
+
+    const postImgUrlsRef = useRef<string[]>([]);
+
     //new renderer functions
     body = body.replace(/<center>/g, '<div class="text-center">').replace(/<\/center>/g, '</div>');
 
@@ -146,7 +146,9 @@ export const PostHtmlRenderer = memo(
       if (element.tagName === 'img' && element.attribs.src) {
         const imgUrl = element.attribs.src;
         console.log('img element detected', imgUrl);
-        onElementIsImage(imgUrl);
+        if(!postImgUrlsRef.current.includes(imgUrl)){
+          postImgUrlsRef.current.push(imgUrl)
+        }
       }
 
       //this avoids invalid rendering of first element of table pushing rest of columsn to extreme right.
@@ -235,7 +237,7 @@ export const PostHtmlRenderer = memo(
       const imgUrl = tnode.attributes.src;
       const _onPress = () => {
         console.log('Image Pressed:', imgUrl);
-        setSelectedImage(imgUrl);
+        setSelectedImage(imgUrl, postImgUrlsRef.current);
       };
 
       const isVideoThumb = tnode.classes?.indexOf('video-thumbnail') >= 0;