From 55365a0da41498120c82125355784509f67386a2 Mon Sep 17 00:00:00 2001
From: Sven Efftinge <sven@gitpod.io>
Date: Wed, 21 Sep 2022 09:25:39 +0000
Subject: [PATCH] [dashboard] add pagination to user search

---
 components/dashboard/src/admin/UserSearch.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx
index 0187c0a8b9f5d7..725cdc63933059 100644
--- a/components/dashboard/src/admin/UserSearch.tsx
+++ b/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,9 +49,9 @@ 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);
@@ -56,6 +59,11 @@ export default function UserSearch() {
             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>
     );
 }