Merge pull request #1832 from AndrewBastin/refactor/teams-list

fix: teams list not properly showing (HOPP-61)

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

@@ -5,7 +5,7 @@
     </h4>
     <div class="mt-1 text-secondaryLight">
       <SmartAnchor
-        :label="$t('team.join_beta')"
+        :label="`${$t('team.join_beta')}`"
         to="https://hoppscotch.io/beta"
         blank
         class="link"
@@ -13,21 +13,31 @@
     </div>
     <div class="space-y-4 mt-4">
       <ButtonSecondary
-        :label="$t('team.create_new')"
+        :label="`${$t('team.create_new')}`"
         outline
         @click.native="displayModalAdd(true)"
       />
-      <p v-if="$apollo.queries.myTeams.loading">
-        {{ $t("state.loading") }}
+      <p
+        v-if="myTeamsLoading"
+        class="flex flex-col items-center justify-center"
+      >
+        <SmartSpinner class="mb-4" />
+        <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
       </p>
-      <div v-if="myTeams.length === 0" class="flex items-center">
+      <div
+        v-if="!myTeamsLoading && myTeams.myTeams.length === 0"
+        class="flex items-center"
+      >
         <i class="mr-4 material-icons">help_outline</i>
         {{ $t("empty.teams") }}
       </div>
-      <div v-else class="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+      <div
+        v-else-if="!myTeamsLoading && !isApolloError(myTeams)"
+        class="grid gap-4 sm:grid-cols-2 md:grid-cols-3"
+      >
         <TeamsTeam
-          v-for="(team, index) in myTeams"
-          :key="`team-${index}`"
+          v-for="(team, index) in myTeams.myTeams"
+          :key="`team-${String(index)}`"
           :team-i-d="team.id"
           :team="team"
           @edit-team="editTeam(team, team.id)"
@@ -35,94 +45,68 @@
       </div>
     </div>
     <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <!-- ¯\_(ツ)_/¯ -->
     <TeamsEdit
-      :team="myTeams[0]"
+      v-if="!myTeamsLoading && myTeams.myTeams.length > 0"
+      :team="myTeams.myTeams[0]"
       :show="showModalEdit"
       :editing-team="editingTeam"
-      :editingteam-i-d="editingteamID"
+      :editingteam-i-d="editingTeamID"
       @hide-modal="displayModalEdit(false)"
     />
   </AppSection>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-import gql from "graphql-tag"
-import { currentUser$ } from "~/helpers/fb/auth"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+<script setup lang="ts">
+import { gql } from "@apollo/client/core"
+import { ref } from "@nuxtjs/composition-api"
+import { useGQLQuery, isApolloError } from "~/helpers/apollo"
 
-export default defineComponent({
-  setup() {
-    return {
-      currentUser: useReadonlyStream(currentUser$, null),
-    }
-  },
-  data() {
-    return {
-      showModalAdd: false,
-      showModalEdit: false,
-      editingTeam: {},
-      editingteamID: "",
-      me: {},
-      myTeams: [],
-    }
-  },
-  apollo: {
-    me: {
-      query: gql`
-        query GetMe {
-          me {
+const showModalAdd = ref(false)
+const showModalEdit = ref(false)
+const editingTeam = ref<any>({}) // TODO: Check this out
+const editingTeamID = ref<any>("")
+
+const { loading: myTeamsLoading, data: myTeams } = useGQLQuery({
+  query: gql`
+    query GetMyTeams {
+      myTeams {
+        id
+        name
+        myRole
+        ownersCount
+        members {
+          user {
+            photoURL
+            displayName
+            email
             uid
-            eaInvited
           }
+          role
         }
-      `,
-      pollInterval: 100000,
-    },
-    myTeams: {
-      query: gql`
-        query GetMyTeams {
-          myTeams {
-            id
-            name
-            myRole
-            ownersCount
-            members {
-              user {
-                photoURL
-                displayName
-                email
-                uid
-              }
-              role
-            }
-          }
-        }
-      `,
-      pollInterval: 10000,
-    },
-  },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
-  methods: {
-    displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay
-    },
-    displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    editTeam(team, teamID) {
-      this.editingTeam = team
-      this.editingteamID = teamID
-      this.displayModalEdit(true)
-    },
-    resetSelectedData() {
-      this.$data.editingTeam = undefined
-      this.$data.editingteamID = undefined
-    },
-  },
+      }
+    }
+  `,
+  pollInterval: 10000,
 })
+
+const displayModalAdd = (shouldDisplay: boolean) => {
+  showModalAdd.value = shouldDisplay
+}
+
+const displayModalEdit = (shouldDisplay: boolean) => {
+  showModalEdit.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+const editTeam = (team: any, teamID: any) => {
+  editingTeam.value = team
+  editingTeamID.value = teamID
+  displayModalEdit(true)
+}
+
+const resetSelectedData = () => {
+  editingTeam.value = undefined
+  editingTeamID.value = undefined
+}
 </script>

packages/hoppscotch-app/helpers/apollo.ts

@@ -2,11 +2,16 @@ import {
   ApolloClient,
   HttpLink,
   InMemoryCache,
+  QueryOptions,
+  OperationVariables,
   split,
+  ApolloError,
+  isApolloError as _isApolloError
 } from "@apollo/client/core"
 import { WebSocketLink } from "@apollo/client/link/ws"
 import { setContext } from "@apollo/client/link/context"
 import { getMainDefinition } from "@apollo/client/utilities"
+import { ref, onMounted, onBeforeUnmount, Ref } from "@nuxtjs/composition-api"
 import { authIdToken$ } from "./fb/auth"
 
 let authToken: String | null = null
@@ -84,3 +89,39 @@ export const apolloClient = new ApolloClient({
     },
   },
 })
+
+export function isApolloError(x: any): x is ApolloError {
+  return _isApolloError(x)
+}
+
+export function useGQLQuery<T = any, TVariables = OperationVariables>(
+  options: QueryOptions<TVariables, T>
+): { loading: Ref<boolean>; data: Ref<T | ApolloError | undefined> } {
+  const loading = ref(true)
+  const data = ref<T | ApolloError | undefined>()
+
+  let subscription: ZenObservable.Subscription | null = null
+
+  onMounted(() => {
+    subscription = apolloClient.watchQuery(options).subscribe((result) => {
+      if (result.error) {
+        data.value = result.error
+      } else {
+        data.value = result.data
+      }
+
+      loading.value = false
+    })
+  })
+
+  onBeforeUnmount(() => {
+    if (subscription) {
+      subscription.unsubscribe()
+    }
+  })
+
+  return {
+    loading,
+    data,
+  }
+}