import React, { useContext, useEffect, useState } from 'react'; import getRoles, { Context as RolesContext, Filters } from '@/api/admin/roles/getRoles'; import { AdminContext } from '@/state/admin'; import NewRoleButton from '@/components/admin/roles/NewRoleButton'; import FlashMessageRender from '@/components/FlashMessageRender'; import useFlash from '@/plugins/useFlash'; import { NavLink, useRouteMatch } from 'react-router-dom'; import tw from 'twin.macro'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable'; import CopyOnClick from '@/components/elements/CopyOnClick'; const RowCheckbox = ({ id }: { id: number }) => { const isChecked = AdminContext.useStoreState(state => state.roles.selectedRoles.indexOf(id) >= 0); const appendSelectedRole = AdminContext.useStoreActions(actions => actions.roles.appendSelectedRole); const removeSelectedRole = AdminContext.useStoreActions(actions => actions.roles.removeSelectedRole); return ( ) => { if (e.currentTarget.checked) { appendSelectedRole(id); } else { removeSelectedRole(id); } }} /> ); }; const RolesContainer = () => { const match = useRouteMatch(); const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(RolesContext); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data: roles, error, isValidating } = getRoles(); useEffect(() => { if (!error) { clearFlashes('roles'); return; } clearAndAddHttpError({ key: 'roles', error }); }, [ error ]); const length = roles?.items?.length || 0; const setSelectedRoles = AdminContext.useStoreActions(actions => actions.roles.setSelectedRoles); const selectedRolesLength = AdminContext.useStoreState(state => state.roles.selectedRoles.length); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedRoles(e.currentTarget.checked ? (roles?.items?.map(role => role.id) || []) : []); }; const onSearch = (query: string): Promise => { return new Promise((resolve) => { if (query.length < 2) { setFilters(null); } else { setFilters({ name: query }); } return resolve(); }); }; useEffect(() => { setSelectedRoles([]); }, [ page ]); return (

Roles

Soon™

setSort('id')}/> setSort('name')}/> { roles !== undefined && !error && !isValidating && length > 0 && roles.items.map(role => ( )) }
{role.id} {role.name} {role.description}
{ roles === undefined || (error && isValidating) ? : length < 1 ? : null }
); }; export default () => { const [ page, setPage ] = useState(1); const [ filters, setFilters ] = useState(null); const [ sort, setSortState ] = useState(null); const [ sortDirection, setSortDirection ] = useState(false); const setSort = (newSort: string | null) => { if (sort === newSort) { setSortDirection(!sortDirection); } else { setSortState(newSort); setSortDirection(false); } }; return ( ); };