fix admin search

Author: svenefftinge

components/dashboard/src/admin/ProjectsSearch.tsx

@@ -32,10 +32,6 @@ export function ProjectsSearch() {
     const [currentProjectOwner, setCurrentProjectOwner] = useState<string | undefined>("");
     const pageLength = 50;
     const [currentPage, setCurrentPage] = useState(1);
-    const updateCurrentPage = (page: number) => {
-        setCurrentPage(page);
-        search();
-    };
 
     useEffect(() => {
         const projectId = location.pathname.split("/")[3];
@@ -77,16 +73,17 @@ export function ProjectsSearch() {
         return <ProjectDetail project={currentProject} owner={currentProjectOwner} />;
     }
 
-    const search = async () => {
+    const search = async (page: number = 1) => {
         setSearching(true);
         try {
             const result = await getGitpodService().server.adminGetProjectsBySearchTerm({
                 searchTerm,
                 limit: pageLength,
                 orderBy: "creationTime",
-                offset: (currentPage - 1) * pageLength,
+                offset: (page - 1) * pageLength,
                 orderDir: "desc",
             });
+            setCurrentPage(page);
             setSearchResult(result);
         } finally {
             setSearching(false);
@@ -123,7 +120,7 @@ export function ProjectsSearch() {
                             }}
                         />
                     </div>
-                    <button disabled={searching} onClick={search}>
+                    <button disabled={searching} onClick={() => search()}>
                         Search
                     </button>
                 </div>
@@ -140,7 +137,7 @@ export function ProjectsSearch() {
             </div>
             <Pagination
                 currentPage={currentPage}
-                setPage={updateCurrentPage}
+                setPage={search}
                 totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
             />
         </>

components/dashboard/src/admin/TeamsSearch.tsx

@@ -32,10 +32,6 @@ export function TeamsSearch() {
     const [searchResult, setSearchResult] = useState<AdminGetListResult<Team>>({ total: 0, rows: [] });
     const pageLength = 50;
     const [currentPage, setCurrentPage] = useState(1);
-    const updateCurrentPage = (page: number) => {
-        setCurrentPage(page);
-        search();
-    };
 
     useEffect(() => {
         const teamId = location.pathname.split("/")[3];
@@ -58,16 +54,17 @@ export function TeamsSearch() {
         return <TeamDetail team={currentTeam} />;
     }
 
-    const search = async () => {
+    const search = async (page: number = 1) => {
         setSearching(true);
         try {
             const result = await getGitpodService().server.adminGetTeams({
                 searchTerm,
                 limit: pageLength,
                 orderBy: "creationTime",
-                offset: (currentPage - 1) * pageLength,
+                offset: (page - 1) * pageLength,
                 orderDir: "desc",
             });
+            setCurrentPage(page);
             setSearchResult(result);
         } finally {
             setSearching(false);
@@ -103,7 +100,7 @@ export function TeamsSearch() {
                             }}
                         />
                     </div>
-                    <button disabled={searching} onClick={search}>
+                    <button disabled={searching} onClick={() => search()}>
                         Search
                     </button>
                 </div>
@@ -129,7 +126,7 @@ export function TeamsSearch() {
             </div>
             <Pagination
                 currentPage={currentPage}
-                setPage={updateCurrentPage}
+                setPage={search}
                 totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
             />
         </>

components/dashboard/src/admin/UserSearch.tsx

@@ -22,10 +22,6 @@ export default function UserSearch() {
     const [currentUser, setCurrentUserState] = useState<User | undefined>(undefined);
     const pageLength = 50;
     const [currentPage, setCurrentPage] = useState(1);
-    const updateCurrentPage = (page: number) => {
-        setCurrentPage(page);
-        search();
-    };
 
     useEffect(() => {
         const userId = location.pathname.split("/")[3];
@@ -48,17 +44,18 @@ export default function UserSearch() {
         return <UserDetail user={currentUser} />;
     }
 
-    const search = async () => {
+    const search = async (page: number = 1) => {
         setSearching(true);
         try {
             const result = await getGitpodService().server.adminGetUsers({
                 searchTerm,
                 limit: pageLength,
                 orderBy: "creationDate",
-                offset: (currentPage - 1) * pageLength,
+                offset: (page - 1) * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
+            setCurrentPage(page);
         } finally {
             setSearching(false);
         }
@@ -93,7 +90,7 @@ export default function UserSearch() {
                             }}
                         />
                     </div>
-                    <button disabled={searching} onClick={search}>
+                    <button disabled={searching} onClick={() => search()}>
                         Search
                     </button>
                 </div>
@@ -112,7 +109,7 @@ export default function UserSearch() {
             </div>
             <Pagination
                 currentPage={currentPage}
-                setPage={updateCurrentPage}
+                setPage={search}
                 totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
             />
         </PageWithAdminSubMenu>

components/dashboard/src/admin/WorkspacesSearch.tsx

@@ -47,10 +47,6 @@ export function WorkspaceSearch(props: Props) {
     const [currentWorkspace, setCurrentWorkspaceState] = useState<WorkspaceAndInstance | undefined>(undefined);
     const pageLength = 50;
     const [currentPage, setCurrentPage] = useState(1);
-    const updateCurrentPage = (page: number) => {
-        setCurrentPage(page);
-        search();
-    };
 
     useEffect(() => {
         const workspaceId = location.pathname.split("/")[3];
@@ -79,7 +75,7 @@ export function WorkspaceSearch(props: Props) {
         return <WorkspaceDetail workspace={currentWorkspace} />;
     }
 
-    const search = async () => {
+    const search = async (page: number = 1) => {
         // Disables empty search on the workspace search page
         if (isGitpodIo() && !props.user && queryTerm.length === 0) {
             return;
@@ -102,10 +98,11 @@ export function WorkspaceSearch(props: Props) {
             const result = await getGitpodService().server.adminGetWorkspaces({
                 limit: pageLength,
                 orderBy: "instanceCreationTime",
-                offset: (currentPage - 1) * pageLength,
+                offset: (page - 1) * pageLength,
                 orderDir: "desc",
                 ...query,
             });
+            setCurrentPage(page);
             setSearchResult(result);
         } finally {
             setSearching(false);
@@ -141,7 +138,7 @@ export function WorkspaceSearch(props: Props) {
                             }}
                         />
                     </div>
-                    <button disabled={searching} onClick={search}>
+                    <button disabled={searching} onClick={() => search()}>
                         Search
                     </button>
                 </div>
@@ -162,7 +159,7 @@ export function WorkspaceSearch(props: Props) {
             </div>
             <Pagination
                 currentPage={currentPage}
-                setPage={updateCurrentPage}
+                setPage={search}
                 totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
             />
         </>