Implement basic filtering in UsersView

Unfortunately this still seems to be a bit buggy: Clearing the filter
text causes a bunch of duplicate key errors, even though it is unclear
whether the issue is with `useAsyncList` or NextUI's internal table
rendering.

src/screens/home/admin/UsersView.tsx

@@ -29,7 +29,6 @@ import { InView } from 'react-intersection-observer';
 export function UsersView() {
   const auth = useContext(AuthContext);
 
-  const [searchQuery, setSearchQuery] = useState('');
   const [isLoading, setLoading] = useState(false);
   const [needsMore, setNeedsMore] = useState(false);
   const [hasMore, setHasMore] = useState(false);
@@ -39,7 +38,7 @@ export function UsersView() {
       column: 'id',
       direction: 'ascending',
     },
-    async load({ cursor, sortDescriptor }) {
+    async load({ cursor, sortDescriptor, filterText }) {
       try {
         if (cursor !== undefined) {
           setLoading(false);
@@ -50,6 +49,12 @@ export function UsersView() {
           await auth.getAllUsers({
             page,
             perPage: 50,
+            filter: filterText
+              ? {
+                  key: 'username',
+                  text: filterText,
+                }
+              : undefined,
             sorting: sortDescriptor.column
               ? {
                   key: sortDescriptor.column,
@@ -84,7 +89,10 @@ export function UsersView() {
       title="Users"
       toolbar={
         <div className="flex flex-row gap-4">
-          <SearchBar placeholder="Search users..." setQuery={setSearchQuery} />
+          <SearchBar
+            placeholder="Search users..."
+            setQuery={users.setFilterText}
+          />
           <Tooltip content="Add user" color="success">
             <Button
               isIconOnly

src/utils/filter.ts

@@ -0,0 +1,14 @@
+export interface Filter {
+  key: string | number;
+  text: string;
+}
+
+/** Filters elements according to the given filter. */
+export function filtered<T>(elements: T[], filter: Filter): T[] {
+  const filterText = filter.text.toLowerCase();
+  return elements.filter((element: any) => {
+    const value = element[filter.key];
+    const json = JSON.stringify(value).toLowerCase();
+    return json.includes(filterText);
+  });
+}

src/utils/pagination.ts

@@ -1,8 +1,10 @@
+import { Filter, filtered } from '@luna/utils/filter';
 import { sorted, Sorting } from '@luna/utils/sort';
 
 export interface Pagination {
   page: number;
   perPage: number;
+  filter?: Filter;
   sorting?: Sorting;
 }
 
@@ -14,6 +16,9 @@ export function slicePage<T>(elements: T[], pagination?: Pagination): T[] {
   if (pagination === undefined) {
     return elements;
   }
+  if (pagination.filter) {
+    elements = filtered(elements, pagination.filter);
+  }
   if (pagination.sorting) {
     elements = sorted(elements, pagination.sorting);
   }