aswi20220x00-gitlab/webapp/components/navigation/AdminNavBar.tsx @ ee3e7185

import React, { useCallback, useContext, useEffect, useState } from 'react';
import { Menu } from 'antd';
import { useRouter } from 'next/router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
import { faFileLines, faTags, faUser, faUsers } from '@fortawesome/free-solid-svg-icons';
import { userController } from '../../controllers';
import { COLOR_NAVBAR } from '../../constants';

const AdminNavBar = () => {
    const router = useRouter();
    const { logout } = useContext(LoggedUserContext);
    const { SubMenu } = Menu;
    const [name, setName] = useState<string>('');

    const handleLogout = useCallback(async () => {
        await logout();
        await router.push('/login');
    }, [logout, router]);

    async function fetchUsername() {
        let usr = (await userController.usersMeGet()).data.name;
        setName(usr ? usr : '');
    }

    useEffect(() => {
        fetchUsername();
    }, []);

    return (
        <div className={'navbar-wrapper'}>
            <Menu theme="dark" mode="horizontal" style={{ flexGrow: 1 }}>
                <Menu.Item
                    style={{}}
                    key="1"
                    onClick={() => router.push('/documents/admin')}
                >
                    <FontAwesomeIcon icon={faFileLines} /> Dokumenty
                </Menu.Item>
                <Menu.Item style={{}} key="2" onClick={() => router.push('/users')}>
                    <FontAwesomeIcon icon={faUsers} /> Uživatelé
                </Menu.Item>
                <Menu.Item style={{}} key="3" onClick={() => router.push('/tags')}>
                    <FontAwesomeIcon icon={faTags} /> Značky
                </Menu.Item>
            </Menu>
            <Menu theme="dark" mode="horizontal" style={{}}>
                <SubMenu
                    icon={<FontAwesomeIcon icon={faUser} />}
                    key="account"
                    title={name}
                >
                    <Menu.Item key="setting:2" onClick={() => handleLogout()}>
                        Odhlásit se
                    </Menu.Item>
                </SubMenu>
            </Menu>
        </div>
    );
};

export default AdminNavBar;