feat: subscriptions on edit team modal

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

@@ -34,9 +34,48 @@
             />
           </div>
         </div>
-        <div class="divide-y divide-dividerLight border-divider border rounded">
         <div
-            v-for="(member, index) in members"
+          v-if="teamDetails.loading"
+          class="flex flex-col items-center justify-center"
+        >
+          <SmartSpinner class="mb-4" />
+          <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+        </div>
+        <div
+          v-if="
+            !teamDetails.loading &&
+            E.isRight(teamDetails.data) &&
+            teamDetails.data.right.team.teamMembers
+          "
+          class="divide-y divide-dividerLight border-divider border rounded"
+        >
+          <div
+            v-if="teamDetails.data.right.team.teamMembers === 0"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <SmartIcon class="opacity-75 pb-2" name="users" />
+            <span class="text-center pb-4">
+              {{ $t("empty.members") }}
+            </span>
+            <ButtonSecondary
+              svg="user-plus"
+              :label="$t('team.invite')"
+              @click.native="
+                () => {
+                  emit('invite-team')
+                }
+              "
+            />
+          </div>
+          <div v-else>
+            <div
+              v-for="(member, index) in teamDetails.data.right.team.teamMembers"
               :key="`member-${index}`"
               class="divide-x divide-dividerLight flex"
             >
@@ -101,31 +140,15 @@
                 />
               </div>
             </div>
-          <div
-            v-if="members.length === 0"
-            class="
-              flex flex-col
-              text-secondaryLight
-              p-4
-              items-center
-              justify-center
-            "
-          >
-            <SmartIcon class="opacity-75 pb-2" name="users" />
-            <span class="text-center pb-4">
-              {{ $t("empty.members") }}
-            </span>
-            <ButtonSecondary
-              svg="user-plus"
-              :label="$t('team.invite')"
-              @click.native="
-                () => {
-                  emit('invite-team')
-                }
-              "
-            />
           </div>
         </div>
+        <div
+          v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
+          class="flex flex-col items-center"
+        >
+          <i class="mb-4 material-icons">help_outline</i>
+          {{ $t("error.something_went_wrong") }}
+        </div>
       </div>
     </template>
     <template #footer>
@@ -140,138 +163,174 @@
   </SmartModal>
 </template>
 
