Fix prop types for "markdown_image_expand" component (#23836)

webapp/channels/src/components/markdown_image_expand/index.ts

@@ -1,28 +1,37 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {bindActionCreators, Dispatch} from 'redux';
+import {ReactNode} from 'react';
+import {connect, ConnectedProps} from 'react-redux';
 
-import {connect} from 'react-redux';
+import {Post} from '@mattermost/types/posts';
-
-import {GenericAction} from 'mattermost-redux/types/actions';
 
 import {toggleInlineImageVisibility} from 'actions/post_actions';
 import {isInlineImageVisible} from 'selectors/posts';
 import {GlobalState} from 'types/store';
 
-import MarkdownImageExpand, {Props} from './markdown_image_expand';
+import MarkdownImageExpand from './markdown_image_expand';
 
-const mapStateToProps = (state: GlobalState, {postId, imageKey}: Props) => {
+export type OwnProps = {
+    postId: Post['id'];
+    imageKey: string;
+    alt: string;
+    onToggle?: (visible: boolean) => void;
+    children: ReactNode;
+}
+
+const mapStateToProps = (state: GlobalState, {postId, imageKey}: OwnProps) => {
     return {
         isExpanded: isInlineImageVisible(state, postId, imageKey),
     };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch<GenericAction>) => {
+const mapDispatchToProps = {
-    return {
+    toggleInlineImageVisibility,
-        actions: bindActionCreators({toggleInlineImageVisibility}, dispatch),
-    };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(MarkdownImageExpand);
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export default connector(MarkdownImageExpand);

webapp/channels/src/components/markdown_image_expand/markdown_image_expand.test.tsx

@@ -17,7 +17,7 @@ describe('components/MarkdownImageExpand', () => {
                 isExpanded={false}
                 imageKey={'1'}
                 onToggle={toggleHandler}
-                actions={{toggleInlineImageVisibility: imageCollapseHandler}}
+                toggleInlineImageVisibility={imageCollapseHandler}
             >{'An image to expand'}</MarkdownImageExpand>,
         );
 
@@ -34,7 +34,7 @@ describe('components/MarkdownImageExpand', () => {
                 isExpanded={true}
                 imageKey={'1'}
                 onToggle={toggleHandler}
-                actions={{toggleInlineImageVisibility: imageCollapseHandler}}
+                toggleInlineImageVisibility={imageCollapseHandler}
             >{'An image to expand'}</MarkdownImageExpand>,
         );
 
@@ -51,7 +51,7 @@ describe('components/MarkdownImageExpand', () => {
                 isExpanded={true}
                 imageKey={'1'}
                 onToggle={toggleHandler}
-                actions={{toggleInlineImageVisibility: imageCollapseHandler}}
+                toggleInlineImageVisibility={imageCollapseHandler}
             >{'An image to expand'}</MarkdownImageExpand>,
         );
 
@@ -70,7 +70,7 @@ describe('components/MarkdownImageExpand', () => {
                 isExpanded={false}
                 imageKey={'1'}
                 onToggle={toggleHandler}
-                actions={{toggleInlineImageVisibility: imageCollapseHandler}}
+                toggleInlineImageVisibility={imageCollapseHandler}
             >{'An image to expand'}</MarkdownImageExpand>,
         );
 

webapp/channels/src/components/markdown_image_expand/markdown_image_expand.tsx

@@ -2,25 +2,18 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect} from 'react';
+
+import type {OwnProps, PropsFromRedux} from './index';
+
 import './markdown_image_expand.scss';
 
-export type Props = {
+type Props = OwnProps & PropsFromRedux;
-    alt: string;
-    imageKey: string;
-    children: React.ReactNode;
-    isExpanded: boolean;
-    postId: string;
-    onToggle?: (isExpanded: boolean) => void;
-    actions: {
-        toggleInlineImageVisibility: (postId: string, imageKey: string) => void;
-    };
-};
-
-const MarkdownImageExpand: React.FC<Props> = ({children, alt, isExpanded, postId, actions, onToggle, imageKey}: Props) => {
-    const {toggleInlineImageVisibility} = actions;
 
+const MarkdownImageExpand: React.FC<Props> = ({children, alt, isExpanded, postId, toggleInlineImageVisibility, onToggle, imageKey}: Props) => {
     useEffect(() => {
-        onToggle?.(isExpanded);
+        if (onToggle) {
+            onToggle(isExpanded);
+        }
     }, [isExpanded]);
 
     const handleToggleButtonClick = () => {