Search box for users

cypress/e2e/user/user-list.cy.ts

@@ -40,7 +40,6 @@ describe('User List', () => {
 
     cy.get('[data-testid=modal-ok-button]').click();
 
-    cy.wait('@user');
     // Wait a little longer for the user list to fully re-render
     cy.wait(1000);
 
@@ -60,7 +59,6 @@ describe('User List', () => {
 
     cy.get('[data-testid=modal-ok-button]').should('contain', 'Delete').click();
 
-    cy.wait('@user');
     cy.wait(1000);
 
     cy.get('[data-testid=user-list-row]')

overseerr-api.yml

@@ -3460,6 +3460,12 @@ paths:
             type: string
             enum: [created, updated, requests, displayname]
             default: created
+        - in: query
+          name: searchQuery
+          schema:
+            type: string
+            nullable: true
+            example: 'steve@gmail.com'
       responses:
         '200':
           description: A JSON array of all users

server/routes/user/index.ts

@@ -30,8 +30,15 @@ router.get('/', async (req, res, next) => {
   try {
     const pageSize = req.query.take ? Number(req.query.take) : 10;
     const skip = req.query.skip ? Number(req.query.skip) : 0;
+    const searchQuery = req.query.searchQuery;
     let query = getRepository(User).createQueryBuilder('user');
 
+    if (searchQuery) {
+      await query.where('user.email like :query OR user.username like :query', {
+        query: `%${searchQuery}%`,
+      });
+    }
+
     switch (req.query.sort) {
       case 'updated':
         query = query.orderBy('user.updatedAt', 'DESC');

src/components/UserList/hooks.tsx

@@ -0,0 +1,36 @@
+import type { Sort } from '@app/components/UserList';
+import type { User } from '@app/hooks/useUser';
+import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
+import { isEqual } from 'lodash';
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+export const useUsers = ({
+  pageIndex,
+  currentPageSize,
+  searchString,
+  currentSort,
+}: {
+  pageIndex: number;
+  currentPageSize: number;
+  searchString: string;
+  currentSort: Sort;
+}) => {
+  const [users, setUsers] = useState<User[]>([]);
+
+  const { data, mutate, isLoading } = useSWR<UserResultsResponse>(
+    `/api/v1/user?take=${currentPageSize}&skip=${
+      pageIndex * currentPageSize
+    }&searchQuery=${
+      searchString ? encodeURIComponent(searchString) : '%00'
+    }&sort=${currentSort}`
+  );
+
+  useEffect(() => {
+    if (!isLoading && data?.results && !isEqual(data.results, users)) {
+      setUsers(data.results);
+    }
+  }, [isLoading, data?.results, users]);
+
+  return { users, mutate, isLoading, pageInfo: data?.pageInfo };
+};