Given is an application with which you can manage users. Click on a button to be redirected to the UserManagement page:

<Router>
                                      
  <Button><Link to="/user" id="OpenUserManagementButton">
 <i className="fa fg"></i>UserManagement</Link></Button>
        <Routes>
          
          <Route path="/user" element={<UserManagementPage />} />

        </Routes>
      </Router>

At the same time the click should load all available users from the backend.

For this, the following function is now available in the ManagementAction.js.

export function showallUser() {

    console.log("Show all Users")
    return dispatch => {
        dispatch(getShowUserManagementAction());
        showUser().then(userSession => {
            const action = getShowUserManagementActionSuccess(userSession);
            dispatch(action);
        }, error => { dispatch(getShowUserManagementErrorAction(error)); }).catch(error => { dispatch(getShowUserManagementErrorAction(error)); })
    }


}

function showUser() {
   const token = localStorage.getItem("token")
    const requestOptions = {
        method: 'GET',
        headers: { 'Authorization': `Bearer ${token}` },

    };


    return fetch('https://localhost:443/user/', requestOptions)
        .then(handleResponse)
        .then(userSession => {
            return userSession;
        });


}

The UserManagementPage looks like this:

class UserManagementPage extends Component {

    constructor(props) {
        super(props);
        this.state = { userList: [] }

    }
render() {



        return (


            <div className="page-content" id="UserManagementPage" style={{ background: 'white' }}>

                <UserList />
                {this.state.users}




            </div>


        )
    }
}

export default UserManagementPage

question: How can I use the showUser and showallUser functions to show me all users ?