aswi20220x00-gitlab/webapp/pages/users/index.tsx @ 82ba2ee5

import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';

import { useUnauthRedirect } from '../../hooks';
import { useRouter } from 'next/router';
import { Button, Space, Table, Typography } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUsers } from '@fortawesome/free-solid-svg-icons';
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
import { MainLayout } from '../../layouts/MainLayout';
import { UserInfo } from '../../api';
import { userController } from '../../controllers';
import AddUserModal from '../../components/modals/AddUserModal';

function UsersPage() {
    const redirecting = useUnauthRedirect('/login');
    const { logout, role } = useContext(LoggedUserContext);
    const router = useRouter();

    const [visible, setVisible] = React.useState(false);
    const [users, setUsers] = useState<UserInfo[]>([]);

    useEffect(() => {
        async function fetchData() {
            let usrs = (await userController.usersGet()).data.users;
            if (!usrs) {
                setUsers([]);
            } else {
                setUsers(usrs);
            }
        }

        if (!redirecting && role === 'ADMINISTRATOR') {
            fetchData();
        }
    }, [logout, redirecting, role, router]);

    const showModal = () => {
        setVisible(true);
    };

    const hideModal = () => {
        setVisible(false);
    };

    const columns = [
        { title: 'Jméno', dataIndex: 'name', key: 'name' },
        { title: 'Příjmení', dataIndex: 'surname', key: 'surname' },
        { title: 'Uživatelské jméno', dataIndex: 'username', key: 'username' },
        {
            title: '',
            key: 'operation',
            render: () => (
                <div>
                    <Space size={'middle'}>
                        <Button>Dokumenty</Button>
                        <Button>Upravit</Button>
                        <Button>Smazat</Button>
                    </Space>
                </div>
            ),
        },
    ];

    return redirecting || role !== 'ADMINISTRATOR' ? null : (
        <MainLayout>
            <Typography.Title level={2}>
                <FontAwesomeIcon icon={faUsers} /> Uživatelé
            </Typography.Title>
            <Button type={'primary'} onClick={showModal}>
                Přidat uživatele
            </Button>
            {visible && <AddUserModal onCancel={hideModal} />}

            <Table
                columns={columns}
                dataSource={users}
                size="small"
                scroll={{ y: 500 }}
            />
        </MainLayout>
    );
}

export default UsersPage;