From 52956c3587b1982601c6877c514ee41fbd6be2e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sat, 24 Oct 2020 10:35:12 +0200
Subject: [PATCH] Moving the title from board/table into an independent
 component

---
 webapp/src/components/boardComponent.tsx |  49 +---------
 webapp/src/components/tableComponent.tsx |  78 +---------------
 webapp/src/components/viewTitle.tsx      | 114 +++++++++++++++++++++++
 3 files changed, 119 insertions(+), 122 deletions(-)
 create mode 100644 webapp/src/components/viewTitle.tsx

diff --git a/webapp/src/components/boardComponent.tsx b/webapp/src/components/boardComponent.tsx
index d30143ec4..fcc448223 100644
--- a/webapp/src/components/boardComponent.tsx
+++ b/webapp/src/components/boardComponent.tsx
@@ -21,6 +21,7 @@ import {CardDialog} from './cardDialog'
 import {Editable} from './editable'
 import RootPortal from './rootPortal'
 import ViewHeader from './viewHeader'
+import ViewTitle from './viewTitle'
 
 type Props = {
     boardTree?: BoardTree
@@ -32,7 +33,6 @@ type State = {
     isSearching: boolean
     shownCard?: Card
     viewMenu: boolean
-    isHoverOnCover: boolean
     selectedCards: Card[]
     showFilter: boolean
 }
@@ -67,7 +67,6 @@ class BoardComponent extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props)
         this.state = {
-            isHoverOnCover: false,
             isSearching: Boolean(this.props.boardTree?.getSearchText()),
             viewMenu: false,
             selectedCards: [],
@@ -120,51 +119,7 @@ class BoardComponent extends React.Component<Props, State> {
                 </RootPortal>}
 
                 <div className='octo-frame'>
-                    <div
-                        className='octo-hovercontrols'
-                        onMouseOver={() => {
-                            this.setState({...this.state, isHoverOnCover: true})
-                        }}
-                        onMouseLeave={() => {
-                            this.setState({...this.state, isHoverOnCover: false})
-                        }}
-                    >
-                        <Button
-                            style={{display: (!board.icon && this.state.isHoverOnCover) ? null : 'none'}}
-                            onClick={() => {
-                                const newIcon = BlockIcons.shared.randomIcon()
-                                mutator.changeIcon(board, newIcon)
-                            }}
-                        >Add Icon</Button>
-                    </div>
-
-                    <div className='octo-icontitle'>
-                        {board.icon ?
-                            <MenuWrapper>
-                                <div className='octo-button octo-icon'>{board.icon}</div>
-                                <Menu>
-                                    <Menu.Text
-                                        id='random'
-                                        name='Random'
-                                        onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
-                                    />
-                                    <Menu.Text
-                                        id='remove'
-                                        name='Remove Icon'
-                                        onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
-                                    />
-                                </Menu>
-                            </MenuWrapper> :
-                            undefined}
-                        <Editable
-                            className='title'
-                            text={board.title}
-                            placeholderText='Untitled Board'
-                            onChanged={(text) => {
-                                mutator.changeTitle(board, text)
-                            }}
-                        />
-                    </div>
+                    <ViewTitle board={board}/>
 
                     <div className='octo-board'>
                         <ViewHeader
diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx
index 4ace73648..b19f4f00a 100644
--- a/webapp/src/components/tableComponent.tsx
+++ b/webapp/src/components/tableComponent.tsx
@@ -10,15 +10,13 @@ import {BoardTree} from '../viewModel/boardTree'
 import {Menu as OldMenu} from '../menu'
 import mutator from '../mutator'
 import {Utils} from '../utils'
-import Menu from '../widgets/menu'
-import MenuWrapper from '../widgets/menuWrapper'
 
-import Button from './button'
 import {CardDialog} from './cardDialog'
 import {Editable} from './editable'
 import RootPortal from './rootPortal'
 import {TableRow} from './tableRow'
 import ViewHeader from './viewHeader'
+import ViewTitle from './viewTitle'
 
 type Props = {
     boardTree?: BoardTree
@@ -27,7 +25,6 @@ type Props = {
 }
 
 type State = {
-    isHoverOnCover: boolean
     isSearching: boolean
     shownCard?: Card
     viewMenu: boolean
@@ -42,7 +39,7 @@ class TableComponent extends React.Component<Props, State> {
 
     constructor(props: Props) {
         super(props)
-        this.state = {isHoverOnCover: false, isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false, showFilter: false}
+        this.state = {isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false, showFilter: false}
     }
 
     shouldComponentUpdate(): boolean {
@@ -84,76 +81,7 @@ class TableComponent extends React.Component<Props, State> {
                     />
                 </RootPortal>}
                 <div className='octo-frame'>
-                    <div
-                        className='octo-hovercontrols'
-                        onMouseOver={() => {
-                            this.setState({...this.state, isHoverOnCover: true})
-                        }}
-                        onMouseLeave={() => {
-                            this.setState({...this.state, isHoverOnCover: false})
-                        }}
-                    >
-                        <Button
-                            style={{display: (!board.icon && this.state.isHoverOnCover) ? null : 'none'}}
-                            onClick={() => {
-                                const newIcon = BlockIcons.shared.randomIcon()
-                                mutator.changeIcon(board, newIcon)
-                            }}
-                        >
-                            <FormattedMessage
-                                id='TableComponent.add-icon'
-                                defaultMessage='Add Icon'
-                            />
-                        </Button>
-                    </div>
-
-                    <div className='octo-icontitle'>
-                        {board.icon &&
-                            <MenuWrapper>
-                                <div className='octo-button octo-icon'>{board.icon}</div>
-                                <Menu>
-                                    <FormattedMessage
-                                        id='TableComponent.random-icon'
-                                        defaultMessage='Random'
-                                    >
-                                        {(text: string) => (
-                                            <Menu.Text
-                                                id='random'
-                                                name={text}
-                                                onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
-                                            />
-                                        )}
-                                    </FormattedMessage>
-                                    <FormattedMessage
-                                        id='TableComponent.remove-icon'
-                                        defaultMessage='Remove Icon'
-                                    >
-                                        {(text: string) => (
-                                            <Menu.Text
-                                                id='remove'
-                                                name={text}
-                                                onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
-                                            />
-                                        )}
-                                    </FormattedMessage>
-                                </Menu>
-                            </MenuWrapper>}
-                        <FormattedMessage
-                            id='TableComponent.remove-icon'
-                            defaultMessage='Remove Icon'
-                        >
-                            {(placeholder: string) => (
-                                <Editable
-                                    className='title'
-                                    text={board.title}
-                                    placeholderText={placeholder}
-                                    onChanged={(text) => {
-                                        mutator.changeTitle(board, text)
-                                    }}
-                                />
-                            )}
-                        </FormattedMessage>
-                    </div>
+                    <ViewTitle board={board}/>
 
                     <div className='octo-table'>
                         <ViewHeader
diff --git a/webapp/src/components/viewTitle.tsx b/webapp/src/components/viewTitle.tsx
new file mode 100644
index 000000000..26abcfb2e
--- /dev/null
+++ b/webapp/src/components/viewTitle.tsx
@@ -0,0 +1,114 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+import {injectIntl, IntlShape, FormattedMessage} from 'react-intl'
+
+import {BlockIcons} from '../blockIcons'
+import {Board} from '../blocks/board'
+import mutator from '../mutator'
+import Menu from '../widgets/menu'
+import MenuWrapper from '../widgets/menuWrapper'
+
+import {Editable} from './editable'
+import Button from './button'
+
+type Props = {
+    board: Board
+    intl: IntlShape
+}
+
+type State = {
+    isHoverOnCover: boolean
+}
+
+class ViewTitle extends React.Component<Props, State> {
+    shouldComponentUpdate(): boolean {
+        return true
+    }
+
+    constructor(props: Props) {
+        super(props)
+        this.state = {isHoverOnCover: false}
+    }
+
+    render(): JSX.Element {
+        const {board} = this.props
+
+        return (
+            <>
+                <div
+                    className='octo-hovercontrols'
+                    onMouseOver={() => {
+                        this.setState({isHoverOnCover: true})
+                    }}
+                    onMouseLeave={() => {
+                        this.setState({isHoverOnCover: false})
+                    }}
+                >
+                    <Button
+                        style={{display: (!board.icon && this.state.isHoverOnCover) ? null : 'none'}}
+                        onClick={() => {
+                            const newIcon = BlockIcons.shared.randomIcon()
+                            mutator.changeIcon(board, newIcon)
+                        }}
+                    >
+                        <FormattedMessage
+                            id='TableComponent.add-icon'
+                            defaultMessage='Add Icon'
+                        />
+                    </Button>
+                </div>
+
+                <div className='octo-icontitle'>
+                    {board.icon &&
+                        <MenuWrapper>
+                            <div className='octo-button octo-icon'>{board.icon}</div>
+                            <Menu>
+                                <FormattedMessage
+                                    id='TableComponent.random-icon'
+                                    defaultMessage='Random'
+                                >
+                                    {(text: string) => (
+                                        <Menu.Text
+                                            id='random'
+                                            name={text}
+                                            onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
+                                        />
+                                    )}
+                                </FormattedMessage>
+                                <FormattedMessage
+                                    id='TableComponent.remove-icon'
+                                    defaultMessage='Remove Icon'
+                                >
+                                    {(text: string) => (
+                                        <Menu.Text
+                                            id='remove'
+                                            name={text}
+                                            onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
+                                        />
+                                    )}
+                                </FormattedMessage>
+                            </Menu>
+                        </MenuWrapper>}
+                    <FormattedMessage
+                        id='TableComponent.remove-icon'
+                        defaultMessage='Remove Icon'
+                    >
+                        {(placeholder: string) => (
+                            <Editable
+                                className='title'
+                                text={board.title}
+                                placeholderText={placeholder}
+                                onChanged={(text) => {
+                                    mutator.changeTitle(board, text)
+                                }}
+                            />
+                        )}
+                    </FormattedMessage>
+                </div>
+            </>
+        )
+    }
+}
+
+export default injectIntl(ViewTitle)