Migrating card detail to functional component

webapp/src/components/cardDetail/cardDetail.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, useRef, useEffect} from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import {BlockIcons} from '../../blockIcons'
@@ -27,49 +27,35 @@ type Props = {
     readonly: boolean
 }
 
-type State = {
-    title: string
-}
+const CardDetail = (props: Props): JSX.Element|null => {
+    const {cardTree} = props
+    const [title, setTitle] = useState(cardTree.card.title)
+    const titleRef = useRef<Editable>(null)
+    const titleValueRef = useRef(title)
+    titleValueRef.current = title
 
-class CardDetail extends React.Component<Props, State> {
-    private titleRef = React.createRef<Editable>()
+    useEffect(() => {
+        if (!title) {
+            titleRef.current?.focus()
+        }
+    }, [])
 
-    shouldComponentUpdate(): boolean {
-        return true
+    useEffect(() => {
+        return () => {
+            if (titleValueRef.current !== cardTree?.card.title) {
+                mutator.changeTitle(card, titleValueRef.current)
             }
+        }
+    }, [])
 
-    componentDidMount(): void {
-        if (!this.state.title) {
-            this.titleRef.current?.focus()
-        }
-    }
-
-    componentWillUnmount(): void {
-        const {cardTree} = this.props
-        if (!cardTree) {
-            return
-        }
-        const {card} = cardTree
-        if (this.state.title !== card.title) {
-            mutator.changeTitle(card, this.state.title)
-        }
-    }
-
-    constructor(props: Props) {
-        super(props)
-        this.state = {
-            title: props.cardTree.card.title,
-        }
-    }
-
-    render() {
-        const {cardTree} = this.props
     if (!cardTree) {
         return null
     }
+
     const {card, comments} = cardTree
 
-        const icon = card.icon
+    // componentWillUnmount(): void {
+    // }
 
     return (
         <>
@@ -77,9 +63,9 @@ class CardDetail extends React.Component<Props, State> {
                 <BlockIconSelector
                     block={card}
                     size='l'
-                        readonly={this.props.readonly}
+                    readonly={props.readonly}
                 />
-                    {!this.props.readonly && !icon &&
+                {!props.readonly && !card.icon &&
                     <div className='add-buttons'>
                         <Button
                             onClick={() => {
@@ -96,32 +82,32 @@ class CardDetail extends React.Component<Props, State> {
                     </div>}
 
                 <Editable
-                        ref={this.titleRef}
+                    ref={titleRef}
                     className='title'
-                        value={this.state.title}
+                    value={title}
                     placeholderText='Untitled'
-                        onChange={(title: string) => this.setState({title})}
+                    onChange={(title: string) => setTitle(title)}
                     saveOnEsc={true}
                     onSave={() => {
-                            if (this.state.title !== this.props.cardTree.card.title) {
-                                mutator.changeTitle(card, this.state.title)
+                        if (title !== props.cardTree.card.title) {
+                            mutator.changeTitle(card, title)
                         }
                     }}
-                        onCancel={() => this.setState({title: this.props.cardTree.card.title})}
-                        readonly={this.props.readonly}
+                    onCancel={() => setTitle(props.cardTree.card.title)}
+                    readonly={props.readonly}
                 />
 
                 {/* Property list */}
 
                 <CardDetailProperties
-                        boardTree={this.props.boardTree}
-                        cardTree={this.props.cardTree}
-                        readonly={this.props.readonly}
+                    boardTree={props.boardTree}
+                    cardTree={props.cardTree}
+                    readonly={props.readonly}
                 />
 
                 {/* Comments */}
 
-                    {!this.props.readonly &&
+                {!props.readonly &&
                 <>
                     <hr/>
                     <CommentsList
@@ -138,17 +124,16 @@ class CardDetail extends React.Component<Props, State> {
 
             <div className='CardDetail content fullwidth'>
                 <CardDetailContents
-                        cardTree={this.props.cardTree}
-                        readonly={this.props.readonly}
+                    cardTree={props.cardTree}
+                    readonly={props.readonly}
                 />
             </div>
 
-                {!this.props.readonly &&
-                    <CardDetailContentsMenu card={this.props.cardTree.card}/>
+            {!props.readonly &&
+                <CardDetailContentsMenu card={props.cardTree.card}/>
             }
         </>
     )
-    }
 }
 
 export default injectIntl(CardDetail)