[dashboard] add pagination to user search

Author: svenefftinge

components/dashboard/src/admin/UserSearch.tsx

@@ -9,14 +9,17 @@ import moment from "moment";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
+import Pagination from "../Pagination/Pagination";
 import { getGitpodService } from "../service/service";
 import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
 import UserDetail from "./UserDetail";
 
 export default function UserSearch() {
     const location = useLocation();
+    const pageLength = 50;
     const [searchResult, setSearchResult] = useState<AdminGetListResult<User>>({ rows: [], total: 0 });
     const [searchTerm, setSearchTerm] = useState("");
+    const [currentPage, setCurrentPage] = useState(0);
     const [searching, setSearching] = useState(false);
     const [currentUser, setCurrentUserState] = useState<User | undefined>(undefined);
 
@@ -46,16 +49,21 @@ export default function UserSearch() {
         try {
             const result = await getGitpodService().server.adminGetUsers({
                 searchTerm,
-                limit: 50,
+                limit: pageLength,
                 orderBy: "creationDate",
-                offset: 0,
+                offset: currentPage * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
         } finally {
             setSearching(false);
         }
     };
+
+    const updatePage = (page: number) => {
+        setCurrentPage(page);
+        search();
+    };
     return (
         <PageWithAdminSubMenu title="Users" subtitle="Search and manage all users.">
             <div className="pt-8 flex">
@@ -103,6 +111,11 @@ export default function UserSearch() {
                         <UserEntry user={u} />
                     ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={updatePage}
+                totalNumberOfPages={searchResult.total / pageLength}
+            />
         </PageWithAdminSubMenu>
     );
 }