This repository has been archived on 2024-06-14. You can view files and clone it, but cannot push or open issues or pull requests.
icynet-admin/components/common/Header/Header.tsx

97 lines
2.3 KiB
TypeScript
Raw Normal View History

2022-08-29 18:09:28 +00:00
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'],
},
2022-09-09 18:50:28 +00:00
{
path: '/audit',
title: 'Audit logs',
privileges: ['admin', 'admin:audit'],
},
2022-09-09 14:37:42 +00:00
// {
// path: '/privileges',
// title: 'Privileges',
// privileges: ['admin', 'admin:user:privilege'],
// },
2022-08-29 18:09:28 +00:00
{
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>
);
};