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> {
+const PostImage = ({
-    showModal = (e: (KeyboardEvent<HTMLImageElement> | MouseEvent<HTMLElement>), link = '') => {
+    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: [{
+                fileInfos: [
+                    {
                         has_preview_image: false,
                         link,
-                    extension: this.props.imageMetadata.format,
+                        extension: imageMetadata.format,
-                    name: this.props.link,
+                        name: link,
-                }],
+                    },
+                ],
             },
         });
-    };
+    }, [openModal, imageMetadata.format, post]);
 
-    render() {
     return (
         <div className='post__embed-container'>
             <ExternalImage
-                    src={this.props.link}
+                src={link}
-                    imageMetadata={this.props.imageMetadata}
+                imageMetadata={imageMetadata}
             >
                 {(safeLink) => (
                     <React.Fragment>
                         <SizeAwareImage
                             className='img-div attachment__image cursor--pointer'
                             src={safeLink}
-                                dimensions={this.props.imageMetadata}
+                            dimensions={imageMetadata}
                             showLoader={true}
-                                onClick={this.showModal}
+                            onClick={showModal}
                         />
                     </React.Fragment>
                 )}
             </ExternalImage>
         </div>
     );
-    }
+};
-}
+
+export default PostImage;