I want to hide some part on sidebar according to level of logged user. I am using Parse library and I create level classes in database for users. I can reach the level of currently logged user with ,

Parse.User.current().get("level")

How can i hide some parts of sidebarNavItems array in the code below? Everything i tried didn't work.

import { useEffect, useRef, useState, useContext } from 'react';
import { Link, useLocation } from 'react-router-dom';
import './sidebar.scss';
import { UserContext } from '../../UserContext';
import Parse from 'parse/dist/parse.min.js';


const sidebarNavItems = [
    {
        display: 'Home',
        icon: <i className='bx bx-home'></i>,
        to: '/',
        section: ''
    },
    {
        display: 'Calendar',
        icon: <i className='bx bx-calendar'></i>,
        to: '/calendar',
        section: 'calendar'
    },
    {
        display: 'Profile',
        icon: <i className='bx bx-user'></i>,
        to: '/userProfile',
        section: 'user'
    },
    {
        display: 'Edit Menu',
        icon: <i className='bx bx-receipt'></i>,
        to: '/menuEditer',
        section: 'menuEditer'
    },
    {
        display: 'Settings',
        icon: <i className={'bx bx-receipt'}></i>,
        to: '/settings',
        section: 'order'
    },
]

const Sidebar = () => {
    const [activeIndex, setActiveIndex] = useState(0);
    const [stepHeight, setStepHeight] = useState(0);
    const sidebarRef = useRef();
    const indicatorRef = useRef();
    const location = useLocation();
    const { user, setUser } = useContext(UserContext);
    useEffect(() => {
        setTimeout(() => {
            const sidebarItem = sidebarRef.current.querySelector('.sidebar__menu__item');
            indicatorRef.current.style.height = `${sidebarItem.clientHeight}px`;
            setStepHeight(sidebarItem.clientHeight);
        }, 50);
    }, []);

    // change active index
    useEffect(() => {
        const curPath = window.location.pathname.split('/')[1];
        const activeItem = sidebarNavItems.findIndex(item => item.section === curPath);
        setActiveIndex(curPath.length === 0 ? 0 : activeItem);
    }, [location]);

    return <div className='sidebar'>
        <div className="sidebar__logo">
            <img
                height={'100px'} width={'100px'}
                alt="Back4App Logo"
                src={
                    'https://media-exp1.licdn.com/dms/image/C4E0BAQHIMEfhiwYd6g/company-logo_200_200/0/1624274901673?e=2147483647&v=beta&t=lu-YPbJ08TGLRx5frzPlUBgIVRuFlj4oXTNUjbOXj4w'
                }
            />
            {/* <pre>{"Welcome "   JSON.stringify(user.get("username"), null, 2).replace("\"","").substring(0,JSON.stringify(user.get("username"), null, 2).replace("\"","").length -1)}</pre> */}
            {/* <span style={{marginTop:'15px'}}>&#9881;</span> */}
        </div>
        <div ></div>
        <div ></div>
        <div ref={sidebarRef} className="sidebar__menu">
            {/* <div
                ref={indicatorRef}
                className="sidebar__menu__indicator"
                style={{
                    transform: `translateX(-50%) translateY(${activeIndex * stepHeight}px)`
                }}
            ></div> */}
            {
                sidebarNavItems.map((item, index) => (
                    <Link to={item.to} key={index}>
                        <div className={`sidebar__menu__item ${activeIndex === index ? 'active' : ''}`}>
                            <div className="sidebar__menu__item__icon">
                                {item.icon}
                            </div>
                            <div className="sidebar__menu__item__text">
                                {item.display}
                            </div>
                        </div>
                    </Link>
                ))
            }
        </div>
    </div>;
};

export default Sidebar;

I don't want to change a lot of things because of deadline reasons. That's why i am specifically asking this issue on this code. i appreciate for any help.

CodePudding user response：

If there are certain elements within the sidebar you wish to hide based on user permissions level, then assuming Parse.User.current().get("level") returns the level correctly, then something like the following will allow you to control what gets shown:

Parse.User.current().get("level") === "admin" ? "hidden content" : ""

For controlling what gets shown from sidebarNavItems, you could add an access level property to each object:

{
  display: 'Home',
  icon: <i className='bx bx-home'></i>,
  to: '/',
  section: '',
  accessLevel: 'admin'
},
{
  display: 'Example',
  icon: <i className='bx bx-home'></i>,
  to: '/',
  section: '',
  accessLevel: null
},

Then check each items access level in your map. If it's null then we can return the public link, otherwise we check if the user level matches and either return the private link or render nothing if user doesn't have the required level.

!item.accessLevel
  ? <Link to={item.to} key={index}>Public Access</Link>
  : item.accessLevel === Parse.User.current().get("level")
  ? <Link to={item.to} key={index}>Private Access</Link>
  : ""

Hope this helps!