refactor: minor performance improvements on teams related operations

packages/hoppscotch-common/src/components/app/Header.vue

@@ -249,12 +249,11 @@ import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { defineActionHandler, invokeAction } from "@helpers/actions"
-import { workspaceStatus$, updateWorkspaceTeamName } from "~/newstore/workspace"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
-import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { useToast } from "~/composables/toast"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
 
 const t = useI18n()
 const toast = useToast()
@@ -282,10 +281,11 @@ const currentUser = useReadonlyStream(
 const selectedTeam = ref<GetMyTeamsQuery["myTeams"][number] | undefined>()
 
 // TeamList-Adapter
-const teamListAdapter = new TeamListAdapter(true)
+const workspaceService = useService(WorkspaceService)
+const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
 const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
 
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspace = workspaceService.currentWorkspace
 
 const workspaceName = computed(() =>
   workspace.value.type === "personal"
@@ -297,20 +297,18 @@ const refetchTeams = () => {
   teamListAdapter.fetchList()
 }
 
-onLoggedIn(() => {
-  !teamListAdapter.isInitialized && teamListAdapter.initialize()
-})
-
 watch(
   () => myTeams.value,
   (newTeams) => {
-    if (newTeams && workspace.value.type === "team" && workspace.value.teamID) {
-      const team = newTeams.find((team) => team.id === workspace.value.teamID)
+    const space = workspace.value
+
+    if (newTeams && space.type === "team" && space.teamID) {
+      const team = newTeams.find((team) => team.id === space.teamID)
       if (team) {
         selectedTeam.value = team
         // Update the workspace name if it's not the same as the updated team name
-        if (team.name !== workspace.value.teamName) {
-          updateWorkspaceTeamName(workspace.value, team.name)
+        if (team.name !== space.teamName) {
+          workspaceService.updateWorkspaceTeamName(team.name)
         }
       }
     }

packages/hoppscotch-common/src/components/collections/index.vue

@@ -162,10 +162,8 @@ import { computed, nextTick, PropType, ref, watch } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useReadonlyStream } from "~/composables/stream"
 import { useLocalState } from "~/newstore/localstate"
-import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
@@ -221,7 +219,6 @@ import {
 import * as E from "fp-ts/Either"
 import { platform } from "~/platform"
 import { createCollectionGists } from "~/helpers/gist"
-import { workspaceStatus$ } from "~/newstore/workspace"
 import {
   createNewTab,
   currentActiveTab,
@@ -240,6 +237,8 @@ import {
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
 import { defineActionHandler } from "~/helpers/actions"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
 
 const t = useI18n()
 const toast = useToast()
@@ -316,7 +315,8 @@ const creatingGistCollection = ref(false)
 const importingMyCollections = ref(false)
 
 // TeamList-Adapter
-const teamListAdapter = new TeamListAdapter(true)
+const workspaceService = useService(WorkspaceService)
+const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
 const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
 const teamListFetched = ref(false)
@@ -374,17 +374,18 @@ const updateSelectedTeam = (team: SelectedTeam) => {
   }
 }
 
-onLoggedIn(() => {
-  !teamListAdapter.isInitialized && teamListAdapter.initialize()
-})
-
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspace = workspaceService.currentWorkspace
 
 // Used to switch collection type and team when user switch workspace in the global workspace switcher
 // Check if there is a teamID in the workspace, if yes, switch to team collection and select the team
 // If there is no teamID, switch to my environment
 watch(
-  () => workspace.value.teamID,
+  () => {
+    const space = workspace.value
+
+    if (space.type === "personal") return undefined
+    else return space.teamID
+  },
   (teamID) => {
     if (!teamID) {
       switchToMyCollections()

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -308,7 +308,6 @@ import {
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { changeWorkspace, workspaceStatus$ } from "~/newstore/workspace"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { useColorMode } from "@composables/theming"
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
@@ -316,10 +315,10 @@ import { invokeAction } from "~/helpers/actions"
 import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 import { Environment } from "@hoppscotch/data"
 import { onMounted } from "vue"
-import { onLoggedIn } from "~/composables/auth"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useLocalState } from "~/newstore/localstate"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { useService } from "dioc/vue"
+import { WorkspaceService } from "~/services/workspace.service"
 
 type Scope =
   | {
@@ -353,21 +352,18 @@ type EnvironmentType = "my-environments" | "team-environments"
 
 const myEnvironments = useReadonlyStream(environments$, [])
 
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspaceService = useService(WorkspaceService)
+const workspace = workspaceService.currentWorkspace
 
 // TeamList-Adapter
-const teamListAdapter = new TeamListAdapter(true)
+const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
 const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
 const teamListFetched = ref(false)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
 
-onLoggedIn(() => {
-  !teamListAdapter.isInitialized && teamListAdapter.initialize()
-})
-
 const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
   REMEMBERED_TEAM_ID.value = team.id
-  changeWorkspace({
+  workspaceService.changeWorkspace({
     teamID: team.id,
     teamName: team.name,
     type: "team",

packages/hoppscotch-common/src/components/environments/index.vue

@@ -58,16 +58,15 @@ import {
 } from "~/newstore/environments"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { defineActionHandler } from "~/helpers/actions"
-import { workspaceStatus$ } from "~/newstore/workspace"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useLocalState } from "~/newstore/localstate"
-import { onLoggedIn } from "~/composables/auth"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { deleteEnvironment } from "~/newstore/environments"
 import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
 import { useToast } from "~/composables/toast"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
 
 const t = useI18n()
 const toast = useToast()
@@ -99,7 +98,8 @@ const currentUser = useReadonlyStream(
 )
 
 // TeamList-Adapter
-const teamListAdapter = new TeamListAdapter(true)
+const workspaceService = useService(WorkspaceService)
+const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
 const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
 const teamListFetched = ref(false)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
@@ -152,11 +152,7 @@ watch(
   }
 )
 
-onLoggedIn(() => {
-  !teamListAdapter.isInitialized && teamListAdapter.initialize()
-})
-
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspace = workspaceService.currentWorkspace
 
 // Switch to my environments if workspace is personal and to team environments if workspace is team
 // also resets selected environment if workspace is personal and the previous selected environment was a team environment

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -216,7 +216,8 @@ import IconClose from "~icons/lucide/x"
 
 import { useColorMode } from "~/composables/theming"
 import { useVModel } from "@vueuse/core"
-import { workspaceStatus$ } from "~/newstore/workspace"
+import { useService } from "dioc/vue"
+import { WorkspaceService } from "~/services/workspace.service"
 
 const props = defineProps<{
   modelValue: HoppTestResult | null | undefined
@@ -231,7 +232,8 @@ const testResults = useVModel(props, "modelValue", emit)
 const t = useI18n()
 const colorMode = useColorMode()
 
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspaceService = useService(WorkspaceService)
+const workspace = workspaceService.currentWorkspace
 
 const showMyEnvironmentDetailsModal = ref(false)
 const showTeamEnvironmentDetailsModal = ref(false)

packages/hoppscotch-common/src/components/teams/index.vue

@@ -69,11 +69,11 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue"
-import { onLoggedIn } from "@composables/auth"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
 
 const t = useI18n()
 
@@ -89,7 +89,8 @@ const showModalInvite = ref(false)
 const editingTeam = ref<any>({}) // TODO: Check this out
 const editingTeamID = ref<any>("")
 
-const adapter = new TeamListAdapter(true)
+const workspaceService = useService(WorkspaceService)
+const adapter = workspaceService.acquireTeamListAdapter(10000)
 const adapterLoading = useReadonlyStream(adapter.loading$, false)
 const adapterError = useReadonlyStream(adapter.error$, null)
 const myTeams = useReadonlyStream(adapter.teamList$, [])
@@ -98,12 +99,6 @@ const loading = computed(
   () => adapterLoading.value && myTeams.value.length === 0
 )
 
-onLoggedIn(() => {
-  try {
-    adapter.initialize()
-  } catch (e) {}
-})
-
 const displayModalAdd = (shouldDisplay: boolean) => {
   showModalAdd.value = shouldDisplay
   adapter.fetchList()

packages/hoppscotch-common/src/components/workspace/Current.vue

@@ -16,9 +16,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue"
-import { useReadonlyStream } from "~/composables/stream"
-import { workspaceStatus$ } from "~/newstore/workspace"
 import { useI18n } from "~/composables/i18n"
+import { useService } from "dioc/vue"
+import { WorkspaceService } from "~/services/workspace.service"
 
 defineProps<{
   section?: string
@@ -26,7 +26,8 @@ defineProps<{
 
 const t = useI18n()
 
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspaceService = useService(WorkspaceService)
+const workspace = workspaceService.currentWorkspace
 
 const teamWorkspaceName = computed(() => {
   if (workspace.value.type === "team" && workspace.value.teamName) {

packages/hoppscotch-common/src/components/workspace/Selector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="rootEl">
     <div class="flex flex-col">
       <div class="flex flex-col">
         <HoppSmartItem
@@ -69,20 +69,20 @@
 </template>
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
-import { onLoggedIn } from "~/composables/auth"
 import { useReadonlyStream } from "~/composables/stream"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import IconUser from "~icons/lucide/user"
 import IconUsers from "~icons/lucide/users"
 import IconPlus from "~icons/lucide/plus"
 import { useColorMode } from "@composables/theming"
-import { changeWorkspace, workspaceStatus$ } from "~/newstore/workspace"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import IconDone from "~icons/lucide/check"
 import { useLocalState } from "~/newstore/localstate"
 import { defineActionHandler } from "~/helpers/actions"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
+import { useElementVisibility, useIntervalFn } from "@vueuse/core"
 
 const t = useI18n()
 const colorMode = useColorMode()
@@ -94,13 +94,37 @@ const currentUser = useReadonlyStream(
   platform.auth.getProbableUser()
 )
 
-const teamListadapter = new TeamListAdapter(true)
+const workspaceService = useService(WorkspaceService)
+const teamListadapter = workspaceService.acquireTeamListAdapter(null)
 const myTeams = useReadonlyStream(teamListadapter.teamList$, [])
 const isTeamListLoading = useReadonlyStream(teamListadapter.loading$, false)
 const teamListAdapterError = useReadonlyStream(teamListadapter.error$, null)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
 const teamListFetched = ref(false)
 
+const rootEl = ref<HTMLElement>()
+const elVisible = useElementVisibility(rootEl)
+
+const { pause: pauseListPoll, resume: resumeListPoll } = useIntervalFn(() => {
+  if (teamListadapter.isInitialized) {
+    teamListadapter.fetchList()
+  }
+}, 10000)
+
+watch(
+  elVisible,
+  () => {
+    if (elVisible.value) {
+      teamListadapter.fetchList()
+
+      resumeListPoll()
+    } else {
+      pauseListPoll()
+    }
+  },
+  { immediate: true }
+)
+
 watch(myTeams, (teams) => {
   if (teams && !teamListFetched.value) {
     teamListFetched.value = true
@@ -115,7 +139,7 @@ const loading = computed(
   () => isTeamListLoading.value && myTeams.value.length === 0
 )
 
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspace = workspaceService.currentWorkspace
 
 const isActiveWorkspace = computed(() => (id: string) => {
   if (workspace.value.type === "personal") return false
@@ -124,7 +148,7 @@ const isActiveWorkspace = computed(() => (id: string) => {
 
 const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
   REMEMBERED_TEAM_ID.value = team.id
-  changeWorkspace({
+  workspaceService.changeWorkspace({
     teamID: team.id,
     teamName: team.name,
     type: "team",
@@ -133,15 +157,11 @@ const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
 
 const switchToPersonalWorkspace = () => {
   REMEMBERED_TEAM_ID.value = undefined
-  changeWorkspace({
+  workspaceService.changeWorkspace({
     type: "personal",
   })
 }
 
-onLoggedIn(() => {
-  teamListadapter.initialize()
-})
-
 watch(
   () => currentUser.value,
   (user) => {