From ccba85bf2775a43685c9aef0e41aca6649d1f289 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Wed, 31 Mar 2021 12:32:52 +0200
Subject: [PATCH] Migrating contentBlock to functional component

---
 webapp/src/components/contentBlock.tsx | 136 ++++++++++++-------------
 1 file changed, 67 insertions(+), 69 deletions(-)

diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx
index 45a5f7806..73fc1e331 100644
--- a/webapp/src/components/contentBlock.tsx
+++ b/webapp/src/components/contentBlock.tsx
@@ -30,79 +30,77 @@ type Props = {
     intl: IntlShape
 }
 
-class ContentBlock extends React.PureComponent<Props> {
-    public render(): JSX.Element | null {
-        const {intl, card, contents, block, readonly} = this.props
+const ContentBlock = React.memo((props: Props): JSX.Element => {
+    const {intl, card, contents, block, readonly} = props
 
-        const index = contents.indexOf(block)
-        return (
-            <div className='ContentBlock octo-block'>
-                <div className='octo-block-margin'>
-                    {!this.props.readonly &&
-                        <MenuWrapper>
-                            <IconButton icon={<OptionsIcon/>}/>
-                            <Menu>
-                                {index > 0 &&
-                                    <Menu.Text
-                                        id='moveUp'
-                                        name={intl.formatMessage({id: 'ContentBlock.moveUp', defaultMessage: 'Move up'})}
-                                        icon={<SortUpIcon/>}
-                                        onClick={() => {
-                                            const contentOrder = contents.map((o) => o.id)
-                                            Utils.arrayMove(contentOrder, index, index - 1)
-                                            mutator.changeCardContentOrder(card, contentOrder)
-                                        }}
-                                    />}
-                                {index < (contents.length - 1) &&
-                                    <Menu.Text
-                                        id='moveDown'
-                                        name={intl.formatMessage({id: 'ContentBlock.moveDown', defaultMessage: 'Move down'})}
-                                        icon={<SortDownIcon/>}
-                                        onClick={() => {
-                                            const contentOrder = contents.map((o) => o.id)
-                                            Utils.arrayMove(contentOrder, index, index + 1)
-                                            mutator.changeCardContentOrder(card, contentOrder)
-                                        }}
-                                    />}
-                                <Menu.SubMenu
-                                    id='insertAbove'
-                                    name={intl.formatMessage({id: 'ContentBlock.insertAbove', defaultMessage: 'Insert above'})}
-                                    icon={<AddIcon/>}
-                                >
-                                    {contentRegistry.contentTypes.map((type) => (
-                                        <AddContentMenuItem
-                                            key={type}
-                                            type={type}
-                                            block={block}
-                                            card={card}
-                                            contents={contents}
-                                        />
-                                    ))}
-                                </Menu.SubMenu>
+    const index = contents.indexOf(block)
+    return (
+        <div className='ContentBlock octo-block'>
+            <div className='octo-block-margin'>
+                {!props.readonly &&
+                    <MenuWrapper>
+                        <IconButton icon={<OptionsIcon/>}/>
+                        <Menu>
+                            {index > 0 &&
                                 <Menu.Text
-                                    icon={<DeleteIcon/>}
-                                    id='delete'
-                                    name={intl.formatMessage({id: 'ContentBlock.Delete', defaultMessage: 'Delete'})}
+                                    id='moveUp'
+                                    name={intl.formatMessage({id: 'ContentBlock.moveUp', defaultMessage: 'Move up'})}
+                                    icon={<SortUpIcon/>}
                                     onClick={() => {
-                                        const description = intl.formatMessage({id: 'ContentBlock.DeleteAction', defaultMessage: 'delete'})
-                                        const contentOrder = contents.map((o) => o.id).filter((o) => o !== block.id)
-                                        mutator.performAsUndoGroup(async () => {
-                                            await mutator.deleteBlock(block, description)
-                                            await mutator.changeCardContentOrder(card, contentOrder, description)
-                                        })
+                                        const contentOrder = contents.map((o) => o.id)
+                                        Utils.arrayMove(contentOrder, index, index - 1)
+                                        mutator.changeCardContentOrder(card, contentOrder)
                                     }}
-                                />
-                            </Menu>
-                        </MenuWrapper>
-                    }
-                </div>
-                <ContentElement
-                    block={block}
-                    readonly={readonly}
-                />
+                                />}
+                            {index < (contents.length - 1) &&
+                                <Menu.Text
+                                    id='moveDown'
+                                    name={intl.formatMessage({id: 'ContentBlock.moveDown', defaultMessage: 'Move down'})}
+                                    icon={<SortDownIcon/>}
+                                    onClick={() => {
+                                        const contentOrder = contents.map((o) => o.id)
+                                        Utils.arrayMove(contentOrder, index, index + 1)
+                                        mutator.changeCardContentOrder(card, contentOrder)
+                                    }}
+                                />}
+                            <Menu.SubMenu
+                                id='insertAbove'
+                                name={intl.formatMessage({id: 'ContentBlock.insertAbove', defaultMessage: 'Insert above'})}
+                                icon={<AddIcon/>}
+                            >
+                                {contentRegistry.contentTypes.map((type) => (
+                                    <AddContentMenuItem
+                                        key={type}
+                                        type={type}
+                                        block={block}
+                                        card={card}
+                                        contents={contents}
+                                    />
+                                ))}
+                            </Menu.SubMenu>
+                            <Menu.Text
+                                icon={<DeleteIcon/>}
+                                id='delete'
+                                name={intl.formatMessage({id: 'ContentBlock.Delete', defaultMessage: 'Delete'})}
+                                onClick={() => {
+                                    const description = intl.formatMessage({id: 'ContentBlock.DeleteAction', defaultMessage: 'delete'})
+                                    const contentOrder = contents.map((o) => o.id).filter((o) => o !== block.id)
+                                    mutator.performAsUndoGroup(async () => {
+                                        await mutator.deleteBlock(block, description)
+                                        await mutator.changeCardContentOrder(card, contentOrder, description)
+                                    })
+                                }}
+                            />
+                        </Menu>
+                    </MenuWrapper>
+                }
             </div>
-        )
-    }
-}
+            <ContentElement
+                block={block}
+                readonly={readonly}
+            />
+        </div>
+    )
+})
 
 export default injectIntl(ContentBlock)