Expliting contents list card int its own component

webapp/src/components/cardDetail/cardDetail.tsx

@@ -6,7 +6,6 @@ import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 import {BlockIcons} from '../../blockIcons'
 import {BlockTypes} from '../../blocks/block'
 import {PropertyType} from '../../blocks/board'
-import {MutableTextBlock} from '../../blocks/textBlock'
 import mutator from '../../mutator'
 import {Utils} from '../../utils'
 import {BoardTree} from '../../viewModel/boardTree'
@@ -19,13 +18,14 @@ import MenuWrapper from '../../widgets/menuWrapper'
 import PropertyMenu from '../../widgets/propertyMenu'
 
 import BlockIconSelector from '../blockIconSelector'
-import './cardDetail.scss'
 import CommentsList from '../commentsList'
 import {ContentHandler, contentRegistry} from '../content/contentRegistry'
-import ContentBlock from '../contentBlock'
-import {MarkdownEditor} from '../markdownEditor'
 import PropertyValueElement from '../propertyValueElement'
 
+import CardDetailContents from './cardDetailContents'
+
+import './cardDetail.scss'
+
 type Props = {
     boardTree: BoardTree
     cardTree: CardTree
@@ -76,39 +76,6 @@ class CardDetail extends React.Component<Props, State> {
         }
         const {card, comments} = cardTree
 
-        let contentElements
-        if (cardTree.contents.length > 0) {
-            contentElements =
-                (<div className='octo-content'>
-                    {cardTree.contents.map((block) => (
-                        <ContentBlock
-                            key={block.id}
-                            block={block}
-                            card={card}
-                            contents={cardTree.contents}
-                            readonly={this.props.readonly}
-                        />
-                    ))}
-                </div>)
-        } else {
-            contentElements = (<div className='octo-content'>
-                <div className='octo-block'>
-                    <div className='octo-block-margin'/>
-                    {!this.props.readonly &&
-                        <MarkdownEditor
-                            text=''
-                            placeholderText='Add a description...'
-                            onBlur={(text) => {
-                                if (text) {
-                                    this.addTextBlock(text)
-                                }
-                            }}
-                        />
-                    }
-                </div>
-            </div>)
-        }
-
         const icon = card.icon
 
         return (
@@ -221,7 +188,10 @@ class CardDetail extends React.Component<Props, State> {
                 {/* Content blocks */}
 
                 <div className='CardDetail content fullwidth'>
-                    {contentElements}
+                    <CardDetailContents
+                        cardTree={this.props.cardTree}
+                        readonly={this.props.readonly}
+                    />
                 </div>
 
                 {!this.props.readonly &&
@@ -282,24 +252,6 @@ class CardDetail extends React.Component<Props, State> {
             await mutator.changeCardContentOrder(card, contentOrder, description)
         })
     }
-
-    private addTextBlock(text: string): void {
-        const {intl, cardTree} = this.props
-        const {card} = cardTree
-
-        const block = new MutableTextBlock()
-        block.parentId = card.id
-        block.rootId = card.rootId
-        block.title = text
-
-        const contentOrder = card.contentOrder.slice()
-        contentOrder.push(block.id)
-        mutator.performAsUndoGroup(async () => {
-            const description = intl.formatMessage({id: 'CardDetail.addCardText', defaultMessage: 'add card text'})
-            await mutator.insertBlock(block, description)
-            await mutator.changeCardContentOrder(card, contentOrder, description)
-        })
-    }
 }
 
 export default injectIntl(CardDetail)

webapp/src/components/cardDetail/cardDetailContents.tsx

@@ -0,0 +1,77 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+import {injectIntl, IntlShape} from 'react-intl'
+
+import {MutableTextBlock} from '../../blocks/textBlock'
+import mutator from '../../mutator'
+import {CardTree} from '../../viewModel/cardTree'
+import {Card} from '../../blocks/card'
+
+import ContentBlock from '../contentBlock'
+import {MarkdownEditor} from '../markdownEditor'
+
+type Props = {
+    cardTree: CardTree
+    intl: IntlShape
+    readonly: boolean
+}
+
+function addTextBlock(card: Card, intl: IntlShape, text: string): void {
+    const block = new MutableTextBlock()
+    block.parentId = card.id
+    block.rootId = card.rootId
+    block.title = text
+
+    const contentOrder = card.contentOrder.slice()
+    contentOrder.push(block.id)
+    mutator.performAsUndoGroup(async () => {
+        const description = intl.formatMessage({id: 'CardDetail.addCardText', defaultMessage: 'add card text'})
+        await mutator.insertBlock(block, description)
+        await mutator.changeCardContentOrder(card, contentOrder, description)
+    })
+}
+
+const CardDetailContents = React.memo((props: Props) => {
+    const {cardTree} = props
+    if (!cardTree) {
+        return null
+    }
+    const {card} = cardTree
+
+    if (cardTree.contents.length > 0) {
+        return (
+            <div className='octo-content'>
+                {cardTree.contents.map((block) => (
+                    <ContentBlock
+                        key={block.id}
+                        block={block}
+                        card={card}
+                        contents={cardTree.contents}
+                        readonly={props.readonly}
+                    />
+                ))}
+            </div>
+        )
+    }
+    return (
+        <div className='octo-content'>
+            <div className='octo-block'>
+                <div className='octo-block-margin'/>
+                {!props.readonly &&
+                    <MarkdownEditor
+                        text=''
+                        placeholderText='Add a description...'
+                        onBlur={(text) => {
+                            if (text) {
+                                addTextBlock(card, props.intl, text)
+                            }
+                        }}
+                    />
+                }
+            </div>
+        </div>
+    )
+})
+
+export default injectIntl(CardDetailContents)