FYP-DevLog 011

FYP-DevLog 011

Alt Text

Alt Text

Today I managed to display the user's name on the dashboard with React Context, and while I'm at it I also store the role data in the same UserContext to display it.

With the role data, I can use that state to give access or limit action to a certain user based on their role.

But before I could do that, I realized that whenever I refresh the page, the state is reset. I'm not sure how why is that. To be honest, I might implement react context wrong altogether.

This is my UserContext

import React, { createContext, useState } from 'react'

// Create context
export const UserContext = createContext()

// Provider component
export function UserProvider({ children }) {
  const [username, setUsername] = useState('')
  const [role, setRole] = useState('')

  const value = { username, setUsername, role, setRole }

  return <UserContext.Provider value={value}>{children}</UserContext.Provider>
}

And then in the App.js I wrap it with UserProvider

function App() {
  return (
    <React.Fragment>
      <Router>
        <Switch>
          <UserProvider>
            <PublicRoute exact path='/' component={Login} />
            <PublicRoute
              exact
              path='/forgot-password'
              component={ForgotPassword}
            />
            <ProtectedRoute path='/dashboard' component={Dashboard} />
          </UserProvider>
        </Switch>
      </Router>
    </React.Fragment>
  )
}

Lastly, in the Topbar component, I get the data with useContext and display it.

import React, { useContext } from 'react'

import axios from 'axios'
import store from 'store'
import { withRouter } from 'react-router'
import { UserContext } from '../context/UserContext'

function Topbar(props) {
  const { username, role } = useContext(UserContext)

  return (
    <Navbar
      style={{ width: '100%' }}
      bg='light'
      expand='lg'
      className='justify-content-end'
    >
      <Form inline>
        <FormControl type='text' placeholder='Search' className='mr-3' />
      </Form>

      <DropdownButton
        id='dropdown-item-button'
        title={`${username} (${role})`}
        variant='white'
        alignRight
      >
        <Dropdown.Item>Profile</Dropdown.Item>
        <Dropdown.Item>Change Password</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item onClick={logout}>Logout</Dropdown.Item>
      </DropdownButton>
    </Navbar>
  )
}

export default withRouter(Topbar)

I'm not really sure why this happens, again I might use the react context wrong from the beginning. But if any of you know why this happens and knows how to solve it. Feel free to comment down. I appreciate it.

That's all for today, thanks for reading.