refactor: reconnection handling

app/src/api/api.ts

@@ -1,4 +1,8 @@
-import { useRequests, type APIRequestAction } from '@/composables/useRequests'
+import {
+  useRequests,
+  type APIRequestAction,
+  type ReconnectingArgs,
+} from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
 import type { Obj } from '@/types/commons'
 import { APIUnauthorizedError, type APIError } from './errors'
@@ -233,7 +237,11 @@ export default {
    * @returns Promise that resolve yunohost version infos
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  tryToReconnect({ attemps = 5, delay = 2000, initialDelay = 0 } = {}) {
+  tryToReconnect({
+    attemps = 5,
+    delay = 2000,
+    initialDelay = 0,
+  }: ReconnectingArgs = {}) {
     return new Promise((resolve, reject) => {
       function reconnect(n: number) {
         store

app/src/composables/useRequests.ts

@@ -1,6 +1,6 @@
 import { createGlobalState } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
-import { computed, reactive, shallowRef } from 'vue'
+import { computed, reactive, ref, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 import type { APIQuery, RequestMethod } from '@/api/api'
@@ -40,6 +40,13 @@ export type RequestMessage = {
   variant: StateVariant
 }
 
+export type ReconnectingArgs = {
+  attemps?: number
+  origin?: string
+  initialDelay?: number
+  delay?: number
+}
+
 export const STATUS_VARIANT = {
   pending: 'primary',
   success: 'success',
@@ -52,6 +59,7 @@ export const useRequests = createGlobalState(() => {
   const router = useRouter()
 
   const requests = shallowRef<APIRequest[]>([])
+  const reconnecting = ref<ReconnectingArgs | undefined>()
   const currentRequest = computed(() => {
     return requests.value.find((r) => r.showModal)
   })
@@ -189,6 +197,7 @@ export const useRequests = createGlobalState(() => {
     requests,
     historyList,
     currentRequest,
+    reconnecting,
     locked,
     startRequest,
     endRequest,

app/src/store/info.ts

@@ -1,7 +1,8 @@
-import router from '@/router'
-import i18n from '@/i18n'
 import api from '@/api'
-import { timeout, isEmptyValue } from '@/helpers/commons'
+import { useRequests, type ReconnectingArgs } from '@/composables/useRequests'
+import { isEmptyValue, timeout } from '@/helpers/commons'
+import i18n from '@/i18n'
+import router from '@/router'
 
 export default {
   state: {
@@ -9,7 +10,6 @@ export default {
     installed: null,
     connected: localStorage.getItem('connected') === 'true', // Boolean
     yunohost: null, // Object { version, repo }
-    reconnecting: null, // null|Object { attemps, delay, initialDelay }
     routerKey: undefined, // String if current route has params
     breadcrumb: [], // Array of routes
     transitionName: null, // String of CSS class if transitions are enabled
@@ -29,10 +29,6 @@ export default {
       state.yunohost = yunohost
     },
 
-    SET_RECONNECTING(state, args) {
-      state.reconnecting = args
-    },
-
     SET_ROUTER_KEY(state, key) {
       state.routerKey = key
     },
@@ -114,9 +110,9 @@ export default {
       return api.get('logout')
     },
 
-    TRY_TO_RECONNECT({ commit }, args = {}) {
+    TRY_TO_RECONNECT({ commit }, args?: ReconnectingArgs) {
       // FIXME This is very ugly arguments forwarding, will use proper component way of doing this when switching to Vue 3 (teleport)
-      commit('SET_RECONNECTING', args)
+      useRequests().reconnecting.value = args
     },
 
     GET_YUNOHOST_INFOS({ commit }) {
@@ -206,8 +202,6 @@ export default {
     installed: (state) => state.installed,
     connected: (state) => state.connected,
     yunohost: (state) => state.yunohost,
-    reconnecting: (state) => state.reconnecting,
-    history: (state) => state.history,
     routerKey: (state) => state.routerKey,
     breadcrumb: (state) => state.breadcrumb,
     transitionName: (state) => state.transitionName,