searches

components/AuditPage/AuditPage.tsx

@@ -79,7 +79,7 @@ export const AuditLogs = ({}) => {
   const [types, setTypes] = useState<boolean[]>([]);
   const [pageIndex, setPageIndex] = useState(1);
   const { data } = useSWR(
-    `/api/admin/audit?page=${pageIndex}&${searchParams.toString()}`
+    `/api/admin/audit?page=${pageIndex}&pageSize=26&${searchParams.toString()}`
   );
   const filter = useSWR<string[]>('/api/admin/audit/filter');
 

components/OAuth2Page/OAuth2Page.tsx

@@ -390,24 +390,16 @@ const OAuth2ClientCard = ({
   </div>
 );
 
-const OAuth2ClientList = ({
+const OAuth2ClientList = ({ isAdmin }: { isAdmin: boolean }) => {
-  pageIndex,
+  const [pageIndex, setPageIndex] = useState(1);
-  searchTerm,
+  const [searchTerm, setSearchTerm] = useState('');
-  isAdmin,
-  setPage,
-}: {
-  pageIndex: number;
-  searchTerm: string;
-  isAdmin: boolean;
-  setPage: (page: number) => void;
-}) => {
   const { data, mutate } = useSWR<PaginatedResponse<OAuth2ClientListItem>>(
     `/api/admin/oauth2/clients?page=${pageIndex}${
       searchTerm ? `&q=${searchTerm}` : ''
-    }`
+    }&pageSize=8`
   );
 
-  return data ? (
+  return (
     <>
       <div className={styles.header}>
         <h1>OAuth2 clients</h1>
@@ -419,41 +411,49 @@ const OAuth2ClientList = ({
           Create new
         </Button>
       </div>
-      <div className={styles.clientList}>
+      <FormWrapper>
-        {data.list.map((client) => (
+        <FormControl>
-          <OAuth2ClientCard
+          <input
-            client={client}
+            value={searchTerm}
-            key={client.client_id}
+            onChange={(e) => setSearchTerm(e.target.value)}
-            isAdmin={isAdmin}
+            placeholder="Search titles, descriptions, IDs.."
-            update={mutate}
           />
-        ))}
+        </FormControl>
-        {data?.pagination && (
+      </FormWrapper>
-          <Paginator setPage={setPage} pagination={data.pagination}></Paginator>
+      <br />
-        )}
+      {data ? (
-      </div>
+        <div className={styles.clientList}>
+          {data.list.map((client) => (
+            <OAuth2ClientCard
+              client={client}
+              key={client.client_id}
+              isAdmin={isAdmin}
+              update={mutate}
+            />
+          ))}
+          {data?.pagination && (
+            <Paginator
+              setPage={setPageIndex}
+              pagination={data.pagination}
+            ></Paginator>
+          )}
+        </div>
+      ) : (
+        <span>Nothing found</span>
+      )}
     </>
-  ) : (
-    <span>Nothing found</span>
   );
 };
 
 export const OAuth2Page = () => {
   const { user } = useUser({ redirectTo: '/login' });
   const isAdmin = userHasPrivileges(user, 'admin:oauth2');
-  const [pageIndex, setPageIndex] = useState(1);
-  const [searchTerm, setSearchTerm] = useState('');
 
   return (
     <>
       <Header user={user}></Header>
       <Container>
-        <OAuth2ClientList
+        <OAuth2ClientList isAdmin={isAdmin} />
-          pageIndex={pageIndex}
-          searchTerm={searchTerm}
-          isAdmin={isAdmin}
-          setPage={setPageIndex}
-        />
       </Container>
     </>
   );

components/UsersPage/UsersPage.tsx

@@ -407,6 +407,16 @@ export const UsersPage = () => {
       <Header user={user}></Header>
       <Container>
         <h1>Users</h1>
+        <FormWrapper>
+          <FormControl>
+            <input
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="Search usernames, display names, emails, UUIDs.."
+            />
+          </FormControl>
+        </FormWrapper>
+        <br />
         <UserList
           pageIndex={pageIndex}
           searchTerm={searchTerm}