update pages to use <Redirect>, clear state when logging out

webapp/src/components/sidebar/sidebarUserMenu.tsx

@@ -11,8 +11,8 @@ import {IUser} from '../../user'
 import FocalboardLogoIcon from '../../widgets/icons/focalboard_logo'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
-import {getMe} from '../../store/users'
-import {useAppSelector} from '../../store/hooks'
+import {getMe, setMe} from '../../store/users'
+import {useAppSelector, useAppDispatch} from '../../store/hooks'
 import {Utils} from '../../utils'
 
 import ModalWrapper from '../modalWrapper'
@@ -26,6 +26,7 @@ import './sidebarUserMenu.scss'
 declare let window: IAppWindow
 
 const SidebarUserMenu = () => {
+    const dispatch = useAppDispatch()
     const history = useHistory()
     const [showRegistrationLinkDialog, setShowRegistrationLinkDialog] = useState(false)
     const user = useAppSelector<IUser|null>(getMe)
@@ -60,6 +61,7 @@ const SidebarUserMenu = () => {
                                 name={intl.formatMessage({id: 'Sidebar.logout', defaultMessage: 'Log out'})}
                                 onClick={async () => {
                                     await octoClient.logout()
+                                    dispatch(setMe(null))
                                     history.push('/login')
                                 }}
                             />

webapp/src/pages/loginPage.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React, {useState} from 'react'
-import {useHistory, Link} from 'react-router-dom'
+import {useHistory, Link, Redirect} from 'react-router-dom'
 import {FormattedMessage} from 'react-intl'
 
 import {useAppDispatch, useAppSelector} from '../store/hooks'
@@ -30,8 +30,7 @@ const LoginPage = () => {
     }
 
     if (loggedIn) {
-        history.replace('/')
-        return null
+        return <Redirect to={'/'}/>
     }
 
     return (

webapp/src/pages/registerPage.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React, {useState} from 'react'
-import {useHistory, Link} from 'react-router-dom'
+import {useHistory, Link, Redirect} from 'react-router-dom'
 import {FormattedMessage} from 'react-intl'
 
 import {useAppDispatch, useAppSelector} from '../store/hooks'
@@ -39,8 +39,7 @@ const RegisterPage = () => {
     }
 
     if (loggedIn) {
-        history.replace('/')
-        return null
+        return <Redirect to={'/'}/>
     }
 
     return (

webapp/src/store/users.ts

@@ -44,8 +44,9 @@ const usersSlice = createSlice({
     name: 'users',
     initialState,
     reducers: {
-        setMe: (state, action: PayloadAction<IUser>) => {
+        setMe: (state, action: PayloadAction<IUser|null>) => {
             state.me = action.payload
+            state.loggedIn = Boolean(state.me)
         },
         setBoardUsers: (state, action: PayloadAction<IUser[]>) => {
             state.boardUsers = action.payload.reduce((acc: {[key: string]: IUser}, user: IUser) => {