Add filter input to group members table

[robertknight]

Add a search box to filter group members. The filter currently only matches the username, is applied client-side and is case-insensitive.

Filter not applied:

Filter applied with match:

Filter applied with no matches:

[robertknight]

In the client we have a SearchField component that has additional features compared to a plain input such as a search icon, support for focusing by pressing "/" and a "clear" button when non-empty. It might be useful to extract that into the shared library so we can use it here.

[acelaya]

In the client we have a SearchField component that has additional features compared to a plain input such as a search icon, support for focusing by pressing "/" and a "clear" button when non-empty. It might be useful to extract that into the shared library so we can use it here.

I believe we have something similar in via's video transcript app, so it definitely makes sense to extract a component that can be reused.

[robertknight]

The filtering and member count are currently implemented client side, but once we have pagination they will need to be implemented server-side. This means we will probably need to temporarily remove this until more critical functionality is implemented.

[acelaya]

👍🏼

[acelaya]

Since normalizedFilter is used only inside the callback to calculate filteredMembers, maybe it's worth moving it there and make filter the dependency instead of normalizedFilter.

Suggested change

	const normalizedFilter = filter.toLowerCase();
	const filteredMembers = useMemo(() => {
	if (!normalizedFilter || !members) {
	return members;
	}
	// nb. We can get away with lower-casing name and filter to do
	// case-insensitive search because of the character set restrictions on
	// usernames. This would be incorrect for Unicode text.
	return members.filter(m =>
	m.username.toLowerCase().includes(normalizedFilter),
	);
	}, [normalizedFilter, members]);
	const filteredMembers = useMemo(() => {
	if (!filter || !members) {
	return members;
	}
	// nb. We can get away with lower-casing name and filter to do
	// case-insensitive search because of the character set restrictions on
	// usernames. This would be incorrect for Unicode text.
	const normalizedFilter = filter.toLowerCase();
	return members.filter(m =>
	m.username.toLowerCase().includes(normalizedFilter),
	);
	}, [filter, members]);