CODEWITHSUNDEEP
reactjsreact-admin
Dadroid
Dadroid

Reputation: 1434

Logout button in custom usermenu does nothing

I have custom user menu 

import React from "react";
import { UserMenu, MenuItemLink} from "react-admin";
import SettingsIcon from "@material-ui/icons/Settings";
import jwt from "jwt-decode";

const AdminUserMenu = ({ logout }) => {
    var user = jwt(localStorage.getItem("token"));
    return (
        <UserMenu>
            <MenuItemLink
                to={"/Admins/" + user.id}
                primaryText="Profile"
                leftIcon={<SettingsIcon />}
            />
            {logout}
        </UserMenu>
    );
};

export default AdminUserMenu;


const AdminAppBar = (props) => (
    <AppBar {...props} userMenu={<AdminUserMenu />} />
);

Profile link works. But logout button does nothing. How can I make it work so that user could logout?

Upvotes: 1

Views: 371

Answers (2)

Gary Teichrow
Gary Teichrow

Reputation: 81

I had the same behavior that you did using the latest version. The above code from MaxAlex also didn't work for some reason.

I was able to get it work work as follows. Notice the placement of the {logout} in the ConfigurationMenu object versus in the CustomUserMenu.

import * as React from 'react';
import { forwardRef } from 'react';
import { AppBar, UserMenu, MenuItemLink, useTranslate } from 'react-admin';
import Typography from '@material-ui/core/Typography';
import SettingsIcon from '@material-ui/icons/Settings';
import { makeStyles } from '@material-ui/core/styles';

import Logo from '../Logo';

const useStyles = makeStyles({
    title: {
        flex: 1,
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
    },
    spacer: {
        flex: 1,
    }
});

const ConfigurationMenu = ({logout, props}) => {
    const translate = useTranslate();
    return (
        <div>
            <MenuItemLink
                to="/profile"
                primaryText={translate("cw.profile.title")}
                leftIcon={<SettingsIcon />}
                {...props}
            />
            {logout}
        </div>
    );  
};

const CustomUserMenu = (props) => (
    <UserMenu {...props} >
        <ConfigurationMenu />
    </UserMenu>
);

const CustomAppBar = (props) => {
    const classes = useStyles();
    return (
        <AppBar {...props} elevation={1} userMenu={<CustomUserMenu />}>
            <Typography
                variant="h6"
                color="inherit"
                className={classes.title}
                id="react-admin-title"
            />
            <Logo />
            <span className={classes.spacer} />
        </AppBar>
    );
};

export default CustomAppBar;

Upvotes: 0

MaxAlex
MaxAlex

Reputation: 3319

Try this:

const AdminUserMenu = (props) => {
    var user = jwt(localStorage.getItem("token"));
    return (
        <UserMenu {...props} >
            <MenuItemLink
                to={"/Admins/" + user.id}
                primaryText="Profile"
                leftIcon={<SettingsIcon />}
            />
        </UserMenu>
    );
};

Upvotes: 1

Related Questions