From 539a304ff4acb77bfaf62caf3598534ce431c1a1 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 31 Aug 2023 22:42:05 +0700 Subject: [PATCH 1/4] fix: 26075 image does not show in full view on Staging Server --- src/components/AttachmentModal.js | 3 +-- .../HTMLRenderers/ImageRenderer.js | 20 +++++++++++++++++-- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index c07a4474a68b..d39906faf3a3 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -25,7 +25,6 @@ import HeaderGap from './HeaderGap'; import SafeAreaConsumer from './SafeAreaConsumer'; import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL'; import reportPropTypes from '../pages/reportPropTypes'; -import tryResolveUrlFromApiRoot from '../libs/tryResolveUrlFromApiRoot'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -351,7 +350,7 @@ function AttachmentModal(props) { prevProps.translate === nextProps.translate && lodashGet(prevProps, 'user.shouldUseStagingServer') === lodashGet(nextProps, 'user.shouldUseStagingServer'), + ), +); From e220b1602d61fae81f8b1f70adf55bad4d93ca52 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 31 Aug 2023 23:49:22 +0700 Subject: [PATCH 2/4] fix: remove memo and withLocalize --- .../HTMLRenderers/ImageRenderer.js | 30 +++++++------------ 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 9d31e2ec99d9..4035959dc185 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -1,6 +1,5 @@ -import React, {memo} from 'react'; +import React from 'react'; import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get'; import Navigation from '../../../libs/Navigation/Navigation'; import htmlRendererPropTypes from './htmlRendererPropTypes'; import styles from '../../../styles/styles'; @@ -10,14 +9,15 @@ import CONST from '../../../CONST'; import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContextMenuContext'; import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot'; import * as ReportUtils from '../../../libs/ReportUtils'; -import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; import ROUTES from '../../../ROUTES'; -import compose from '../../../libs/compose'; import ONYXKEYS from '../../../ONYXKEYS'; +import useLocalize from '../../../hooks/useLocalize'; -const propTypes = {...htmlRendererPropTypes, ...withLocalizePropTypes}; +const propTypes = {...htmlRendererPropTypes}; function ImageRenderer(props) { + const {translate} = useLocalize(); + const htmlAttribs = props.tnode.attributes; // There are two kinds of images that need to be displayed: @@ -76,7 +76,7 @@ function ImageRenderer(props) { ) } accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} - accessibilityLabel={props.translate('accessibilityHints.viewAttachment')} + accessibilityLabel={translate('accessibilityHints.viewAttachment')} > prevProps.translate === nextProps.translate && lodashGet(prevProps, 'user.shouldUseStagingServer') === lodashGet(nextProps, 'user.shouldUseStagingServer'), - ), -); +export default withOnyx({ + user: { + key: ONYXKEYS.USER, + }, +})(ImageRenderer); From 0f0b95a0f1ae18c17f916aa271e7186968654a32 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 1 Sep 2023 23:25:43 +0700 Subject: [PATCH 3/4] add memo hook --- .../HTMLRenderers/ImageRenderer.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 4035959dc185..b920349eaf38 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {memo} from 'react'; import {withOnyx} from 'react-native-onyx'; import Navigation from '../../../libs/Navigation/Navigation'; import htmlRendererPropTypes from './htmlRendererPropTypes'; @@ -12,6 +12,7 @@ import * as ReportUtils from '../../../libs/ReportUtils'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; import useLocalize from '../../../hooks/useLocalize'; +import lodashGet from 'lodash/get'; const propTypes = {...htmlRendererPropTypes}; @@ -98,4 +99,11 @@ export default withOnyx({ user: { key: ONYXKEYS.USER, }, -})(ImageRenderer); +})( + memo( + ImageRenderer, + (prevProps, nextProps) => + lodashGet(prevProps, 'tnode.attributes') === lodashGet(nextProps, 'tnode.attributes') && + lodashGet(prevProps, 'user.shouldUseStagingServer') === lodashGet(nextProps, 'user.shouldUseStagingServer'), + ), +); From 865bf60eec59a918ad77fbe8bd7da3b6e71b6684 Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 2 Sep 2023 00:01:58 +0700 Subject: [PATCH 4/4] fix: lint --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index b920349eaf38..74cf83a4a6f0 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -1,5 +1,6 @@ import React, {memo} from 'react'; import {withOnyx} from 'react-native-onyx'; +import lodashGet from 'lodash/get'; import Navigation from '../../../libs/Navigation/Navigation'; import htmlRendererPropTypes from './htmlRendererPropTypes'; import styles from '../../../styles/styles'; @@ -12,7 +13,6 @@ import * as ReportUtils from '../../../libs/ReportUtils'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; import useLocalize from '../../../hooks/useLocalize'; -import lodashGet from 'lodash/get'; const propTypes = {...htmlRendererPropTypes};