React / JavaScript - Optional hiding for menu options

Question

THere's a Menu on my UI and what im trying to achieve is to provide an optional hiding for each specified menu item, all that based on logged user role.

In my Menu component im iterating through MenuItems and showing/hiding them based on their item.Hide property:

Structure of menu item array MenuItems[] is as following:

const MenuItems[] = [
  {
     label: ''
     icon: ''
     hide: showOrHideByUserRole(userRole, ItemIDs.search)    // I added this property
  },
  {
     label: ''
     icon: ''
     hide: showOrHideByUserRole(userRole, ItemIDs.about)    // I added this property
  },
  {
     *etc*
  }
]

Of course there's ItemIDs enum which is only providing an id for a specific item name (string). And userRole state.

And here's my showOrHideByUserRole function which im concerned about:

function showOrHideByUserRole(roleName:string, itemID: number){
      switch (itemID) {

        case 1:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 2:
            if(roleName === 'AAA')
                return true;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 3:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 4:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 5:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        default:
          return true;
          
      }
  }

As you can see this looks kind of ugly (to me at least?) and im wondering if there's a prettier/better way to do what I want?

What needs to be considered is future expansion role-wise. Meaning there might be more roles in the future.

@RobertTerrell i had a typo but i edited it few min ago. Not sure if you're talking about that or not. Please check again and clarify? — Context
understood I have offered what I believe is a pretty solid option and leaves room for the expansion of roles — Robert Terrell

Robert Terrell Robert Terrell · Accepted Answer · 2021-04-21T18:34:25

function showOrHideByUserRole(roleName, itemID) {
  switch (itemID) {
    case 3:
    case 4:
    case 5:
    case 1:
      if (roleName === 'AAA' || roleName === ' BBB') return false
      else return true
    case 2:
      if (roleName === 'AAA') return true
      else if (roleName === 'BBB') return false
      else return true

    default:
      return true
  }
}

it appears you have multiple cases returning the same thing so you could stack your cases that return similar outcomes like what is done above

EDIT: previous answer missed a couple like cases so I have edited the answer as a result

React / JavaScript - Optional hiding for menu options

1 Answers