Extracting cardDetailsContentsMenu component

webapp/src/components/cardDetail/cardDetail.tsx

@@ -4,22 +4,18 @@ import React from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import {BlockIcons} from '../../blockIcons'
-import {BlockTypes} from '../../blocks/block'
 import mutator from '../../mutator'
-import {Utils} from '../../utils'
 import {BoardTree} from '../../viewModel/boardTree'
 import {CardTree} from '../../viewModel/cardTree'
 import Button from '../../widgets/buttons/button'
 import Editable from '../../widgets/editable'
 import EmojiIcon from '../../widgets/icons/emoji'
-import Menu from '../../widgets/menu'
-import MenuWrapper from '../../widgets/menuWrapper'
 
 import BlockIconSelector from '../blockIconSelector'
 import CommentsList from '../commentsList'
-import {ContentHandler, contentRegistry} from '../content/contentRegistry'
 
 import CardDetailContents from './cardDetailContents'
+import CardDetailContentsMenu from './cardDetailContentsMenu'
 import CardDetailProperties from './cardDetailProperties'
 
 import './cardDetail.scss'
@@ -149,63 +145,11 @@ class CardDetail extends React.Component<Props, State> {
                 </div>
 
                 {!this.props.readonly &&
-                    <div className='CardDetail content add-content'>
-                        <MenuWrapper>
-                            <Button>
-                                <FormattedMessage
-                                    id='CardDetail.add-content'
-                                    defaultMessage='Add content'
-                                />
-                            </Button>
-                            <Menu position='top'>
-                                {contentRegistry.contentTypes.map((type) => this.addContentMenu(type))}
-                            </Menu>
-                        </MenuWrapper>
-                    </div>
+                    <CardDetailContentsMenu card={this.props.cardTree.card}/>
                 }
             </>
         )
     }
-
-    private addContentMenu(type: BlockTypes): JSX.Element {
-        const {intl} = this.props
-
-        const handler = contentRegistry.getHandler(type)
-        if (!handler) {
-            Utils.logError(`addContentMenu, unknown content type: ${type}`)
-            return <></>
-        }
-
-        return (
-            <Menu.Text
-                key={type}
-                id={type}
-                name={handler.getDisplayText(intl)}
-                icon={handler.getIcon()}
-                onClick={() => {
-                    this.addBlock(handler)
-                }}
-            />
-        )
-    }
-
-    private async addBlock(handler: ContentHandler) {
-        const {intl, cardTree} = this.props
-        const {card} = cardTree
-
-        const newBlock = await handler.createBlock()
-        newBlock.parentId = card.id
-        newBlock.rootId = card.rootId
-
-        const contentOrder = card.contentOrder.slice()
-        contentOrder.push(newBlock.id)
-        const typeName = handler.getDisplayText(intl)
-        const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
-        mutator.performAsUndoGroup(async () => {
-            await mutator.insertBlock(newBlock, description)
-            await mutator.changeCardContentOrder(card, contentOrder, description)
-        })
-    }
 }
 
 export default injectIntl(CardDetail)

webapp/src/components/cardDetail/cardDetailContentsMenu.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
+
+import {BlockTypes} from '../../blocks/block'
+import mutator from '../../mutator'
+import {Utils} from '../../utils'
+import {Card} from '../../blocks/card'
+import Button from '../../widgets/buttons/button'
+import Menu from '../../widgets/menu'
+import MenuWrapper from '../../widgets/menuWrapper'
+
+import {ContentHandler, contentRegistry} from '../content/contentRegistry'
+
+function addContentMenu(card: Card, intl: IntlShape, type: BlockTypes): JSX.Element {
+    const handler = contentRegistry.getHandler(type)
+    if (!handler) {
+        Utils.logError(`addContentMenu, unknown content type: ${type}`)
+        return <></>
+    }
+
+    return (
+        <Menu.Text
+            key={type}
+            id={type}
+            name={handler.getDisplayText(intl)}
+            icon={handler.getIcon()}
+            onClick={() => {
+                addBlock(card, intl, handler)
+            }}
+        />
+    )
+}
+
+async function addBlock(card: Card, intl: IntlShape, handler: ContentHandler) {
+    const newBlock = await handler.createBlock()
+    newBlock.parentId = card.id
+    newBlock.rootId = card.rootId
+
+    const contentOrder = card.contentOrder.slice()
+    contentOrder.push(newBlock.id)
+    const typeName = handler.getDisplayText(intl)
+    const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
+    mutator.performAsUndoGroup(async () => {
+        await mutator.insertBlock(newBlock, description)
+        await mutator.changeCardContentOrder(card, contentOrder, description)
+    })
+}
+
+type Props = {
+    card: Card
+    intl: IntlShape
+}
+
+const CardDetailContentsMenu = React.memo((props: Props) => {
+    return (
+        <div className='CardDetail content add-content'>
+            <MenuWrapper>
+                <Button>
+                    <FormattedMessage
+                        id='CardDetail.add-content'
+                        defaultMessage='Add content'
+                    />
+                </Button>
+                <Menu position='top'>
+                    {contentRegistry.contentTypes.map((type) => addContentMenu(props.card, props.intl, type))}
+                </Menu>
+            </MenuWrapper>
+        </div>
+    )
+})
+
+export default injectIntl(CardDetailContentsMenu)