refactor: loading state for delete user

packages/hoppscotch-app/components/teams/Edit.vue

@@ -158,7 +158,8 @@
                   :title="t('action.remove')"
                   svg="user-minus"
                   color="red"
-                  @click.native="removeExistingTeamMember(member.userID)"
+                  :loading="isLoadingIndex === index"
+                  @click.native="removeExistingTeamMember(member.userID, index)"
                 />
               </div>
             </div>
@@ -214,6 +215,7 @@ const t = useI18n()
 
 const emit = defineEmits<{
   (e: "hide-modal"): void
+  (e: "refetch-teams"): void
 }>()
 
 const memberOptions = ref<any | null>(null)
@@ -240,6 +242,7 @@ watch(
 watch(
   () => props.editingTeamID,
   (teamID: string) => {
+    console.log("teamID", teamID)
     teamDetails.execute({ teamID })
   }
 )
@@ -291,6 +294,8 @@ watch(
   () => {
     if (teamDetails.loading) return
 
+    console.log(teamDetails)
+
     const data = teamDetails.data
 
     if (E.isRight(data)) {
@@ -321,6 +326,11 @@ const updateMemberRole = (userID: string, role: TeamMemberRole) => {
   }
 }
 
+watch(
+  () => teamDetails.data,
+  (newVal) => console.log(newVal)
+)
+
 const membersList = computed(() => {
   if (teamDetails.loading) return []
 
@@ -347,10 +357,10 @@ const membersList = computed(() => {
   return []
 })
 
-const isLoading = ref(false)
+const isLoadingIndex = ref<null | number>(null)
 
-const removeExistingTeamMember = async (userID: string) => {
-  isLoading.value = true
+const removeExistingTeamMember = async (userID: string, index: number) => {
+  isLoadingIndex.value = index
   const removeTeamMemberResult = await removeTeamMember(
     userID,
     props.editingTeamID
@@ -359,10 +369,14 @@ const removeExistingTeamMember = async (userID: string) => {
     toast.error(`${t("error.something_went_wrong")}`)
   } else {
     toast.success(`${t("team.member_removed")}`)
+    emit("refetch-teams")
+    teamDetails.execute({ teamID: props.editingTeamID })
   }
-  isLoading.value = false
+  isLoadingIndex.value = null
 }
 
+const isLoading = ref(false)
+
 const saveTeam = async () => {
   isLoading.value = true
   if (name.value !== "") {

packages/hoppscotch-app/components/teams/index.vue

@@ -61,6 +61,7 @@
       :editing-team-i-d="editingTeamID"
       @hide-modal="displayModalEdit(false)"
       @invite-team="inviteTeam(editingTeam, editingTeamID)"
+      @refetch-teams="refetchTeams"
     />
     <TeamsInvite
       v-if="!loading && myTeams.length > 0"
@@ -130,4 +131,8 @@ const inviteTeam = (team: any, teamID: any) => {
   editingTeamID.value = teamID
   displayModalInvite(true)
 }
+
+const refetchTeams = () => {
+  adapter.fetchList()
+}
 </script>

packages/hoppscotch-app/helpers/backend/GQLClient.ts

@@ -395,6 +395,7 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
                   )
                 )
               )
+              console.log(res)
 
               loading.value = false
             }