From d302f8f2a1d584c57d0d8cf99838cd90a7d050c8 Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Mon, 11 Mar 2024 11:01:32 +0530
Subject: [PATCH] chore: add suggestions from review

- Show the error state within the table.
- Ensure the next pagination action remains disabled if the current page count exceeds the total page count accounting for the case with empty results.
- Move the debounce `setTimeout` ID outside the function body to achieve the expected behavior.
- Clear `setTimeout` IDs on page unmount.
---
 .../src/pages/users/index.vue                 | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
index b71a1c373e2..424d98b0520 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -21,9 +21,7 @@
         </div>
       </div>
       <div class="overflow-x-auto">
-        <div v-if="error">{{ t('users.load_list_error') }}</div>
-
-        <div v-else-if="usersList" class="mb-3 flex items-center justify-end">
+        <div class="mb-3 flex items-center justify-end">
           <HoppButtonSecondary
             outline
             filled
@@ -40,7 +38,7 @@
             outline
             filled
             :icon="IconRight"
-            :disabled="page === totalPages"
+            :disabled="page >= totalPages"
             @click="changePage(PageDirection.Next)"
           />
         </div>
@@ -75,7 +73,7 @@
           <template #empty-state>
             <td colspan="6">
               <span class="flex justify-center p-3">
-                {{ t('users.no_users') }}
+                {{ error ? t('users.load_list_error') : t('users.no_users') }}
               </span>
             </td>
           </template>
@@ -238,7 +236,7 @@
 <script setup lang="ts">
 import { useMutation, useQuery } from '@urql/vue';
 import { format } from 'date-fns';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
@@ -299,9 +297,23 @@ const {
 // Selected Rows
 const selectedRows = ref<UsersListQuery['infra']['allUsers']>([]);
 
+// Ensure this variable is declared outside the debounce function
+let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+let toastTimeout: ReturnType<typeof setTimeout> | null = null;
+
+onUnmounted(() => {
+  if (debounceTimeout) {
+    clearTimeout(debounceTimeout);
+  }
+
+  if (toastTimeout) {
+    clearTimeout(toastTimeout);
+  }
+});
+
 // Debounce Function
 const debounce = (func: () => void, delay: number) => {
-  let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
   if (debounceTimeout) clearTimeout(debounceTimeout);
   debounceTimeout = setTimeout(func, delay);
 };
@@ -583,7 +595,7 @@ const deleteUsers = async (id: string | null) => {
           count: deletedUsers.length - deletedIDs.length,
         })
       );
-      setTimeout(() => {
+      toastTimeout = setTimeout(() => {
         toast.error(t('state.remove_admin_for_deletion'));
       }, 2000);
     } else {