Supporting user pagination on the web admin view

website/src/lib/oasst_api_client.ts

@@ -157,10 +157,27 @@ export class OasstApiClient {
   }
 
   /**
-   * Returns the `max_count` `BackendUser`s stored by the backend.
+   * Returns the set of `BackendUser`s stored by the backend.
+   *
+   * @param {number} max_count - The maximum number of users to fetch.
+   * @param {string} cursor - The user's `display_name` to use when paginating.
+   * @param {boolean} isForward - If true and `cursor` is not empty, pages
+   *        forward.  If false and `cursor` is not empty, pages backwards.
+   * @returns {Promise<BackendUser[]>} A Promise that returns an array of `BackendUser` objects.
    */
-  async fetch_users(max_count: number): Promise<BackendUser[]> {
-    return this.get(`/api/v1/frontend_users/?max_count=${max_count}`);
+  async fetch_users(max_count: number, cursor: string, isForward: boolean): Promise<BackendUser[]> {
+    const params = new URLSearchParams();
+    params.append("max_count", max_count.toString());
+
+    // The backend API uses different query paramters depending on the
+    // pagination direction but they both take the same cursor value.
+    // Depending on direction, pick the right query param.
+    if (cursor !== "") {
+      params.append(isForward ? "gt" : "lt", cursor);
+    }
+    const BASE_URL = `/api/v1/frontend_users`;
+    const url = `${BASE_URL}/?${params.toString()}`;
+    return this.get(url);
   }
 
   /**