Migrating App component to functional component
This commit is contained in:
Jesús Espino
parent
849a47e05f
commit
57232a770b
1 changed files with 93 additions and 102 deletions
|
|
@ -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,113 +23,104 @@ 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)}
|
||||
>
|
||||
<DndProvider backend={Utils.isMobile() ? TouchBackend : HTML5Backend}>
|
||||
<UserContext.Provider value={this.state.user}>
|
||||
<FlashMessages milliseconds={2000}/>
|
||||
<Router forceRefresh={true}>
|
||||
<div id='frame'>
|
||||
<div id='main'>
|
||||
<Switch>
|
||||
<Route path='/error'>
|
||||
<ErrorPage/>
|
||||
</Route>
|
||||
<Route path='/login'>
|
||||
<LoginPage/>
|
||||
</Route>
|
||||
<Route path='/register'>
|
||||
<RegisterPage/>
|
||||
</Route>
|
||||
<Route path='/change_password'>
|
||||
<ChangePasswordPage/>
|
||||
</Route>
|
||||
<Route path='/shared'>
|
||||
<BoardPage
|
||||
workspaceId='0'
|
||||
readonly={true}
|
||||
setLanguage={this.setAndStoreLanguage}
|
||||
/>
|
||||
</Route>
|
||||
<Route path='/board'>
|
||||
{this.state.initialLoad && !this.state.user && <Redirect to='/login'/>}
|
||||
<BoardPage
|
||||
workspaceId='0'
|
||||
setLanguage={this.setAndStoreLanguage}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
path='/workspace/:workspaceId/shared'
|
||||
render={({match}) => {
|
||||
return (
|
||||
<BoardPage
|
||||
workspaceId={match.params.workspaceId}
|
||||
readonly={true}
|
||||
setLanguage={this.setAndStoreLanguage}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
return (
|
||||
<IntlProvider
|
||||
locale={language}
|
||||
messages={getMessages(language)}
|
||||
>
|
||||
<DndProvider backend={Utils.isMobile() ? TouchBackend : HTML5Backend}>
|
||||
<UserContext.Provider value={user}>
|
||||
<FlashMessages milliseconds={2000}/>
|
||||
<Router forceRefresh={true}>
|
||||
<div id='frame'>
|
||||
<div id='main'>
|
||||
<Switch>
|
||||
<Route path='/error'>
|
||||
<ErrorPage/>
|
||||
</Route>
|
||||
<Route path='/login'>
|
||||
<LoginPage/>
|
||||
</Route>
|
||||
<Route path='/register'>
|
||||
<RegisterPage/>
|
||||
</Route>
|
||||
<Route path='/change_password'>
|
||||
<ChangePasswordPage/>
|
||||
</Route>
|
||||
<Route path='/shared'>
|
||||
<BoardPage
|
||||
workspaceId='0'
|
||||
readonly={true}
|
||||
setLanguage={setAndStoreLanguage}
|
||||
/>
|
||||
<Route
|
||||
path='/workspace/:workspaceId/'
|
||||
render={({match}) => {
|
||||
if (this.state.initialLoad && !this.state.user) {
|
||||
const redirectUrl = `/workspace/${match.params.workspaceId}/`
|
||||
const loginUrl = `/login?r=${encodeURIComponent(redirectUrl)}`
|
||||
return <Redirect to={loginUrl}/>
|
||||
}
|
||||
return (
|
||||
<BoardPage
|
||||
workspaceId={match.params.workspaceId}
|
||||
setLanguage={this.setAndStoreLanguage}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</Route>
|
||||
<Route path='/board'>
|
||||
{initialLoad && !user && <Redirect to='/login'/>}
|
||||
<BoardPage
|
||||
workspaceId='0'
|
||||
setLanguage={setAndStoreLanguage}
|
||||
/>
|
||||
<Route path='/'>
|
||||
{this.state.initialLoad && !this.state.user && <Redirect to='/login'/>}
|
||||
<BoardPage
|
||||
workspaceId='0'
|
||||
setLanguage={this.setAndStoreLanguage}
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</Route>
|
||||
<Route
|
||||
path='/workspace/:workspaceId/shared'
|
||||
render={({match}) => {
|
||||
return (
|
||||
<BoardPage
|
||||
workspaceId={match.params.workspaceId}
|
||||
readonly={true}
|
||||
setLanguage={setAndStoreLanguage}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
path='/workspace/:workspaceId/'
|
||||
render={({match}) => {
|
||||
if (initialLoad && !user) {
|
||||
const redirectUrl = `/workspace/${match.params.workspaceId}/`
|
||||
const loginUrl = `/login?r=${encodeURIComponent(redirectUrl)}`
|
||||
return <Redirect to={loginUrl}/>
|
||||
}
|
||||
return (
|
||||
<BoardPage
|
||||
workspaceId={match.params.workspaceId}
|
||||
setLanguage={setAndStoreLanguage}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Route path='/'>
|
||||
{initialLoad && !user && <Redirect to='/login'/>}
|
||||
<BoardPage
|
||||
workspaceId='0'
|
||||
setLanguage={setAndStoreLanguage}
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</Router>
|
||||
</UserContext.Provider>
|
||||
</DndProvider>
|
||||
</IntlProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</Router>
|
||||
</UserContext.Provider>
|
||||
</DndProvider>
|
||||
</IntlProvider>
|
||||
)
|
||||
})
|
||||
|
||||
export default App
|
||||
|
|
|
|||
Loading…
Reference in a new issue