export function UserList()

in frontend/src/routes/settings/user/list/list.tsx [35:120]
84 lines of code
4 McCabe index (conditional complexity)

export function UserList() {
    const { t } = useTranslation();
    const userInfo = useContext(UserInfoContext) as UserInfo;
    const { users, getUsers, loading, setUsers } = useGlobalUsers({
        include_deactivated: true,
    });
    const [visible, setVisible] = useState(false);
    const [currentUser, setCurrentUser] = useState<any>();
    const [form] = useForm();
    const columns = [
        {
            title: t`username`,
            key: 'name',
            dataIndex: 'name',
        },
        {
            title: t`Mail`,
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: t`status`,
            dataIndex: 'is_active',
            filters: [
                { text: t`enabled`, value: true },
                { text: t`disabled`, value: false },
            ],
            render: (is_active: boolean) => (
                <StatusMark status={is_active ? 'success' : 'deactivated'}>
                    {is_active ? t`activated` : t`deactivated`}
                </StatusMark>
            ),
            onFilter: (value: any, record: any) => record.is_active === value,
        },
        {
            title: t`superAdministrator`,
            dataIndex: 'is_super_admin',
            key: 'is_super_admin',
            render: (is_super_admin: boolean, record: any, index: number) => (
                <Switch
                    checked={is_super_admin}
                    onChange={changeSuperAdmin(record.id, index)}
                    disabled={userInfo.id === record.id}
                />
            ),
        },
        {
            title: t`lastLogin`,
            dataIndex: 'last_login',
            key: 'last_login',
            render: (last_login: string) => {
                return (
                    <span>
                        {last_login == null ? t`neverLoggedIn` : moment(last_login).format('YYYY-MM-DD HH:mm:ss')}
                    </span>
                );
            },
        },
        {
            title: t`operation`,
            key: 'actions',
            render: (record: any) => {
                const disabled = userInfo.id === record.id;
                return (
                    <FlatBtnGroup showNum={4}>
                        <FlatBtn
                            onClick={() => {
                                setCurrentUser(record);
                                setVisible(true);
                            }}
                        >
                            {t`edit`}
                        </FlatBtn>

                        <FlatBtn
                            onClick={() => handleResetPassword(record)}
                            disabled={disabled}
                        >{t`resetPassword`}</FlatBtn>

                        <FlatBtn onClick={() => toggleActivate(record)} disabled={disabled}>
                            {record.is_active ? t`deactivateUser` : t`activateUser`}
                        </FlatBtn>
                    </FlatBtnGroup>
                );
            },
        },