-<script>
+<script setup lang="ts">
-import cloneDeep from "lodash/cloneDeep"
+import {
-import { defineComponent } from "@nuxtjs/composition-api"
+  computed,
-import * as teamUtils from "~/helpers/teams/utils"
+  ref,
-import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"
+  toRef,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
+import * as E from "fp-ts/Either"
+import { TeamsTeamMember } from "~/helpers/teams/TeamMemberAdapter"
+import {
+  GetTeamDocument,
+  GetTeamQuery,
+  GetTeamQueryVariables,
+  TeamMemberAddedDocument,
+  TeamMemberRemovedDocument,
+  TeamMemberRole,
+  TeamMemberUpdatedDocument,
+} from "~/helpers/backend/graphql"
+import {
+  removeTeamMember,
+  renameTeam,
+  updateTeamMemberRole,
+} from "~/helpers/backend/mutations/Team"
+import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
+import { useGQLQuery } from "~/helpers/backend/GQLClient"
 
-export default defineComponent({
+const emit = defineEmits<{
-  props: {
+  (e: "hide-modal"): void
-    show: Boolean,
+}>()
-    editingTeam: { type: Object, default: () => {} },
+
-    editingteamID: { type: String, default: null },
+const props = defineProps<{
-  },
+  show: boolean
-  data() {
+  editingTeam: {
-    return {
+    name: string
-      rename: null,
-      members: [],
-      membersAdapter: new TeamMemberAdapter(null),
   }
+  editingTeamID: string
+}>()
+
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const members = ref<TeamsTeamMember[]>([])
+
+const name = toRef(props.editingTeam, "name")
+
+watch(
+  () => props.editingTeam.name,
+  (newName: string) => {
+    name.value = newName
+  }
+)
+
+watch(
+  () => props.editingTeamID,
+  (teamID: string) => {
+    teamDetails.execute({ teamID })
+  }
+)
+
+const teamDetails = useGQLQuery<GetTeamQuery, GetTeamQueryVariables, "">({
+  query: GetTeamDocument,
+  variables: {
+    teamID: props.editingTeamID,
   },
-  computed: {
+  defer: true,
-    editingTeamCopy() {
+  updateSubs: computed(() => {
-      return this.editingTeam
+    if (props.editingTeamID) {
-    },
+      return [
-    name: {
+        {
-      get() {
+          key: 1,
-        return this.editingTeam.name
+          query: TeamMemberAddedDocument,
-      },
+          variables: {
-      set(name) {
+            teamID: props.editingTeamID,
-        this.rename = name
           },
         },
-  },
+        {
-  watch: {
+          key: 2,
-    editingteamID(teamID) {
+          query: TeamMemberUpdatedDocument,
-      this.membersAdapter.changeTeamID(teamID)
+          variables: {
+            teamID: props.editingTeamID,
           },
         },
-  mounted() {
+        {
-    this.membersAdapter.members$.subscribe((list) => {
+          key: 3,
-      this.members = cloneDeep(list)
+          query: TeamMemberRemovedDocument,
+          variables: {
+            teamID: props.editingTeamID,
+          },
+        },
+      ]
+    } else return []
+  }),
 })
-  },
+
-  methods: {
+const updateMemberRole = (id: number, role: TeamMemberRole) => {
-    updateMemberRole(id, role) {
+  members.value[id].role = role
-      this.members[id].role = role
+  // $refs[`memberOptions-${id}`][0].tippy().hide()
-      this.$refs[`memberOptions-${id}`][0].tippy().hide()
+}
-    },
+
-    removeExistingTeamMember(userID) {
+const removeExistingTeamMember = async (userID: string) => {
-      teamUtils
+  const removeTeamMemberResult = await removeTeamMember(
-        .removeTeamMember(this.$apollo, userID, this.editingteamID)
+    userID,
-        .then(() => {
+    props.editingTeamID
-          this.$toast.success(this.$t("team.member_removed"), {
+  )()
+  if (E.isLeft(removeTeamMemberResult)) {
+    $toast.error(t("error.something_went_wrong"), {
+      icon: "error",
+    })
+  } else {
+    $toast.success(t("team.member_removed"), {
       icon: "done",
     })
-          this.hideModal()
-        })
-        .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error_outline",
-          })
-          console.error(e)
-        })
-    },
-    validateEmail(emailID) {
-      if (
-        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-          emailID
-        )
-      ) {
-        return true
   }
-      return false
-    },
-    saveTeam() {
-      if (
-        this.$data.rename !== null &&
-        this.$data.rename.replace(/\s/g, "").length < 6
-      ) {
-        this.$toast.error(this.$t("team.name_length_insufficient"), {
-          icon: "error_outline",
-        })
-        return
 }
-      this.members.forEach((element) => {
+
-        teamUtils
+const saveTeam = async () => {
-          .updateTeamMemberRole(
+  if (name.value !== "") {
-            this.$apollo,
+    if (TeamNameCodec.is(name.value)) {
+      const updateTeamNameResult = await renameTeam(
+        props.editingTeamID,
+        name.value
+      )()
+      if (E.isLeft(updateTeamNameResult)) {
+        $toast.error(t("error.something_went_wrong"), {
+          icon: "error",
+        })
+      } else {
+        $toast.success(t("team.name_updated"), {
+          icon: "done",
+        })
+        members.value.forEach(
+          async (element: { user: { uid: any }; role: any }) => {
+            const updateMemberRoleResult = await updateTeamMemberRole(
               element.user.uid,
-            element.role,
+              props.editingTeamID,
-            this.editingteamID
+              element.role
-          )
+            )()
-          .then(() => {
+            if (E.isLeft(updateMemberRoleResult)) {
-            this.$toast.success(this.$t("team.member_role_updated"), {
+              $toast.error(t("error.something_went_wrong"), {
+                icon: "error",
+              })
+              console.error(updateMemberRoleResult.left.error)
+            } else {
+              $toast.success(t("team.member_role_updated"), {
                 icon: "done",
               })
-          })
-          .catch((e) => {
-            this.$toast.error(e, {
-              icon: "error_outline",
-            })
-            console.error(e)
-          })
-      })
-      if (this.$data.rename !== null) {
-        const newName =
-          this.name === this.$data.rename ? this.name : this.$data.rename
-        if (!/\S/.test(newName))
-          return this.$toast.error(this.$t("empty.team_name"), {
-            icon: "error_outline",
-          })
-        // Call to the graphql mutation
-        if (this.name !== this.rename)
-          teamUtils
-            .renameTeam(this.$apollo, newName, this.editingteamID)
-            .then(() => {
-              this.$toast.success(this.$t("team.saved"), {
-                icon: "done",
-              })
-            })
-            .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error_outline",
-              })
-              console.error(e)
-            })
             }
-      this.hideModal()
+          }
-    },
+        )
-    hideModal() {
+      }
-      this.rename = null
+      hideModal()
-      this.$emit("hide-modal")
+    } else {
-    },
+      return $toast.error(t("team.name_length_insufficient"), {
-  },
+        icon: "error_outline",
       })
+    }
+  } else {
+    return $toast.error(t("empty.team_name"), {
+      icon: "error_outline",
+    })
+  }
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
 </script>

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

@@ -326,7 +326,7 @@ const newInviteeOptions = ref<any | null>(null)
 
 const props = defineProps({
   show: Boolean,
-  editingteamID: { type: String, default: null },
+  editingTeamID: { type: String, default: null },
 })
 
 const emit = defineEmits<{
@@ -340,17 +340,17 @@ const pendingInvites = useGQLQuery<
 >({
   query: GetPendingInvitesDocument,
   variables: reactive({
-    teamID: props.editingteamID,
+    teamID: props.editingTeamID,
   }),
   defer: true,
 })
 
 watch(
-  () => props.editingteamID,
+  () => props.editingTeamID,
   () => {
-    if (props.editingteamID) {
+    if (props.editingTeamID) {
       pendingInvites.execute({
-        teamID: props.editingteamID,
+        teamID: props.editingTeamID,
       })
     }
   }
@@ -420,7 +420,7 @@ const sendInvites = async () => {
     ),
     O.map(
       A.map((invitee) =>
-        createTeamInvitation(invitee.key, invitee.value, props.editingteamID)
+        createTeamInvitation(invitee.key, invitee.value, props.editingTeamID)
       )
     )
   )

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

@@ -66,7 +66,7 @@
       :team="myTeams.data.right.myTeams[0]"
       :show="showModalEdit"
       :editing-team="editingTeam"
-      :editingteam-i-d="editingTeamID"
+      :editing-team-i-d="editingTeamID"
       @hide-modal="displayModalEdit(false)"
       @invite-team="inviteTeam(editingTeam, editingTeamID)"
     />
@@ -79,7 +79,7 @@
       :team="myTeams.data.right.myTeams[0]"
       :show="showModalInvite"
       :editing-team="editingTeam"
-      :editingteam-i-d="editingTeamID"
+      :editing-team-i-d="editingTeamID"
       @hide-modal="displayModalInvite(false)"
     />
   </AppSection>
@@ -124,8 +124,6 @@ const displayModalAdd = (shouldDisplay: boolean) => {
 
 const displayModalEdit = (shouldDisplay: boolean) => {
   showModalEdit.value = shouldDisplay
-
-  if (!shouldDisplay) resetSelectedData()
 }
 
 const displayModalInvite = (shouldDisplay: boolean) => {
@@ -143,9 +141,4 @@ const inviteTeam = (team: any, teamID: any) => {
   editingTeamID.value = teamID
   displayModalInvite(true)
 }
-
-const resetSelectedData = () => {
-  editingTeam.value = undefined
-  editingTeamID.value = undefined
-}
 </script>

packages/hoppscotch-app/helpers/backend/gql/queries/GetTeam.graphql

@@ -6,6 +6,7 @@ query GetTeam($teamID: ID!) {
       membershipID
       user {
         uid
+        email
       }
       role
     }

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamMemberAdded.graphql

@@ -0,0 +1,5 @@
+subscription TeamMemberAdded($teamID: ID!) {
+  teamMemberAdded(teamID: $teamID) {
+    membershipID
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamMemberRemoved.graphql

@@ -0,0 +1,3 @@
+subscription TeamMemberRemoved($teamID: ID!) {
+  teamMemberRemoved(teamID: $teamID)
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamMemberUpdated.graphql

@@ -0,0 +1,5 @@
+subscription TeamMemberUpdated($teamID: ID!) {
+  teamMemberUpdated(teamID: $teamID) {
+    membershipID
+  }
+}

packages/hoppscotch-app/helpers/teams/TeamMemberAdapter.ts

@@ -4,7 +4,7 @@ import cloneDeep from "lodash/cloneDeep"
 import * as Apollo from "@apollo/client/core"
 import { apolloClient } from "~/helpers/apollo"
 
-interface TeamsTeamMember {
+export interface TeamsTeamMember {
   membershipID: string
   user: {
     uid: string

packages/hoppscotch-app/locales/en.json

@@ -485,7 +485,6 @@
     "invalid_invite_link_description": "The link you followed is invalid. Contact your team owner.",
     "invalid_member_permission": "Please provide a valid permission to the team member",
     "invite": "Invite",
-    "logout_and_try_again": "Logout and sign in with another account",
     "invite_more": "Invite more",
     "invite_tooltip": "Invite people to this workspace",
     "invited_to_team": "{owner} invited you to join {team}",
@@ -497,12 +496,14 @@
     "left": "You left the team",
     "login_to_continue": "Login to continue",
     "login_to_continue_description": "You need to be logged in to join a team.",
+    "logout_and_try_again": "Logout and sign in with another account",
     "member_has_invite": "This email ID already has an invite. Contact your team owner.",
     "member_not_found": "Member not found. Contact your team owner.",
     "member_removed": "User removed",
     "member_role_updated": "User roles updated",
     "members": "Members",
     "name_length_insufficient": "Team name should be atleast 6 characters long",
+    "name_updated": "Team name updated",
     "new": "New Team",
     "new_created": "New team created",
     "new_name": "My New Team",