Migrate oauth store to pinia

src/boot/after_store.js

@@ -1,3 +1,4 @@
+/* global process */
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'
@@ -16,6 +17,7 @@ import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
+import { useOAuthStore } from 'src/stores/oauth'
 import { useI18nStore } from 'src/stores/i18n'
 import { useInterfaceStore } from 'src/stores/interface'
 import { useAnnouncementsStore } from 'src/stores/announcements'
@@ -227,8 +229,9 @@ const getStickers = async ({ store }) => {
 }
 
 const getAppSecret = async ({ store }) => {
-  if (store.state.oauth.userToken) {
-    store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
+  const oauth = useOAuthStore()
+  if (oauth.userToken) {
+    store.commit('setBackendInteractor', backendInteractorService(oauth.getToken))
   }
 }
 
@@ -322,20 +325,65 @@ const setConfig = async ({ store }) => {
   const apiConfig = configInfos[0]
   const staticConfig = configInfos[1]
 
-  await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
+  getAppSecret({ store })
+  await setSettings({ store, apiConfig, staticConfig })
 }
 
 const checkOAuthToken = async ({ store }) => {
-  if (store.getters.getUserToken()) {
-    return store.dispatch('loginUser', store.getters.getUserToken())
+  const oauth = useOAuthStore()
+  if (oauth.getUserToken) {
+    return store.dispatch('loginUser', oauth.getUserToken)
   }
   return Promise.resolve()
 }
 
 const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   const app = createApp(App)
+  // Must have app use pinia before we do anything that touches the store
+  // https://pinia.vuejs.org/core-concepts/plugins.html#Introduction
+  // "Plugins are only applied to stores created after the plugins themselves, and after pinia is passed to the app, otherwise they won't be applied."
   app.use(pinia)
 
+  const waitForAllStoresToLoad = async () => {
+    // the stores that do not persist technically do not need to be awaited here,
+    // but that involves either hard-coding the stores in some place (prone to errors)
+    // or writing another vite plugin to analyze which stores needs persisting (++load time)
+    const allStores = import.meta.glob('../stores/*.js', { eager: true })
+    if (process.env.NODE_ENV === 'development') {
+      // do some checks to avoid common errors
+      if (!Object.keys(allStores).length) {
+        throw new Error('No stores are available. Check the code in src/boot/after_store.js')
+      }
+    }
+    await Promise.all(
+      Object.entries(allStores)
+        .map(async ([name, mod]) => {
+          const isStoreName = name => name.startsWith('use')
+          if (process.env.NODE_ENV === 'development') {
+            if (Object.keys(mod).filter(isStoreName).length !== 1) {
+              throw new Error('Each store file must export exactly one store as a named export. Check your code in src/stores/')
+            }
+          }
+          const storeFuncName = Object.keys(mod).find(isStoreName)
+          if (storeFuncName && typeof mod[storeFuncName] === 'function') {
+            const p = mod[storeFuncName]().$persistLoaded
+            if (!(p instanceof Promise)) {
+              throw new Error(`${name} store's $persistLoaded is not a Promise. The persist plugin is not applied.`)
+            }
+            await p
+          } else {
+            throw new Error(`Store module ${name} does not export a 'use...' function`)
+          }
+        }))
+  }
+
+  try {
+    await waitForAllStoresToLoad()
+  } catch (e) {
+    console.error('Cannot load stores:', e)
+    storageError = e
+  }
+
   if (storageError) {
     useInterfaceStore().pushGlobalNotice({ messageKey: 'errors.storage_unavailable', level: 'error' })
   }