From 6fec33685e23934cdde7cd6a69939b92d740e588 Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic2@gmail.com>
Date: Wed, 18 May 2022 16:16:13 +0200
Subject: [PATCH] remove 'users' from navigation for role User

---
 src/components/Header/Header.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 141da56..3ebb289 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -5,17 +5,29 @@ import { useAuth } from 'src/services/auth';
 import Gravatar from 'react-gravatar';
 import { Link, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
+import { User, UserRole } from 'src/services/users';
 import { CurrentUserModal } from './components/CurrentUserModal';
 
 const navigation = [
-  { name: 'Dashboard', to: '/dashboard' },
-  { name: 'Users', to: '/users' },
+  { name: 'Dashboard', to: '/dashboard', roles: ['admin', 'user'] },
+  { name: 'Users', to: '/users', roles: ['admin'] },
 ];
 
 function classNames(...classes: any[]) {
   return classes.filter(Boolean).join(' ');
 }
 
+function availableNavigation(currentUser: User | null) {
+  if (currentUser === null) {
+    return [];
+  }
+  const userDashboardRole = currentUser.app_roles.find((appRole) => appRole.name?.toLowerCase() === 'dashboard')!.role;
+
+  return navigation.filter((item) =>
+    item.roles.includes(String(userDashboardRole != null ? userDashboardRole : UserRole.User)),
+  );
+}
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
 
@@ -30,6 +42,8 @@ const Header: React.FC<HeaderProps> = () => {
   };
   const currentUserModalClose = () => setCurrentUserModal(false);
 
+  const navigationItems = availableNavigation(currentUser);
+
   return (
     <>
       <Disclosure as="nav" className="bg-white shadow relative z-10">
@@ -55,7 +69,7 @@ const Header: React.FC<HeaderProps> = () => {
                   </Link>
                   <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                     {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                    {navigation.map((item) => (
+                    {navigationItems.map((item) => (
                       <Link
                         key={item.name}
                         to={item.to}