92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import styles from './Header.module.scss';
|
|
import { CurrentUserDto } from '../../../lib/types/user-response.interface';
|
|
import { useEffect, useState } from 'react';
|
|
import userHasPrivileges from '../../../lib/utils/has-privileges';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import conditionalClass from '../../../lib/utils/conditional-class';
|
|
|
|
const navItems = [
|
|
{
|
|
title: 'Home',
|
|
path: '/',
|
|
},
|
|
{
|
|
path: '/users',
|
|
title: 'Users',
|
|
privileges: ['admin', 'admin:user'],
|
|
},
|
|
{
|
|
path: '/oauth2',
|
|
title: 'OAuth2',
|
|
privileges: [['admin', 'admin:oauth2'], 'self:oauth2'],
|
|
},
|
|
{
|
|
path: '/privileges',
|
|
title: 'Privileges',
|
|
privileges: ['admin', 'admin:user:privilege'],
|
|
},
|
|
{
|
|
path: '/documents',
|
|
title: 'Documents',
|
|
privileges: ['admin:document'],
|
|
},
|
|
];
|
|
|
|
const useAvailableNavigation = (user?: CurrentUserDto) => {
|
|
const [stateList, setStateList] = useState(
|
|
Array.from({ length: navItems.length }, (_, i) => i === 0)
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!user) {
|
|
return;
|
|
}
|
|
|
|
let newList: boolean[] = [];
|
|
navItems.forEach((item, index) => {
|
|
newList[index] = item.privileges
|
|
? userHasPrivileges(user, ...item.privileges)
|
|
: true;
|
|
});
|
|
setStateList(newList);
|
|
}, [user]);
|
|
|
|
return stateList;
|
|
};
|
|
|
|
export const Header = ({ user }: { user?: CurrentUserDto }) => {
|
|
const router = useRouter();
|
|
const privileges = useAvailableNavigation(user);
|
|
return (
|
|
<nav className={styles.nav}>
|
|
<div className={styles.inner}>
|
|
<ul>
|
|
{navItems
|
|
.filter((_, index) => privileges[index])
|
|
.map((item) => (
|
|
<li
|
|
key={item.title}
|
|
className={conditionalClass(
|
|
router.pathname === item.path,
|
|
styles.active
|
|
)}
|
|
>
|
|
<Link href={item.path}>{item.title}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<ul className={styles.alignRight}>
|
|
<li>
|
|
{user ? (
|
|
<Link href={'/api/logout'}>Log out</Link>
|
|
) : (
|
|
<Link href={'/api/login'}>Log in</Link>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|