refactor: consolidated admin dashboard improvements (#3790)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-sh-admin/src/pages/teams/_id.vue

@@ -4,7 +4,9 @@
       <HoppSmartSpinner />
     </div>
 
-    <div v-if="team" class="flex flex-col">
+    <div v-else-if="error">{{ t('teams.load_info_error') }}</div>
+
+    <div v-else-if="team" class="flex flex-col">
       <div class="flex items-center space-x-4">
         <button
           class="p-2 rounded-3xl bg-divider hover:bg-dividerDark transition flex justify-center items-center"
@@ -27,19 +29,16 @@
         <HoppSmartTabs v-model="selectedOptionTab" render-inactive-tabs>
           <HoppSmartTab :id="'details'" :label="t('teams.details')">
             <TeamsDetails
-              :team="team"
-              :teamName="teamName"
-              v-model:showRenameInput="showRenameInput"
-              @rename-team="renameTeamName"
+              v-model:team="team"
               @delete-team="deleteTeam"
               class="py-8 px-4"
             />
           </HoppSmartTab>
           <HoppSmartTab :id="'members'" :label="t('teams.team_members')">
-            <TeamsMembers @update-team="updateTeam()" class="py-8 px-4" />
+            <TeamsMembers v-model:team="team" class="py-8 px-4" />
           </HoppSmartTab>
           <HoppSmartTab :id="'invites'" :label="t('teams.invites')">
-            <TeamsPendingInvites :editingTeamID="team.id" />
+            <TeamsPendingInvites v-model:team="team" />
           </HoppSmartTab>
         </HoppSmartTabs>
 
@@ -55,24 +54,24 @@
 </template>
 
 <script setup lang="ts">
-import { useClientHandle, useMutation } from '@urql/vue';
-import { computed, onMounted, ref, watch } from 'vue';
+import { useMutation } from '@urql/vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
+import { useClientHandler } from '~/composables/useClientHandler';
 import {
   RemoveTeamDocument,
-  RenameTeamDocument,
   TeamInfoDocument,
-  TeamMemberRole,
   TeamInfoQuery,
 } from '../../helpers/backend/graphql';
-import { HoppSmartTabs } from '@hoppscotch/ui';
-import { useI18n } from '~/composables/i18n';
 
 const t = useI18n();
-
 const toast = useToast();
+const route = useRoute();
+const router = useRouter();
 
+// Tabs
 type OptionTabs = 'details' | 'members' | 'invites';
 
 const selectedOptionTab = ref<OptionTabs>('details');
@@ -90,59 +89,24 @@ const currentTabName = computed(() => {
   }
 });
 
-// Get the details of the team
+// Get Team Info
+const {
+  fetching,
+  error,
+  data: teamInfo,
+  fetchData: getTeamInfo,
+} = useClientHandler(TeamInfoDocument, {
+  teamID: route.params.id.toString(),
+});
+
 const team = ref<TeamInfoQuery['infra']['teamInfo'] | undefined>();
-const teamName = ref('');
-const route = useRoute();
-const fetching = ref(true);
-const { client } = useClientHandle();
 
-const getTeamInfo = async () => {
-  fetching.value = true;
-  const result = await client
-    .query(TeamInfoDocument, { teamID: route.params.id.toString() })
-    .toPromise();
-  if (result.error) {
-    return toast.error(`${t('team.load_info_error')}`);
-  }
-  if (result.data?.infra.teamInfo) {
-    team.value = result.data.infra.teamInfo;
-    teamName.value = team.value.name;
-  }
-  fetching.value = false;
-};
-
-onMounted(async () => await getTeamInfo());
-
-const updateTeam = async () => await getTeamInfo();
-
-// Rename the team name
-const showRenameInput = ref(false);
-const teamRename = useMutation(RenameTeamDocument);
-
-const renameTeamName = async (teamName: string) => {
-  if (!team.value) return;
-
-  if (team.value.name === teamName) {
-    showRenameInput.value = false;
-    return;
-  }
-  const variables = { uid: team.value.id, name: teamName };
-  await teamRename.executeMutation(variables).then((result) => {
-    if (result.error) {
-      toast.error(`${t('state.rename_team_failure')}`);
-    } else {
-      showRenameInput.value = false;
-      if (team.value) {
-        team.value.name = teamName;
-        toast.success(`${t('state.rename_team_success')}`);
-      }
-    }
-  });
-};
+onMounted(async () => {
+  await getTeamInfo();
+  team.value = teamInfo.value?.infra.teamInfo;
+});
 
 // Delete team from the infra
-const router = useRouter();
 const confirmDeletion = ref(false);
 const teamDeletion = useMutation(RemoveTeamDocument);
 const deleteTeamUID = ref<string | null>(null);
@@ -155,42 +119,18 @@ const deleteTeam = (id: string) => {
 const deleteTeamMutation = async (id: string | null) => {
   if (!id) {
     confirmDeletion.value = false;
-    toast.error(`${t('state.delete_team_failure')}`);
+    toast.error(t('state.delete_team_failure'));
     return;
   }
   const variables = { uid: id };
-  await teamDeletion.executeMutation(variables).then((result) => {
-    if (result.error) {
-      toast.error(`${t('state.delete_team_failure')}`);
-    } else {
-      toast.success(`${t('state.delete_team_success')}`);
-    }
-  });
+  const result = await teamDeletion.executeMutation(variables);
+  if (result.error) {
+    toast.error(t('state.delete_team_failure'));
+  } else {
+    toast.success(t('state.delete_team_success'));
+  }
   confirmDeletion.value = false;
   deleteTeamUID.value = null;
   router.push('/teams');
 };
-
-// Update Roles of Members
-const roleUpdates = ref<
-  {
-    userID: string;
-    role: TeamMemberRole;
-  }[]
->([]);
-
-watch(
-  () => team.value,
-  (teamDetails) => {
-    const members = teamDetails?.teamMembers ?? [];
-
-    // Remove deleted members
-    roleUpdates.value = roleUpdates.value.filter(
-      (update) =>
-        members.findIndex(
-          (y: { user: { uid: string } }) => y.user.uid === update.userID
-        ) !== -1
-    );
-  }
-);
 </script>