migrate post_image.tsx to function component (#26395)

webapp/channels/src/components/post_view/post_image/post_image.tsx

@@ -1,10 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback} from 'react';
 import type {KeyboardEvent, MouseEvent} from 'react';
 
-import type {Post, PostImage as PostImageMetadata} from '@mattermost/types/posts';
+import type {
+    Post,
+    PostImage as PostImageMetadata,
+} from '@mattermost/types/posts';
 
 import ExternalImage from 'components/external_image';
 import FilePreviewModal from 'components/file_preview_modal';
@@ -14,7 +17,7 @@ import {ModalIdentifiers} from 'utils/constants';
 
 import type {ModalData} from 'types/actions';
 
-interface Props {
+type PostImageProps = {
     imageMetadata: PostImageMetadata;
     link: string;
     post: Post;
@@ -23,46 +26,57 @@ interface Props {
     };
 }
 
-export default class PostImage extends React.PureComponent<Props> {
-    showModal = (e: (KeyboardEvent<HTMLImageElement> | MouseEvent<HTMLElement>), link = '') => {
+const PostImage = ({
+    imageMetadata,
+    link,
+    post,
+    actions,
+}: PostImageProps) => {
+    const {openModal} = actions;
+    const showModal = useCallback((
+        e: KeyboardEvent<HTMLImageElement> | MouseEvent<HTMLElement>,
+        link = '',
+    ) => {
         e.preventDefault();
 
-        this.props.actions.openModal({
+        openModal({
             modalId: ModalIdentifiers.FILE_PREVIEW_MODAL,
             dialogType: FilePreviewModal,
             dialogProps: {
-                post: this.props.post,
+                post,
                 startIndex: 0,
-                fileInfos: [{
-                    has_preview_image: false,
-                    link,
-                    extension: this.props.imageMetadata.format,
-                    name: this.props.link,
-                }],
+                fileInfos: [
+                    {
+                        has_preview_image: false,
+                        link,
+                        extension: imageMetadata.format,
+                        name: link,
+                    },
+                ],
             },
         });
-    };
+    }, [openModal, imageMetadata.format, post]);
 
-    render() {
-        return (
-            <div className='post__embed-container'>
-                <ExternalImage
-                    src={this.props.link}
-                    imageMetadata={this.props.imageMetadata}
-                >
-                    {(safeLink) => (
-                        <React.Fragment>
-                            <SizeAwareImage
-                                className='img-div attachment__image cursor--pointer'
-                                src={safeLink}
-                                dimensions={this.props.imageMetadata}
-                                showLoader={true}
-                                onClick={this.showModal}
-                            />
-                        </React.Fragment>
-                    )}
-                </ExternalImage>
-            </div>
-        );
-    }
-}
+    return (
+        <div className='post__embed-container'>
+            <ExternalImage
+                src={link}
+                imageMetadata={imageMetadata}
+            >
+                {(safeLink) => (
+                    <React.Fragment>
+                        <SizeAwareImage
+                            className='img-div attachment__image cursor--pointer'
+                            src={safeLink}
+                            dimensions={imageMetadata}
+                            showLoader={true}
+                            onClick={showModal}
+                        />
+                    </React.Fragment>
+                )}
+            </ExternalImage>
+        </div>
+    );
+};
+
+export default PostImage;