Migrating BoardColumn to functional component

webapp/src/components/boardColumn.tsx

@@ -1,57 +1,49 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useState} from 'react'
 
 type Props = {
     onDrop: (e: React.DragEvent<HTMLDivElement>) => void
     isDropZone: boolean
+    children: React.ReactNode
 }
 
-type State = {
-    isDragOver: boolean
-}
+const BoardColumn = React.memo((props: Props) => {
+    const [isDragOver, setIsDragOver] = useState(false)
 
-class BoardColumn extends React.PureComponent<Props, State> {
-    state = {
-        isDragOver: false,
+    let className = 'octo-board-column'
+    if (props.isDropZone && isDragOver) {
+        className += ' dragover'
     }
+    return (
+        <div
+            className={className}
+            onDragOver={(e) => {
+                e.preventDefault()
+                if (!isDragOver) {
+                    setIsDragOver(true)
+                }
+            }}
+            onDragEnter={(e) => {
+                e.preventDefault()
+                if (!isDragOver) {
+                    setIsDragOver(true)
+                }
+            }}
+            onDragLeave={(e) => {
+                e.preventDefault()
+                setIsDragOver(false)
+            }}
+            onDrop={(e) => {
+                setIsDragOver(false)
+                if (props.isDropZone) {
+                    props.onDrop(e)
+                }
+            }}
+        >
+            {props.children}
+        </div>
+    )
+})
 
-    render(): JSX.Element {
-        let className = 'octo-board-column'
-        if (this.props.isDropZone && this.state.isDragOver) {
-            className += ' dragover'
-        }
-        const element = (
-            <div
-                className={className}
-                onDragOver={(e) => {
-                    e.preventDefault()
-                    if (!this.state.isDragOver) {
-                        this.setState({isDragOver: true})
-                    }
-                }}
-                onDragEnter={(e) => {
-                    e.preventDefault()
-                    if (!this.state.isDragOver) {
-                        this.setState({isDragOver: true})
-                    }
-                }}
-                onDragLeave={(e) => {
-                    e.preventDefault()
-                    this.setState({isDragOver: false})
-                }}
-                onDrop={(e) => {
-                    this.setState({isDragOver: false})
-                    if (this.props.isDropZone) {
-                        this.props.onDrop(e)
-                    }
-                }}
-            >
-                {this.props.children}
-            </div>)
-
-        return element
-    }
-}
-
-export {BoardColumn}
+export default BoardColumn

webapp/src/components/boardComponent.tsx

@@ -23,7 +23,7 @@ import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
 
 import BoardCard from './boardCard'
-import {BoardColumn} from './boardColumn'
+import BoardColumn from './boardColumn'
 import './boardComponent.scss'
 import CardDialog from './cardDialog'
 import {Editable} from './editable'