feat: remember last selected team id (#2210)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -70,6 +70,7 @@ import { onLoggedIn } from "~/helpers/fb/auth"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useReadonlyStream } from "~/helpers/utils/composables"
+import { useLocalState } from "~/newstore/localstate"
 
 type TeamData = GetMyTeamsQuery["myTeams"][number]
 
@@ -94,7 +95,19 @@ const emit = defineEmits<{
 const currentUser = useReadonlyStream(currentUserInfo$, null)
 
 const adapter = new TeamListAdapter(true)
-const myTeams = useReadonlyStream(adapter.teamList$, [])
+const myTeams = useReadonlyStream(adapter.teamList$, null)
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
+let teamListFetched = false
+
+watch(myTeams, (teams) => {
+  if (teams && !teamListFetched) {
+    teamListFetched = true
+    if (REMEMBERED_TEAM_ID.value && currentUser) {
+      const team = teams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+      if (team) updateSelectedTeam(team)
+    }
+  }
+})
 
 onLoggedIn(() => {
   adapter.initialize()
@@ -112,6 +125,7 @@ const updateCollectionsType = (tabID: string) => {
 const options = ref<any | null>(null)
 
 const updateSelectedTeam = (team: TeamData | undefined) => {
+  REMEMBERED_TEAM_ID.value = team?.id
   emit("update-selected-team", team)
 }
 

packages/hoppscotch-app/helpers/utils/composables.ts

@@ -1,6 +1,5 @@
 import {
   customRef,
-  DeepReadonly,
   onBeforeUnmount,
   readonly,
   Ref,
@@ -17,7 +16,7 @@ export const useNuxt = wrapProperty("$nuxt")
 export function useReadonlyStream<T>(
   stream$: Observable<T>,
   initialValue: T
-): Ref<DeepReadonly<T>> {
+): Ref<T> {
   let sub: Subscription | null = null
 
   onBeforeUnmount(() => {
@@ -32,7 +31,7 @@ export function useReadonlyStream<T>(
     targetRef.value = value
   })
 
-  return readonly(targetRef)
+  return readonly(targetRef) as Ref<T>
 }
 
 export function useStream<T>(

packages/hoppscotch-app/newstore/localpersistence.ts

@@ -53,6 +53,7 @@ import { WSRequest$, setWSRequest } from "./WebSocketSession"
 import { SIORequest$, setSIORequest } from "./SocketIOSession"
 import { SSERequest$, setSSERequest } from "./SSESession"
 import { MQTTRequest$, setMQTTRequest } from "./MQTTSession"
+import { bulkApplyLocalState, localStateStore } from "./localstate"
 
 function checkAndMigrateOldSettings() {
   const vuexData = JSON.parse(window.localStorage.getItem("vuex") || "{}")
@@ -114,6 +115,18 @@ function checkAndMigrateOldSettings() {
   }
 }
 
+function setupLocalStatePersistence() {
+  const localStateData = JSON.parse(
+    window.localStorage.getItem("localState") ?? "{}"
+  )
+
+  if (localStateData) bulkApplyLocalState(localStateData)
+
+  localStateStore.subject$.subscribe((state) => {
+    window.localStorage.setItem("localState", JSON.stringify(state))
+  })
+}
+
 function setupSettingsPersistence() {
   const settingsData = JSON.parse(
     window.localStorage.getItem("settings") || "{}"
@@ -313,6 +326,7 @@ function setupRequestPersistence() {
 export function setupLocalPersistence() {
   checkAndMigrateOldSettings()
 
+  setupLocalStatePersistence()
   setupSettingsPersistence()
   setupRequestPersistence()
   setupHistoryPersistence()

packages/hoppscotch-app/newstore/localstate.ts

@@ -0,0 +1,67 @@
+import { Ref } from "@nuxtjs/composition-api"
+import { distinctUntilChanged, pluck } from "rxjs"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+import { useStream } from "~/helpers/utils/composables"
+
+type LocalState = {
+  REMEMBERED_TEAM_ID: string | undefined
+}
+
+const defaultLocalState: LocalState = {
+  REMEMBERED_TEAM_ID: undefined,
+}
+
+const dispatchers = defineDispatchers({
+  bulkApplyState(_currentState: LocalState, payload: Partial<LocalState>) {
+    return payload
+  },
+  applyState<K extends keyof LocalState>(
+    _currentState: LocalState,
+    { key, value }: { key: K; value: LocalState[K] }
+  ) {
+    const result: Partial<LocalState> = {
+      [key]: value,
+    }
+
+    return result
+  },
+})
+
+export const localStateStore = new DispatchingStore(
+  defaultLocalState,
+  dispatchers
+)
+
+export const localState$ = localStateStore.subject$.asObservable()
+
+export function bulkApplyLocalState(obj: Partial<LocalState>) {
+  localStateStore.dispatch({
+    dispatcher: "bulkApplyState",
+    payload: obj,
+  })
+}
+
+export function applyLocalState<K extends keyof LocalState>(
+  key: K,
+  value: LocalState[K]
+) {
+  localStateStore.dispatch({
+    dispatcher: "applyState",
+    payload: { key, value },
+  })
+}
+
+export function useLocalState<K extends keyof LocalState>(
+  key: K
+): Ref<LocalState[K]> {
+  return useStream(
+    localStateStore.subject$.pipe(pluck(key), distinctUntilChanged()),
+    localStateStore.value[key],
+    (value: LocalState[K]) => {
+      localStateStore.dispatch({
+        dispatcher: "applyState",
+        payload: { key, value },
+      })
+    }
+  )
+}