feat(store): adds multi account support

Author: dvcol

src/models/trakt/trakt-user.model.ts

@@ -83,7 +83,7 @@ export type TraktUserLimits = {
 };
 
 export type TraktUserSettings = {
-  user: TraktUser;
+  user: TraktUserExtended;
   account: TraktUserAccount;
   connections: TraktUserConnections;
   sharing_text: {

src/router/create-router.ts

@@ -2,7 +2,7 @@ import { createRouter as createVueRouter, createWebHashHistory } from 'vue-route
 
 import { Route, routes } from '~/router/routes';
 import { useRouterStore } from '~/stores/router.store';
-import { useSettingsStoreRefs } from '~/stores/settings.store';
+import { useAuthSettingsStoreRefs } from '~/stores/settings.store';
 
 export type RouterOptions = { baseName?: string; baseUrl?: string };
 export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL }: RouterOptions) => {
@@ -24,7 +24,7 @@ export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL
     ],
   });
 
-  const { isAuthenticated } = useSettingsStoreRefs();
+  const { isAuthenticated } = useAuthSettingsStoreRefs();
   router.beforeResolve(async to => {
     const query: Record<string, string> = { ...routeParam };
     if (routeParam) setRouteParam(undefined);

src/stores/settings.store.ts

@@ -1,13 +1,59 @@
 import { defineStore, storeToRefs } from 'pinia';
-import { computed, reactive } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
 import type { TmdbClientAuthentication } from '~/models/tmdb/tmdb-client.model';
 import type { TraktClientAuthentication } from '~/models/trakt/trakt-authentication.model';
 
+import type { TraktUserSettings } from '~/models/trakt/trakt-user.model';
 import type { TvdbClientAuthentication } from '~/models/tvdb/tvdb-client.model';
 
 import { storage } from '~/utils/browser/browser-storage.utils';
 
+type UserSetting = TraktUserSettings | Record<string, never>;
+type UserSettings = Record<string, UserSetting>;
+
+export const useUserSettingsStore = defineStore('settings.user', () => {
+  const userSettings = reactive<UserSettings>({});
+  const user = ref<string>('default');
+  const userSetting = computed(() => userSettings[user.value]);
+
+  const syncSetUser = (_settings: UserSetting = userSetting.value, account: string = _settings?.user?.username ?? user.value) => {
+    const _lastUser = storage.sync.set(`settings.last-user`, account);
+    const _setting = storage.sync.set(`settings.user.${encodeURIComponent(account)}`, _settings);
+    console.info('settings-store', 'Saving user', account, _settings);
+    return Promise.all([_lastUser, _setting]);
+  };
+  const syncClearUser = (account?: string) => {
+    console.info('settings-store', 'Clearing user', account);
+    return storage.sync.remove(`settings.user${account ? `.${encodeURIComponent(account)}` : ''}`);
+  };
+  const syncRestoreUser = async (account: string = user.value) => {
+    if (account === 'default') account = (await storage.sync.get<string>(`settings.last-user`)) || account;
+    user.value = account;
+    console.info('settings-store', 'Restoring user', account);
+    const _setting = await storage.sync.get<UserSetting>(`settings.user.${encodeURIComponent(account)}`);
+    if (!userSettings[account]) userSettings[account] = {};
+    if (_setting) Object.assign(userSettings[account], _setting);
+    return _setting;
+  };
+
+  const setUserSetting = (_settings: UserSetting = {}, account: string = _settings?.user?.username ?? user.value) => {
+    if (!userSettings[account]) userSettings[account] = {};
+    Object.assign(userSettings[account], _settings);
+    console.info('settings-store', 'User changed', account, { ..._settings });
+    if (_settings) {
+      user.value = account;
+      return syncSetUser(_settings, account);
+    }
+    user.value = 'default';
+    return syncClearUser(account);
+  };
+
+  return { user, userSetting, setUserSetting, syncSetUser, syncClearUser, syncRestoreUser };
+});
+
+export const useUserSettingsStoreRefs = () => storeToRefs(useUserSettingsStore());
+
 type SettingsAuth = {
   trakt?: TraktClientAuthentication;
   tvdb?: TvdbClientAuthentication;
@@ -20,40 +66,56 @@ type SettingsAuthenticated = {
   tmdb?: boolean;
 };
 
-export const useSettingsStore = defineStore('settings', () => {
-  const auth = reactive<SettingsAuth>({});
+type SettingsAuths = Record<string, SettingsAuth>;
+
+export const useAuthSettingsStore = defineStore('settings.auth', () => {
+  const { user } = useUserSettingsStoreRefs();
+
+  const auths = reactive<SettingsAuths>({});
+  const auth = computed(() => auths[user.value]);
+
   const authenticated = reactive<SettingsAuthenticated>({});
-  const isAuthenticated = computed(() => Object.values(authenticated).every(Boolean));
+  const isAuthenticated = computed(() => {
+    const values = Object.values(authenticated);
+    return values.length > 0 ? values.every(Boolean) : false;
+  });
 
   const setAuthenticated = ({ trakt, tvdb, tmdb }: SettingsAuth = {}) => {
     if (trakt) authenticated.trakt = !!trakt.access_token;
     if (tvdb) authenticated.tvdb = !!tvdb.accessToken;
     if (tmdb) authenticated.tmdb = !!tmdb.accessToken;
+    return authenticated;
+  };
+
+  const syncSetAuth = (_auth: SettingsAuth = auth.value, account: string = user.value) => {
+    console.info('settings-store', 'Saving auth', account, _auth);
+    return storage.sync.set(`settings.auth.${encodeURIComponent(account)}`, _auth);
+  };
+  const syncClearAuth = (account?: string) => {
+    console.info('settings-store', 'Clearing auth', account);
+    return storage.sync.remove(`settings.auth${account ? `.${encodeURIComponent(account)}` : ''}`);
+  };
+  const syncRestoreAuth = async (account: string = user.value) => {
+    console.info('settings-store', 'Restoring auth', account);
+    const _auth = await storage.sync.get<SettingsAuth>(`settings.auth.${encodeURIComponent(account)}`);
+    if (!auths[account]) auths[account] = {};
+    if (_auth) Object.assign(auths[account], _auth);
+    setAuthenticated(_auth);
+    return auths[account];
   };
 
-  const syncSetAuth = (_auth: SettingsAuth) => storage.sync.set('settings.auth', _auth);
-  const syncClearAuth = () => storage.sync.remove('settings.auth');
-  const syncRestoreAuth = () =>
-    storage.sync.get<SettingsAuth>('settings.auth').then(_auth => {
-      Object.assign(auth, _auth);
-      setAuthenticated(_auth);
-      return _auth;
-    });
-
-  const setAuth = (_auth: SettingsAuth = {}) => {
-    if (_auth.trakt) auth.trakt = _auth.trakt;
-    if (_auth.tvdb) auth.tvdb = _auth.tvdb;
-    if (_auth.tmdb) auth.tmdb = _auth.tmdb;
-    console.info('settings-store', 'Auth changed', { ...auth });
+  const setAuth = async (_auth: SettingsAuth = {}, account: string = user.value) => {
+    if (!auths[account]) auths[account] = {};
+    if (_auth.trakt) auths[account].trakt = _auth.trakt;
+    if (_auth.tvdb) auths[account].tvdb = _auth.tvdb;
+    if (_auth.tmdb) auths[account].tmdb = _auth.tmdb;
+    console.info('settings-store', 'Auth changed', account, { ...auths });
     setAuthenticated(_auth);
-    if (Object.keys(_auth).length > 0) {
-      syncSetAuth(auth).then(() => console.info('settings-store', 'Auth saved', { ...auth }));
-    } else {
-      syncClearAuth().then(() => console.info('settings-store', 'Auth cleared'));
-    }
+    if (Object.keys(_auth).length > 0) return syncSetAuth(_auth, account);
+    return syncClearAuth(account);
   };
 
-  return { auth, setAuth, authenticated, isAuthenticated, syncRestoreAuth };
+  return { auth, setAuth, authenticated, isAuthenticated, syncRestoreAuth, syncSetAuth };
 });
 
-export const useSettingsStoreRefs = () => storeToRefs(useSettingsStore());
+export const useAuthSettingsStoreRefs = () => storeToRefs(useAuthSettingsStore());

src/web/init-services.ts

@@ -1,22 +1,38 @@
 import { tmdbService } from '~/services/tmdb-client/tmdb-client.service';
 import { traktService } from '~/services/trakt-client/trakt-client.service';
 import { tvdbService } from '~/services/tvdb-client/tvdb-client.service';
-import { useSettingsStore } from '~/stores/settings.store';
+import { useAuthSettingsStore, useAuthSettingsStoreRefs, useUserSettingsStore, useUserSettingsStoreRefs } from '~/stores/settings.store';
 
 export const initServices = async () => {
-  const { setAuth, syncRestoreAuth } = useSettingsStore();
+  const { setAuth, syncRestoreAuth, syncSetAuth } = useAuthSettingsStore();
+  const { setUserSetting, syncRestoreUser } = useUserSettingsStore();
 
-  const auth = await syncRestoreAuth();
+  const { user } = useUserSettingsStoreRefs();
+  const { isAuthenticated } = useAuthSettingsStoreRefs();
+
+  const restoredSettings = await syncRestoreUser();
+  const restoredAuth = await syncRestoreAuth(restoredSettings?.user?.username);
 
   const restore = [];
-  if (auth.trakt) restore.push(traktService.importAuthentication(auth.trakt).then(_auth => console.info('TraktClient.importAuthentication', _auth)));
-  if (auth.tvdb) restore.push(tvdbService.importAuthentication(auth.tvdb).then(_auth => console.info('TvdbClient.importAuthentication', _auth)));
-  if (auth.tmdb) console.info('TmdbClient.importAuthentication', tmdbService.importAuthentication(auth.tmdb));
+  if (restoredAuth.trakt) restore.push(traktService.importAuthentication(restoredAuth.trakt).then(_auth => console.info('Trakt import', _auth)));
+  if (restoredAuth.tvdb) restore.push(tvdbService.importAuthentication(restoredAuth.tvdb).then(_auth => console.info('Tvdb import', _auth)));
+  if (restoredAuth.tmdb) console.info('TmdbClient.importAuthentication', tmdbService.importAuthentication(restoredAuth.tmdb));
   await Promise.all(restore);
 
-  traktService.onAuthChange(_auth => {
-    console.info('TraktClient.onAuthChange', _auth);
-    setAuth({ trakt: _auth });
+  if (isAuthenticated.value && user.value === 'default') {
+    console.info('TraktClient.users.settings', user.value);
+    const settings = await traktService.users.settings().then(res => res.json());
+    await setUserSetting(settings);
+    await syncSetAuth();
+  }
+
+  traktService.onAuthChange(async (_auth, prev) => {
+    console.info('TraktClient.onAuthChange', _auth, prev);
+    if (_auth?.access_token !== prev?.access_token) {
+      const settings = await traktService.users.settings().then(res => res.json());
+      await setUserSetting(settings);
+    }
+    await setAuth({ trakt: _auth });
   });
 
   traktService.onCall(async call => {