Migrating content components to functional components

webapp/src/components/content/contentElement.tsx

@@ -21,18 +21,16 @@ type Props = {
     intl: IntlShape
 }
 
-class ContentElement extends React.PureComponent<Props> {
-    public render(): JSX.Element | null {
-        const {block, intl, readonly} = this.props
+function ContentElement(props: Props): JSX.Element|null {
+    const {block, intl, readonly} = props
 
-        const handler = contentRegistry.getHandler(block.type)
-        if (!handler) {
-            Utils.logError(`ContentElement, unknown content type: ${block.type}`)
-            return null
-        }
-
-        return handler.createComponent(block, intl, readonly)
+    const handler = contentRegistry.getHandler(block.type)
+    if (!handler) {
+        Utils.logError(`ContentElement, unknown content type: ${block.type}`)
+        return null
     }
+
+    return handler.createComponent(block, intl, readonly)
 }
 
 export default injectIntl(ContentElement)

webapp/src/components/content/dividerElement.tsx

@@ -8,11 +8,7 @@ import DividerIcon from '../../widgets/icons/divider'
 import {contentRegistry} from './contentRegistry'
 import './dividerElement.scss'
 
-class DividerElement extends React.PureComponent {
-    render(): JSX.Element {
-        return <div className='DividerElement'/>
-    }
-}
+const DividerElement = React.memo((): JSX.Element => <div className='DividerElement'/>)
 
 contentRegistry.registerContentType({
     type: 'divider',

webapp/src/components/content/imageElement.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
-import {injectIntl, IntlShape} from 'react-intl'
+import React, {useEffect, useState} from 'react'
 
 import {IContentBlock} from '../../blocks/contentBlock'
 import {MutableImageBlock} from '../../blocks/imageBlock'
@@ -13,43 +12,34 @@ import {contentRegistry} from './contentRegistry'
 
 type Props = {
     block: IContentBlock
-    intl: IntlShape
 }
 
-type State = {
-    imageDataUrl?: string
-}
-
-class ImageElement extends React.PureComponent<Props> {
-    state: State = {}
-
-    componentDidMount(): void {
-        if (!this.state.imageDataUrl) {
-            this.loadImage()
-        }
-    }
-
-    private async loadImage() {
-        const imageDataUrl = await octoClient.getFileAsDataUrl(this.props.block.fields.fileId)
-        this.setState({imageDataUrl})
-    }
-
-    public render(): JSX.Element | null {
-        const {block} = this.props
-        const {imageDataUrl} = this.state
+const ImageElement = React.memo((props: Props): JSX.Element|null => {
+    const [imageDataUrl, setImageDataUrl] = useState<string|null>(null)
 
+    useEffect(() => {
         if (!imageDataUrl) {
-            return null
+            const loadImage = async () => {
+                const url = await octoClient.getFileAsDataUrl(props.block.fields.fileId)
+                setImageDataUrl(url)
+            }
+            loadImage()
         }
+    })
 
-        return (
-            <img
-                src={imageDataUrl}
-                alt={block.title}
-            />
-        )
+    const {block} = props
+
+    if (!imageDataUrl) {
+        return null
     }
-}
+
+    return (
+        <img
+            src={imageDataUrl}
+            alt={block.title}
+        />
+    )
+})
 
 contentRegistry.registerContentType({
     type: 'image',
@@ -71,14 +61,7 @@ contentRegistry.registerContentType({
 
         // return new MutableImageBlock()
     },
-    createComponent: (block, intl) => {
-        return (
-            <ImageElement
-                block={block}
-                intl={intl}
-            />
-        )
-    },
+    createComponent: (block) => <ImageElement block={block}/>,
 })
 
-export default injectIntl(ImageElement)
+export default ImageElement

webapp/src/components/content/textElement.tsx

@@ -17,22 +17,20 @@ type Props = {
     intl: IntlShape
 }
 
-class TextElement extends React.PureComponent<Props> {
-    render(): JSX.Element {
-        const {intl, block, readonly} = this.props
+const TextElement = React.memo((props: Props): JSX.Element => {
+    const {intl, block, readonly} = props
 
-        return (
-            <MarkdownEditor
-                text={block.title}
-                placeholderText={intl.formatMessage({id: 'ContentBlock.editText', defaultMessage: 'Edit text...'})}
-                onBlur={(text) => {
-                    mutator.changeTitle(block, text, intl.formatMessage({id: 'ContentBlock.editCardText', defaultMessage: 'edit card text'}))
-                }}
-                readonly={readonly}
-            />
-        )
-    }
-}
+    return (
+        <MarkdownEditor
+            text={block.title}
+            placeholderText={intl.formatMessage({id: 'ContentBlock.editText', defaultMessage: 'Edit text...'})}
+            onBlur={(text) => {
+                mutator.changeTitle(block, text, intl.formatMessage({id: 'ContentBlock.editCardText', defaultMessage: 'edit card text'}))
+            }}
+            readonly={readonly}
+        />
+    )
+})
 
 contentRegistry.registerContentType({
     type: 'text',