Migrating viewHeader to functional component

webapp/src/components/viewHeader/viewHeader.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useState} from 'react'
 import {FormattedMessage} from 'react-intl'
 
 import ViewMenu from '../../components/viewMenu'
@@ -36,22 +36,10 @@ type Props = {
     readonly: boolean
 }
 
-type State = {
+const ViewHeader = React.memo((props: Props) => {
-    showFilter: boolean
+    const [showFilter, setShowFilter] = useState(false)
-}
 
-class ViewHeader extends React.Component<Props, State> {
+    const {boardTree, showView, withGroupBy} = props
-    shouldComponentUpdate(): boolean {
-        return true
-    }
-
-    constructor(props: Props) {
-        super(props)
-        this.state = {showFilter: false}
-    }
-
-    render(): JSX.Element {
-        const {boardTree, showView, withGroupBy} = this.props
     const {board, activeView} = boardTree
 
     const hasFilter = activeView.filter && activeView.filter.filters?.length > 0
@@ -65,7 +53,7 @@ class ViewHeader extends React.Component<Props, State> {
                 onChanged={(text) => {
                     mutator.changeTitle(activeView, text)
                 }}
-                    readonly={this.props.readonly}
+                readonly={props.readonly}
             />
             <MenuWrapper>
                 <IconButton icon={<DropdownIcon/>}/>
@@ -73,27 +61,27 @@ class ViewHeader extends React.Component<Props, State> {
                     board={board}
                     boardTree={boardTree}
                     showView={showView}
-                        readonly={this.props.readonly}
+                    readonly={props.readonly}
                 />
             </MenuWrapper>
 
             <div className='octo-spacer'/>
 
-                {!this.props.readonly &&
+            {!props.readonly &&
             <>
                 {/* Card properties */}
 
                 <ViewHeaderPropertiesMenu
-                        properties={boardTree.board.cardProperties}
+                    properties={board.cardProperties}
-                        activeView={boardTree.activeView}
+                    activeView={activeView}
                 />
 
                 {/* Group by */}
 
                 {withGroupBy &&
                     <ViewHeaderGroupByMenu
-                            properties={boardTree.board.cardProperties}
+                        properties={board.cardProperties}
-                            activeView={boardTree.activeView}
+                        activeView={activeView}
                         groupByPropertyName={boardTree.groupByProperty?.name}
                     />}
 
@@ -102,25 +90,25 @@ class ViewHeader extends React.Component<Props, State> {
                 <ModalWrapper>
                     <Button
                         active={hasFilter}
-                            onClick={this.showFilterDialog}
+                        onClick={() => setShowFilter(true)}
                     >
                         <FormattedMessage
                             id='ViewHeader.filter'
                             defaultMessage='Filter'
                         />
                     </Button>
-                        {this.state.showFilter &&
+                    {showFilter &&
                     <FilterComponent
                         boardTree={boardTree}
-                            onClose={this.hideFilterDialog}
+                        onClose={() => setShowFilter(false)}
                     />}
                 </ModalWrapper>
 
                 {/* Sort */}
 
                 <ViewHeaderSortMenu
-                        properties={boardTree.board.cardProperties}
+                    properties={board.cardProperties}
-                        activeView={boardTree.activeView}
+                    activeView={activeView}
                     orderedCards={boardTree.orderedCards()}
                 />
             </>
@@ -129,40 +117,31 @@ class ViewHeader extends React.Component<Props, State> {
             {/* Search */}
 
             <ViewHeaderSearch
-                    boardTree={this.props.boardTree}
+                boardTree={boardTree}
-                    setSearchText={this.props.setSearchText}
+                setSearchText={props.setSearchText}
             />
 
             {/* Options menu */}
 
-                {!this.props.readonly &&
+            {!props.readonly &&
             <>
                 <ViewHeaderActionsMenu
-                        boardTree={this.props.boardTree}
+                    boardTree={boardTree}
                 />
 
                 {/* New card button */}
 
                 <NewCardButton
-                        boardTree={this.props.boardTree}
+                    boardTree={boardTree}
-                        addCard={this.props.addCard}
+                    addCard={props.addCard}
-                        addCardFromTemplate={this.props.addCardFromTemplate}
+                    addCardFromTemplate={props.addCardFromTemplate}
-                        addCardTemplate={this.props.addCardTemplate}
+                    addCardTemplate={props.addCardTemplate}
-                        editCardTemplate={this.props.editCardTemplate}
+                    editCardTemplate={props.editCardTemplate}
                 />
             </>
             }
         </div>
     )
-    }
+})
-
-    private showFilterDialog = () => {
-        this.setState({showFilter: true})
-    }
-
-    private hideFilterDialog = () => {
-        this.setState({showFilter: false})
-    }
-}
 
 export default ViewHeader