refactor: polish UI of admin dashboard users module (#48)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts

@@ -17,40 +17,40 @@ export function usePagedQuery<
   const fetching = ref(true);
   const error = ref(false);
   const list = ref<any[]>([]);
-  const currentPage = ref(1);
+  const currentPage = ref(0);
+  const hasNextPage = ref(true);
 
-  onMounted(async () => {
+  const fetchNextPage = async () => {
     fetching.value = true;
     try {
-      const result = await client.query(query, variables).toPromise();
+      const result = await client.query(query, {
+        ...variables,
+        cursor: list.value.length > 0
+          ? getCursor(list.value.at(-1))
+          : undefined
+      }).toPromise();
 
       const resultList = getList(result.data!);
 
+      if (resultList.length < 20) {
+        hasNextPage.value = false
+      }
+
       list.value.push(...resultList);
+      currentPage.value++;
     } catch (e) {
       error.value = true;
     }
     fetching.value = false;
+  }
+
+  onMounted(async () => {
+    await fetchNextPage()
   });
 
   const goToNextPage = async () => {
-    if (list.value.length % 20 === 0) {
-      fetching.value = true;
-      try {
-        const result = await client
-          .query(query, {
-            ...variables,
-            cursor: getCursor(list.value.at(-1)),
-          })
-          .toPromise();
-        const resultList = getList(result.data!);
-
-        list.value.push(...resultList);
-        currentPage.value++;
-      } catch (e) {
-        error.value = true;
-      }
-      fetching.value = false;
+    if (hasNextPage.value) {
+      await fetchNextPage()
     }
   };
 
@@ -59,5 +59,6 @@ export function usePagedQuery<
     error,
     goToNextPage,
     list,
+    hasNextPage,
   };
 }