luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Migrating App component to functional component

Browse source
This commit is contained in:
Jesús Espino 2021-04-09 19:34:35 +02:00
parent 849a47e05f
commit 57232a770b
1 changed files with 93 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
webapp/src/app.tsx
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, {useState, useEffect} from 'react'
import {IntlProvider} from 'react-intl'
import {
BrowserRouter as Router,
@ -23,40 +23,30 @@ import RegisterPage from './pages/registerPage'
import {IUser, UserContext} from './user'
import {Utils} from './utils'
type State = {
language: string,
user?: IUser
initialLoad: boolean,
}
const App = React.memo((): JSX.Element => {
const [language, setLanguage] = useState(getCurrentLanguage())
const [user, setUser] = useState<IUser|undefined>(undefined)
const [initialLoad, setInitialLoad] = useState(false)
export default class App extends React.PureComponent<unknown, State> {
constructor(props: unknown) {
super(props)
this.state = {
language: getCurrentLanguage(),
initialLoad: false,
}
}
public componentDidMount(): void {
client.getMe().then((user?: IUser) => {
this.setState({user, initialLoad: true})
useEffect(() => {
client.getMe().then((loadedUser?: IUser) => {
setUser(loadedUser)
setInitialLoad(true)
})
}
}, [])
setAndStoreLanguage = (lang: string): void => {
const setAndStoreLanguage = (lang: string): void => {
storeLanguage(lang)
this.setState({language: lang})
setLanguage(lang)
}
public render(): JSX.Element {
return (
<IntlProvider
locale={this.state.language}
messages={getMessages(this.state.language)}
locale={language}
messages={getMessages(language)}
>
<DndProvider backend={Utils.isMobile() ? TouchBackend : HTML5Backend}>
<UserContext.Provider value={this.state.user}>
<UserContext.Provider value={user}>
<FlashMessages milliseconds={2000}/>
<Router forceRefresh={true}>
<div id='frame'>
@ -78,14 +68,14 @@ export default class App extends React.PureComponent<unknown, State> {
<BoardPage
workspaceId='0'
readonly={true}
setLanguage={this.setAndStoreLanguage}
setLanguage={setAndStoreLanguage}
/>
</Route>
<Route path='/board'>
{this.state.initialLoad && !this.state.user && <Redirect to='/login'/>}
{initialLoad && !user && <Redirect to='/login'/>}
<BoardPage
workspaceId='0'
setLanguage={this.setAndStoreLanguage}
setLanguage={setAndStoreLanguage}
/>
</Route>
<Route
@ -95,7 +85,7 @@ export default class App extends React.PureComponent<unknown, State> {
<BoardPage
workspaceId={match.params.workspaceId}
readonly={true}
setLanguage={this.setAndStoreLanguage}
setLanguage={setAndStoreLanguage}
/>
)
}}
@ -103,7 +93,7 @@ export default class App extends React.PureComponent<unknown, State> {
<Route
path='/workspace/:workspaceId/'
render={({match}) => {
if (this.state.initialLoad && !this.state.user) {
if (initialLoad && !user) {
const redirectUrl = `/workspace/${match.params.workspaceId}/`
const loginUrl = `/login?r=${encodeURIComponent(redirectUrl)}`
return <Redirect to={loginUrl}/>
@ -111,16 +101,16 @@ export default class App extends React.PureComponent<unknown, State> {
return (
<BoardPage
workspaceId={match.params.workspaceId}
setLanguage={this.setAndStoreLanguage}
setLanguage={setAndStoreLanguage}
/>
)
}}
/>
<Route path='/'>
{this.state.initialLoad && !this.state.user && <Redirect to='/login'/>}
{initialLoad && !user && <Redirect to='/login'/>}
<BoardPage
workspaceId='0'
setLanguage={this.setAndStoreLanguage}
setLanguage={setAndStoreLanguage}
/>
</Route>
</Switch>
@ -131,5 +121,6 @@ export default class App extends React.PureComponent<unknown, State> {
</DndProvider>
</IntlProvider>
)
}
}
})
export default App