Migrating table row to functional component

webapp/src/components/table/table.scss

@@ -11,7 +11,6 @@
         font-size: 14px;
         line-height: 20px;
         position: relative;
-        overflow: hidden;
         text-overflow: ellipsis;
 
         &:hover {

webapp/src/components/table/table.tsx

@@ -36,7 +36,6 @@ type State = {
 
 class Table extends React.Component<Props, State> {
     private draggedHeaderTemplate?: IPropertyTemplate
-    private cardIdToRowMap = new Map<string, React.RefObject<TableRow>>()
     state: State = {}
 
     shouldComponentUpdate(): boolean {
@@ -54,8 +53,6 @@ class Table extends React.Component<Props, State> {
             titleSortIcon = titleSortOption.reversed ? <SortUpIcon/> : <SortDownIcon/>
         }
 
-        this.cardIdToRowMap.clear()
-
         return (
             <div className='octo-table-body Table'>
 
@@ -215,12 +212,9 @@ class Table extends React.Component<Props, State> {
                 {/* Rows, one per card */}
 
                 {cards.map((card) => {
-                    const tableRowRef = React.createRef<TableRow>()
-
                     const tableRow = (
                         <TableRow
                             key={card.id + card.updateAt}
-                            ref={tableRowRef}
                             boardTree={boardTree}
                             card={card}
                             isSelected={this.props.selectedCardIds.includes(card.id)}
@@ -237,8 +231,6 @@ class Table extends React.Component<Props, State> {
                             readonly={this.props.readonly}
                         />)
 
-                    this.cardIdToRowMap.set(card.id, tableRowRef)
-
                     return tableRow
                 })}
 

webapp/src/components/table/tableRow.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} from 'react-intl'
 
 import {Card} from '../../blocks/card'
@@ -24,107 +24,88 @@ type Props = {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
 }
 
-type State = {
-    title: string
-}
+const TableRow = React.memo((props: Props) => {
+    const titleRef = useRef<Editable>(null)
+    const [title, setTitle] = useState(props.card.title)
 
-class TableRow extends React.Component<Props, State> {
-    private titleRef = React.createRef<Editable>()
-    constructor(props: Props) {
-        super(props)
-        this.state = {
-            title: props.card.title,
+    useEffect(() => {
+        if (props.focusOnMount) {
+            setTimeout(() => titleRef.current?.focus(), 10)
         }
+    }, [])
+
+    const columnWidth = (templateId: string): number => {
+        return Math.max(Constants.minColumnWidth, props.boardTree.activeView.columnWidths[templateId] || 0)
     }
 
-    shouldComponentUpdate(): boolean {
-        return true
-    }
+    const {boardTree, card, onSaveWithEnter} = props
+    const {board, activeView} = boardTree
 
-    componentDidMount(): void {
-        if (this.props.focusOnMount) {
-            setTimeout(() => this.titleRef.current?.focus(), 10)
-        }
-    }
+    const className = props.isSelected ? 'TableRow octo-table-row selected' : 'TableRow octo-table-row'
 
-    render(): JSX.Element {
-        const {boardTree, card, onSaveWithEnter} = this.props
-        const {board, activeView} = boardTree
+    return (
+        <div
+            className={className}
+            onClick={props.onClick}
+        >
 
-        const className = this.props.isSelected ? 'TableRow octo-table-row selected' : 'TableRow octo-table-row'
+            {/* Name / title */}
 
-        return (
             <div
-                className={className}
-                onClick={this.props.onClick}
+                className='octo-table-cell title-cell'
+                id='mainBoardHeader'
+                style={{width: columnWidth(Constants.titleColumnId)}}
             >
-
-                {/* Name / title */}
-
-                <div
-                    className='octo-table-cell title-cell'
-                    id='mainBoardHeader'
-                    style={{width: this.columnWidth(Constants.titleColumnId)}}
-                >
-                    <div className='octo-icontitle'>
-                        <div className='octo-icon'>{card.icon}</div>
-                        <Editable
-                            ref={this.titleRef}
-                            value={this.state.title}
-                            placeholderText='Untitled'
-                            onChange={(title: string) => this.setState({title})}
-                            onSave={(saveType) => {
-                                mutator.changeTitle(card, this.state.title)
-                                if (saveType === 'onEnter') {
-                                    onSaveWithEnter()
-                                }
-                            }}
-                            onCancel={() => this.setState({title: card.title})}
-                            readonly={this.props.readonly}
-                        />
-                    </div>
-
-                    <div className='open-button'>
-                        <Button onClick={() => this.props.showCard(this.props.card.id)}>
-                            <FormattedMessage
-                                id='TableRow.open'
-                                defaultMessage='Open'
-                            />
-                        </Button>
-                    </div>
+                <div className='octo-icontitle'>
+                    <div className='octo-icon'>{card.icon}</div>
+                    <Editable
+                        ref={titleRef}
+                        value={title}
+                        placeholderText='Untitled'
+                        onChange={(newTitle: string) => setTitle(newTitle)}
+                        onSave={(saveType) => {
+                            mutator.changeTitle(card, title)
+                            if (saveType === 'onEnter') {
+                                onSaveWithEnter()
+                            }
+                        }}
+                        onCancel={() => setTitle(card.title)}
+                        readonly={props.readonly}
+                    />
                 </div>
 
-                {/* Columns, one per property */}
-
-                {board.cardProperties.
-                    filter((template) => activeView.visiblePropertyIds.includes(template.id)).
-                    map((template) => {
-                        return (
-                            <div
-                                className='octo-table-cell'
-                                key={template.id}
-                                style={{width: this.columnWidth(template.id)}}
-                            >
-                                <PropertyValueElement
-                                    readOnly={this.props.readonly}
-                                    card={card}
-                                    boardTree={boardTree}
-                                    propertyTemplate={template}
-                                    emptyDisplayValue='Empty'
-                                />
-                            </div>)
-                    })}
+                <div className='open-button'>
+                    <Button onClick={() => props.showCard(props.card.id)}>
+                        <FormattedMessage
+                            id='TableRow.open'
+                            defaultMessage='Open'
+                        />
+                    </Button>
+                </div>
             </div>
-        )
-    }
 
-    private columnWidth(templateId: string): number {
-        return Math.max(Constants.minColumnWidth, this.props.boardTree.activeView.columnWidths[templateId] || 0)
-    }
+            {/* Columns, one per property */}
 
-    focusOnTitle(): void {
-        this.titleRef.current?.focus()
-    }
-}
+            {board.cardProperties.
+                filter((template) => activeView.visiblePropertyIds.includes(template.id)).
+                map((template) => {
+                    return (
+                        <div
+                            className='octo-table-cell'
+                            key={template.id}
+                            style={{width: columnWidth(template.id)}}
+                        >
+                            <PropertyValueElement
+                                readOnly={props.readonly}
+                                card={card}
+                                boardTree={boardTree}
+                                propertyTemplate={template}
+                                emptyDisplayValue='Empty'
+                            />
+                        </div>)
+                })}
+        </div>
+    )
+})
 
 export default TableRow