diff --git a/packages/hoppscotch-app/components/collections/ChooseType.vue b/packages/hoppscotch-app/components/collections/ChooseType.vue index fffc68ae3..4ecdb7fc4 100644 --- a/packages/hoppscotch-app/components/collections/ChooseType.vue +++ b/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(null) const updateSelectedTeam = (team: TeamData | undefined) => { + REMEMBERED_TEAM_ID.value = team?.id emit("update-selected-team", team) } diff --git a/packages/hoppscotch-app/helpers/utils/composables.ts b/packages/hoppscotch-app/helpers/utils/composables.ts index 0950809ff..d0a8aea2e 100644 --- a/packages/hoppscotch-app/helpers/utils/composables.ts +++ b/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( stream$: Observable, initialValue: T -): Ref> { +): Ref { let sub: Subscription | null = null onBeforeUnmount(() => { @@ -32,7 +31,7 @@ export function useReadonlyStream( targetRef.value = value }) - return readonly(targetRef) + return readonly(targetRef) as Ref } export function useStream( diff --git a/packages/hoppscotch-app/newstore/localpersistence.ts b/packages/hoppscotch-app/newstore/localpersistence.ts index b64c5368b..a6f7a033a 100644 --- a/packages/hoppscotch-app/newstore/localpersistence.ts +++ b/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() diff --git a/packages/hoppscotch-app/newstore/localstate.ts b/packages/hoppscotch-app/newstore/localstate.ts new file mode 100644 index 000000000..65d296957 --- /dev/null +++ b/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) { + return payload + }, + applyState( + _currentState: LocalState, + { key, value }: { key: K; value: LocalState[K] } + ) { + const result: Partial = { + [key]: value, + } + + return result + }, +}) + +export const localStateStore = new DispatchingStore( + defaultLocalState, + dispatchers +) + +export const localState$ = localStateStore.subject$.asObservable() + +export function bulkApplyLocalState(obj: Partial) { + localStateStore.dispatch({ + dispatcher: "bulkApplyState", + payload: obj, + }) +} + +export function applyLocalState( + key: K, + value: LocalState[K] +) { + localStateStore.dispatch({ + dispatcher: "applyState", + payload: { key, value }, + }) +} + +export function useLocalState( + key: K +): Ref { + return useStream( + localStateStore.subject$.pipe(pluck(key), distinctUntilChanged()), + localStateStore.value[key], + (value: LocalState[K]) => { + localStateStore.dispatch({ + dispatcher: "applyState", + payload: { key, value }, + }) + } + ) +}