From a550988f35bc31411749dae06f4d4a28dd8975f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sat, 27 Mar 2021 10:13:17 +0100
Subject: [PATCH] Migrating registration link to functional component

---
 webapp/src/components/registrationLink.tsx | 119 ++++++++++-----------
 1 file changed, 56 insertions(+), 63 deletions(-)

diff --git a/webapp/src/components/registrationLink.tsx b/webapp/src/components/registrationLink.tsx
index 98f7d21b0..742eb1934 100644
--- a/webapp/src/components/registrationLink.tsx
+++ b/webapp/src/components/registrationLink.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, {useEffect, useState} from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
 
 import {IWorkspace} from '../blocks/workspace'
@@ -17,81 +17,74 @@ type Props = {
     intl: IntlShape
 }
 
-type State = {
-    workspace?: IWorkspace
-    wasCopied: boolean
-}
+const RegistrationLink = React.memo((props: Props) => {
+    const {intl, onClose} = props
 
-class RegistrationLink extends React.PureComponent<Props, State> {
-    state: State = {wasCopied: false}
+    const [wasCopied, setWasCopied] = useState(false)
+    const [workspace, setWorkspace] = useState<IWorkspace>()
 
-    componentDidMount() {
-        this.loadData()
+    const loadData = async () => {
+        const updatedWorkspace = await client.getWorkspace()
+        setWorkspace(updatedWorkspace)
+        setWasCopied(false)
     }
 
-    private async loadData() {
-        const workspace = await client.getWorkspace()
-        this.setState({workspace, wasCopied: false})
-    }
+    useEffect(() => {
+        loadData()
+    }, [])
 
-    render(): JSX.Element {
-        const {intl} = this.props
-        const {workspace} = this.state
-
-        const registrationUrl = window.location.origin + '/register?t=' + workspace?.signupToken
-
-        return (
-            <Modal
-                position='bottom-right'
-                onClose={this.props.onClose}
-            >
-                <div className='RegistrationLink'>
-                    {workspace && <>
-                        <div className='row'>
-                            {intl.formatMessage({id: 'RegistrationLink.description', defaultMessage: 'Share this link for others to create accounts:'})}
-                        </div>
-                        <div className='row'>
-                            <a
-                                className='shareUrl'
-                                href={registrationUrl}
-                                target='_blank'
-                                rel='noreferrer'
-                            >
-                                {registrationUrl}
-                            </a>
-                            <Button
-                                filled={true}
-                                onClick={() => {
-                                    Utils.copyTextToClipboard(registrationUrl)
-                                    this.setState({wasCopied: true})
-                                }}
-                            >
-                                {this.state.wasCopied ? intl.formatMessage({id: 'RegistrationLink.copiedLink', defaultMessage: 'Copied!'}) : intl.formatMessage({id: 'RegistrationLink.copyLink', defaultMessage: 'Copy link'})}
-                            </Button>
-                        </div>
-                        <div className='row'>
-                            <Button onClick={this.onRegenerateToken}>
-                                {intl.formatMessage({id: 'RegistrationLink.regenerateToken', defaultMessage: 'Regenerate token'})}
-                            </Button>
-                        </div>
-                    </>}
-                </div>
-            </Modal>
-        )
-    }
-
-    private onRegenerateToken = async () => {
-        const {intl} = this.props
+    const regenerateToken = async () => {
         // eslint-disable-next-line no-alert
         const accept = window.confirm(intl.formatMessage({id: 'RegistrationLink.confirmRegenerateToken', defaultMessage: 'This will invalidate previously shared links. Continue?'}))
         if (accept) {
             await client.regenerateWorkspaceSignupToken()
-            await this.loadData()
+            await loadData()
 
             const description = intl.formatMessage({id: 'RegistrationLink.tokenRegenerated', defaultMessage: 'Registration link regenerated'})
             sendFlashMessage({content: description, severity: 'low'})
         }
     }
-}
+
+    const registrationUrl = window.location.origin + '/register?t=' + workspace?.signupToken
+
+    return (
+        <Modal
+            position='bottom-right'
+            onClose={onClose}
+        >
+            <div className='RegistrationLink'>
+                {workspace && <>
+                    <div className='row'>
+                        {intl.formatMessage({id: 'RegistrationLink.description', defaultMessage: 'Share this link for others to create accounts:'})}
+                    </div>
+                    <div className='row'>
+                        <a
+                            className='shareUrl'
+                            href={registrationUrl}
+                            target='_blank'
+                            rel='noreferrer'
+                        >
+                            {registrationUrl}
+                        </a>
+                        <Button
+                            filled={true}
+                            onClick={() => {
+                                Utils.copyTextToClipboard(registrationUrl)
+                                setWasCopied(true)
+                            }}
+                        >
+                            {wasCopied ? intl.formatMessage({id: 'RegistrationLink.copiedLink', defaultMessage: 'Copied!'}) : intl.formatMessage({id: 'RegistrationLink.copyLink', defaultMessage: 'Copy link'})}
+                        </Button>
+                    </div>
+                    <div className='row'>
+                        <Button onClick={regenerateToken}>
+                            {intl.formatMessage({id: 'RegistrationLink.regenerateToken', defaultMessage: 'Regenerate token'})}
+                        </Button>
+                    </div>
+                </>}
+            </div>
+        </Modal>
+    )
+})
 
 export default injectIntl(RegistrationLink)