Function Users

web/dashboard/src/pages/Users.tsx:73–574

()

const PAGE_SIZE_OPTIONS = [10, 25, 50];

export default function Users() {
	const client = useClient();
	const [paginationProps, setPaginationProps] = React.useState<PaginationProps>(
		{
			limit: 10,
			page: 1,
			offset: 0,
			total: 0,
			maxPages: 1,
		},
	);
	const [userList, setUserList] = React.useState<User[]>([]);
	const [loading, setLoading] = React.useState<boolean>(false);
	const [searchQuery, setSearchQuery] = React.useState('');
	const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
	// User whose FGA permissions are being inspected (Users table → dropdown).
	const [permissionsUser, setPermissionsUser] = React.useState<User | null>(
		null,
	);

	const updateUserList = async () => {
		setLoading(true);
		const { data } = await client
			.query<UsersResponse>(UserDetailsQuery, {
				params: {
					pagination: {
						limit: paginationProps.limit,
						page: paginationProps.page,
					},
				},
			})
			.toPromise();
		if (data?._users) {
			const { pagination, users } = data._users;
			const maxPages = getMaxPages(pagination as unknown as PaginationProps);
			if (users && users.length > 0) {
				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
				setUserList(users);
			} else {
				if (paginationProps.page !== 1) {
					setPaginationProps({
						...paginationProps,
						...pagination,
						maxPages,
						page: 1,
					});
				}
			}
		}
		setLoading(false);
	};

	React.useEffect(() => {
		updateUserList();
	}, []);

	React.useEffect(() => {
		updateUserList();