Migrating registration link to functional component

This commit is contained in:
Jesús Espino 2021-03-27 10:13:17 +01:00
parent 108ecf59f7
commit a550988f35

View file

@ -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)