Changing checkbox to functional component

webapp/src/components/content/checkboxElement.tsx

@@ -1,13 +1,13 @@
 // 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 {injectIntl, IntlShape} from 'react-intl'
 
 import {MutableCheckboxBlock} from '../../blocks/checkboxBlock'
 import {IContentBlock} from '../../blocks/contentBlock'
 import CheckIcon from '../../widgets/icons/check'
 import mutator from '../../mutator'
-import {Editable} from '../editable'
+import Editable from '../../widgets/editable'
 
 import {contentRegistry} from './contentRegistry'
 import './checkboxElement.scss'
@@ -18,19 +18,11 @@ type Props = {
     intl: IntlShape
 }
 
-type State = {
-    active: boolean
-    title: string
-}
+const CheckboxElement = React.memo((props: Props) => {
+    const {intl, block, readonly} = props
 
-class CheckboxElement extends React.PureComponent<Props, State> {
-    constructor(props: Props) {
-        super(props)
-        this.state = {active: Boolean(props.block.fields.value), title: props.block.title}
-    }
-
-    render(): JSX.Element {
-        const {intl, block, readonly} = this.props
+    const [active, setActive] = useState(Boolean(block.fields.value))
+    const [title, setTitle] = useState(block.title)
 
     return (
         <div className='CheckboxElement'>
@@ -38,33 +30,32 @@ class CheckboxElement extends React.PureComponent<Props, State> {
                 type='checkbox'
                 id={`checkbox-${block.id}`}
                 disabled={readonly}
-                    checked={this.state.active}
-                    value={this.state.active ? 'on' : 'off'}
+                checked={active}
+                value={active ? 'on' : 'off'}
                 onChange={(e) => {
                     e.preventDefault()
                     const newBlock = new MutableCheckboxBlock(block)
-                        newBlock.fields.value = !this.state.active
-                        newBlock.title = this.state.title
-                        this.setState({active: newBlock.fields.value})
+                    newBlock.fields.value = !active
+                    newBlock.title = title
+                    setActive(newBlock.fields.value)
                     mutator.updateBlock(newBlock, block, intl.formatMessage({id: 'ContentBlock.editCardCheckbox', defaultMessage: 'toggled-checkbox'}))
                 }}
             />
             <Editable
-                    text={block.title}
+                value={title}
                 placeholderText={intl.formatMessage({id: 'ContentBlock.editText', defaultMessage: 'Edit text...'})}
-                    onChanged={(text) => {
-                        this.setState({title: text})
+                onChange={setTitle}
+                onSave={() => {
                     const newBlock = new MutableCheckboxBlock(block)
-                        newBlock.title = text
-                        newBlock.fields.value = this.state.active
+                    newBlock.title = title
+                    newBlock.fields.value = active
                     mutator.updateBlock(newBlock, block, intl.formatMessage({id: 'ContentBlock.editCardCheckboxText', defaultMessage: 'edit card text'}))
                 }}
                 readonly={readonly}
             />
         </div>
     )
-    }
-}
+})
 
 contentRegistry.registerContentType({
     type: 'checkbox',

webapp/src/octoUtils.tsx

@@ -8,6 +8,7 @@ import {IPropertyTemplate, MutableBoard} from './blocks/board'
 import {MutableBoardView} from './blocks/boardView'
 import {MutableCard} from './blocks/card'
 import {MutableCommentBlock} from './blocks/commentBlock'
+import {MutableCheckboxBlock} from './blocks/checkboxBlock'
 import {MutableDividerBlock} from './blocks/dividerBlock'
 import {MutableImageBlock} from './blocks/imageBlock'
 import {MutableTextBlock} from './blocks/textBlock'
@@ -76,6 +77,7 @@ class OctoUtils {
         case 'image': { return new MutableImageBlock(block) }
         case 'divider': { return new MutableDividerBlock(block) }
         case 'comment': { return new MutableCommentBlock(block) }
+        case 'checkbox': { return new MutableCheckboxBlock(block) }
         default: {
             Utils.assertFailure(`Can't hydrate unknown block type: ${block.type}`)
             return new MutableBlock(block)