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 (
            <PublicRoute exact path='/' component={Login} />
            <ProtectedRoute path='/dashboard' component={Dashboard} />

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 (
      style={{ width: '100%' }}
      <Form inline>
        <FormControl type='text' placeholder='Search' className='mr-3' />

        title={`${username} (${role})`}
        <Dropdown.Item>Change Password</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item onClick={logout}>Logout</Dropdown.Item>

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.