From 3f695b4659725a0557e470fc11bfeb5a3ea9985c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Mon, 29 Mar 2021 12:27:55 +0200
Subject: [PATCH] Extracting card detail properties in its own component

---
 .../src/components/cardDetail/cardDetail.tsx  | 58 ++------------
 .../cardDetail/cardDetailProperties.tsx       | 80 +++++++++++++++++++
 2 files changed, 86 insertions(+), 52 deletions(-)
 create mode 100644 webapp/src/components/cardDetail/cardDetailProperties.tsx

diff --git a/webapp/src/components/cardDetail/cardDetail.tsx b/webapp/src/components/cardDetail/cardDetail.tsx
index 9cc811795..72f78ed82 100644
--- a/webapp/src/components/cardDetail/cardDetail.tsx
+++ b/webapp/src/components/cardDetail/cardDetail.tsx
@@ -5,7 +5,6 @@ import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import {BlockIcons} from '../../blockIcons'
 import {BlockTypes} from '../../blocks/block'
-import {PropertyType} from '../../blocks/board'
 import mutator from '../../mutator'
 import {Utils} from '../../utils'
 import {BoardTree} from '../../viewModel/boardTree'
@@ -15,14 +14,13 @@ import Editable from '../../widgets/editable'
 import EmojiIcon from '../../widgets/icons/emoji'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
-import PropertyMenu from '../../widgets/propertyMenu'
 
 import BlockIconSelector from '../blockIconSelector'
 import CommentsList from '../commentsList'
 import {ContentHandler, contentRegistry} from '../content/contentRegistry'
-import PropertyValueElement from '../propertyValueElement'
 
 import CardDetailContents from './cardDetailContents'
+import CardDetailProperties from './cardDetailProperties'
 
 import './cardDetail.scss'
 
@@ -120,55 +118,11 @@ class CardDetail extends React.Component<Props, State> {
 
                     {/* Property list */}
 
-                    <div className='octo-propertylist'>
-                        {board.cardProperties.map((propertyTemplate) => {
-                            const propertyValue = card.properties[propertyTemplate.id]
-                            return (
-                                <div
-                                    key={propertyTemplate.id + '-' + propertyTemplate.type + '-' + propertyValue}
-                                    className='octo-propertyrow'
-                                >
-                                    {this.props.readonly && <div className='octo-propertyname'>{propertyTemplate.name}</div>}
-                                    {!this.props.readonly &&
-                                        <MenuWrapper>
-                                            <div className='octo-propertyname'><Button>{propertyTemplate.name}</Button></div>
-                                            <PropertyMenu
-                                                propertyId={propertyTemplate.id}
-                                                propertyName={propertyTemplate.name}
-                                                propertyType={propertyTemplate.type}
-                                                onNameChanged={(newName: string) => mutator.renameProperty(board, propertyTemplate.id, newName)}
-                                                onTypeChanged={(newType: PropertyType) => mutator.changePropertyType(boardTree, propertyTemplate, newType)}
-                                                onDelete={(id: string) => mutator.deleteProperty(boardTree, id)}
-                                            />
-                                        </MenuWrapper>
-                                    }
-                                    <PropertyValueElement
-                                        readOnly={this.props.readonly}
-                                        card={card}
-                                        boardTree={boardTree}
-                                        propertyTemplate={propertyTemplate}
-                                        emptyDisplayValue='Empty'
-                                    />
-                                </div>
-                            )
-                        })}
-
-                        {!this.props.readonly &&
-                            <div className='octo-propertyname add-property'>
-                                <Button
-                                    onClick={async () => {
-                                        // TODO: Show UI
-                                        await mutator.insertPropertyTemplate(boardTree)
-                                    }}
-                                >
-                                    <FormattedMessage
-                                        id='CardDetail.add-property'
-                                        defaultMessage='+ Add a property'
-                                    />
-                                </Button>
-                            </div>
-                        }
-                    </div>
+                    <CardDetailProperties
+                        boardTree={this.props.boardTree}
+                        cardTree={this.props.cardTree}
+                        readonly={this.props.readonly}
+                    />
 
                     {/* Comments */}
 
diff --git a/webapp/src/components/cardDetail/cardDetailProperties.tsx b/webapp/src/components/cardDetail/cardDetailProperties.tsx
new file mode 100644
index 000000000..607e9003f
--- /dev/null
+++ b/webapp/src/components/cardDetail/cardDetailProperties.tsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+import {FormattedMessage} from 'react-intl'
+
+import {PropertyType} from '../../blocks/board'
+import mutator from '../../mutator'
+import {BoardTree} from '../../viewModel/boardTree'
+import {CardTree} from '../../viewModel/cardTree'
+import Button from '../../widgets/buttons/button'
+import MenuWrapper from '../../widgets/menuWrapper'
+import PropertyMenu from '../../widgets/propertyMenu'
+
+import PropertyValueElement from '../propertyValueElement'
+
+type Props = {
+    boardTree: BoardTree
+    cardTree: CardTree
+    readonly: boolean
+}
+
+const CardDetailProperties = React.memo((props: Props) => {
+    const {boardTree, cardTree} = props
+    const {board} = boardTree
+    const {card} = cardTree
+
+    return (
+        <div className='octo-propertylist'>
+            {board.cardProperties.map((propertyTemplate) => {
+                const propertyValue = card.properties[propertyTemplate.id]
+                return (
+                    <div
+                        key={propertyTemplate.id + '-' + propertyTemplate.type + '-' + propertyValue}
+                        className='octo-propertyrow'
+                    >
+                        {props.readonly && <div className='octo-propertyname'>{propertyTemplate.name}</div>}
+                        {!props.readonly &&
+                            <MenuWrapper>
+                                <div className='octo-propertyname'><Button>{propertyTemplate.name}</Button></div>
+                                <PropertyMenu
+                                    propertyId={propertyTemplate.id}
+                                    propertyName={propertyTemplate.name}
+                                    propertyType={propertyTemplate.type}
+                                    onNameChanged={(newName: string) => mutator.renameProperty(board, propertyTemplate.id, newName)}
+                                    onTypeChanged={(newType: PropertyType) => mutator.changePropertyType(boardTree, propertyTemplate, newType)}
+                                    onDelete={(id: string) => mutator.deleteProperty(boardTree, id)}
+                                />
+                            </MenuWrapper>
+                        }
+                        <PropertyValueElement
+                            readOnly={props.readonly}
+                            card={card}
+                            boardTree={boardTree}
+                            propertyTemplate={propertyTemplate}
+                            emptyDisplayValue='Empty'
+                        />
+                    </div>
+                )
+            })}
+
+            {!props.readonly &&
+                <div className='octo-propertyname add-property'>
+                    <Button
+                        onClick={async () => {
+                            // TODO: Show UI
+                            await mutator.insertPropertyTemplate(boardTree)
+                        }}
+                    >
+                        <FormattedMessage
+                            id='CardDetail.add-property'
+                            defaultMessage='+ Add a property'
+                        />
+                    </Button>
+                </div>
+            }
+        </div>
+    )
+})
+
+export default CardDetailProperties