refactor: use data global state in views

app/src/composables/useInfos.ts

@@ -10,8 +10,8 @@ import { useRouter } from 'vue-router'
 import api from '@/api'
 import { isEmptyValue, timeout } from '@/helpers/commons'
 import i18n from '@/i18n'
-import { useStoreGetters } from '@/store/utils'
 import type { CustomRoute, RouteFromTo } from '@/types/commons'
+import { useDomains } from './data'
 import { useRequests, type ReconnectingArgs } from './useRequests'
 
 export const useInfos = createGlobalState(() => {
@@ -24,7 +24,7 @@ export const useInfos = createGlobalState(() => {
   const routerKey = ref<string | undefined>()
   const breadcrumb = ref<CustomRoute[]>([])
 
-  const { mainDomain } = useStoreGetters()
+  const { mainDomain } = useDomains()
   const ssoLink = computed(() => {
     return `//${mainDomain.value ?? host.value}/yunohost/sso`
   })

app/src/composables/useSearch.ts

@@ -7,7 +7,9 @@ export function useSearch<
   T extends any[] | TreeRootNode,
   V extends T extends (infer V)[] ? V : AnyTreeNode,
 >(
-  items: MaybeRefOrGetter<T | undefined> | ComputedRef<T | undefined>,
+  items:
+    | MaybeRefOrGetter<T | null | undefined>
+    | ComputedRef<T | null | undefined>,
   filterFn: (search: string, item: V, index: number, arr: T) => boolean,
   {
     externalSearch,

app/src/views/_partials/DomainForm.vue

@@ -2,6 +2,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { asUnreffed } from '@/helpers/commons'
 import {
@@ -12,7 +13,6 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import { formatForm } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 defineOptions({
@@ -36,7 +36,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const { domains } = useStoreGetters()
+const { domains } = useDomains()
 const dynDomains = ['nohost.me', 'noho.st', 'ynh.fr']
 
 const dynDnsForbiden = computed(() => {

app/src/views/app/AppInfo.vue

@@ -12,13 +12,13 @@ import type {
   OnPanelApply,
 } from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
+import { useDomains } from '@/composables/data'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 import { humanPermissionName } from '@/helpers/filters/human'
 import { helpers, required } from '@/helpers/validators'
 import { formatI18nField } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { CoreConfigPanels } from '@/types/core/options'
 
 const props = defineProps<{
@@ -31,7 +31,7 @@ const route = useRoute()
 const router = useRouter()
 const modalConfirm = useAutoModal()
 
-const { domains } = useStoreGetters()
+const { domainsAsChoices } = useDomains()
 
 // FIXME
 type AppForm = {
@@ -526,7 +526,10 @@ async function uninstall() {
           <BInputGroup v-if="app.supports_change_url">
             <BInputGroupText>https://</BInputGroupText>
 
-            <BFormSelect v-model="form.url.domain" :options="domains" />
+            <BFormSelect
+              v-model="form.url.domain"
+              :options="domainsAsChoices"
+            />
 
             <BInputGroupText>/</BInputGroupText>
 

app/src/views/domain/DomainAdd.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
@@ -24,7 +23,6 @@ function onSubmit(data) {
       humanKey: { key: 'domains.add', name: data.domain },
     })
     .then(() => {
-      store.dispatch('RESET_CACHE_DATA', ['domains'])
       router.push({ name: 'domain-list' })
     })
     .catch((err: APIError) => {

app/src/views/domain/DomainInfo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 
 import api, { objectToParams } from '@/api'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
@@ -11,9 +10,9 @@ import type {
   OnPanelApply,
 } from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
+import { useDomains } from '@/composables/data'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { useStoreGetters } from '@/store/utils'
 import type { CoreConfigPanels } from '@/types/core/options'
 import DomainDns from '@/views/domain/DomainDns.vue'
 
@@ -24,8 +23,6 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const router = useRouter()
-const route = useRoute()
-const store = useStore()
 const modalConfirm = useAutoModal()
 const { loading, refetch } = useInitialQueries(
   [
@@ -39,18 +36,10 @@ const { loading, refetch } = useInitialQueries(
   { onQueriesResponse },
 )
 
-const { mainDomain } = useStoreGetters()
+const { mainDomain, domain } = useDomains(() => props.name)
 const config = shallowRef<ConfigPanelsProps | undefined>()
 const unsubscribeDomainFromDyndns = ref(false)
 
-const domain = computed(() => {
-  return store.getters.domain(props.name)
-})
-
-const parentName = computed(() => {
-  return store.getters.highestDomainParentName(props.name)
-})
-
 const cert = computed(() => {
   const { CA_type: authority, validity } = domain.value.certificate
   const baseInfos = { authority, validity }
@@ -66,10 +55,6 @@ const cert = computed(() => {
   return { icon: 'exclamation', variant: 'warning', ...baseInfos }
 })
 
-const dns = computed(() => {
-  return domain.value.dns
-})
-
 const isMainDomain = computed(() => {
   if (!mainDomain.value) return
   return props.name === mainDomain.value
@@ -135,17 +120,12 @@ async function setAsDefaultDomain() {
   const confirmed = await modalConfirm(t('confirm_change_maindomain'))
   if (!confirmed) return
 
-  api
+  api.put({
-    .put({
+    uri: `domains/${props.name}/main`,
-      uri: `domains/${props.name}/main`,
+    cachePath: `mainDomain.${props.name}`,
-      cachePath: `mainDomain.${props.name}`,
+    data: {},
-      data: {},
+    humanKey: { key: 'domains.set_default', name: props.name },
-      humanKey: { key: 'domains.set_default', name: props.name },
+  })
-    })
-    .then(() => {
-      // FIXME Have to commit by hand here since the response is empty (should return the given name)
-      store.commit('UPDATE_MAIN_DOMAIN', props.name)
-    })
 }
 </script>
 

app/src/views/domain/DomainList.vue

@@ -1,21 +1,16 @@
 <script setup lang="ts">
-import { useStoreGetters } from '@/store/utils'
-
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
+import { useDomains } from '@/composables/data'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
-import type { TreeRootNode } from '@/helpers/data/tree'
-import type { ComputedRef } from 'vue'
 
-const { mainDomain, domainsTree } = useStoreGetters()
 const { loading } = useInitialQueries([
   { uri: 'domains', cachePath: 'domains' },
 ])
+const { mainDomain, domainsTree } = useDomains()
 
-const [search, filteredTree] = useSearch(
+const [search, filteredTree] = useSearch(domainsTree, (s, node) =>
-  // FIXME rm ts type when moved to pinia or else
+  node.id.includes(s),
-  domainsTree as ComputedRef<TreeRootNode | undefined>,
-  (s, node) => node.id.includes(s),
 )
 </script>
 

app/src/views/user/UserCreate.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
+import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { asUnreffed } from '@/helpers/commons'
@@ -16,7 +17,6 @@ import {
   unique,
 } from '@/helpers/validators'
 import { formatForm } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
@@ -28,8 +28,8 @@ const { loading } = useInitialQueries(
   ],
   { onQueriesResponse },
 )
-
+const { usernames } = useUsersAndGroups()
-const { userNames, domainsAsChoices, mainDomain } = useStoreGetters()
+const { domainsAsChoices, mainDomain } = useDomains()
 
 type Form = typeof form.value
 const form = ref({
@@ -47,7 +47,7 @@ const fields = {
       computed(() => ({
         required,
         alphalownumdot_,
-        notInUsers: unique(userNames),
+        notInUsers: unique(usernames),
       })),
     ),
     props: {

app/src/views/user/UserEdit.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useArrayRule, useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { arrayDiff, asUnreffed } from '@/helpers/commons'
@@ -19,7 +20,6 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import { formatAdress, formatForm, sizeToM } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 const props = defineProps<{
@@ -41,7 +41,7 @@ const { loading } = useInitialQueries(
 
 const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
 
-const { user, domainsAsChoices, mainDomain } = useStoreGetters()
+const { domainsAsChoices, mainDomain } = useDomains()
 
 type Form = typeof form.value
 const form = ref({
@@ -174,8 +174,7 @@ const onUserEdit = onSubmit(async (onError, serverErrors) => {
   const { username: _, ...formData } = await formatForm(form, {
     removeEmpty: true,
   })
-  // FIXME not sure computed can be executed?
+  const user_ = useUsersAndGroups(props.name).user.value!
-  const user_ = user.value(props.name)
   const data = {}
   if (!Object.prototype.hasOwnProperty.call(formData, 'mailbox_quota')) {
     formData.mailbox_quota = ''

app/src/views/user/UserImport.vue

@@ -2,9 +2,9 @@
 import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 
 import api from '@/api'
+import { resetCache } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { required } from '@/helpers/validators'
@@ -13,7 +13,6 @@ import type { FieldProps, FileModelValue, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const router = useRouter()
-const store = useStore()
 const modalConfirm = useAutoModal()
 
 type Form = typeof form.value
@@ -69,16 +68,12 @@ const onUserImport = onSubmit(async (onError) => {
   if (!requestArgs.delete) delete requestArgs.delete
   if (!requestArgs.update) delete requestArgs.update
   const data = await formatForm(requestArgs)
+
   api
     .post({ uri: 'users/import', data })
     .then(() => {
       // Reset all cached data related to users.
-      store.dispatch('RESET_CACHE_DATA', [
+      resetCache(['users', 'userDetails', 'groups', 'permissions'])
-        'users',
-        'users_details',
-        'groups',
-        'permissions',
-      ])
       router.push({ name: 'user-list' })
     })
     .catch(onError)

app/src/views/user/UserInfo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
+import { useUsersAndGroups } from '@/composables/data'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { useStoreGetters } from '@/store/utils'
 
 const props = defineProps<{ name: string }>()
 
@@ -16,9 +16,8 @@ const { loading } = useInitialQueries([
   },
 ])
 
-const { user: userGetter } = useStoreGetters()
+const { user } = useUsersAndGroups(() => props.name)
 const purge = ref(false)
-const user = computed(() => userGetter.value(props.name))
 
 function deleteUser() {
   const data = purge.value ? { purge: '' } : {}

app/src/views/user/UserList.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { type ComputedRef } from 'vue'
+import { useUsersAndGroups } from '@/composables/data'
-
 import { useInfos } from '@/composables/useInfos'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
-import { useStoreGetters } from '@/store/utils'
-import type { Obj } from '@/types/commons'
 
 const { loading } = useInitialQueries([
   {
@@ -14,9 +11,9 @@ const { loading } = useInitialQueries([
   },
 ])
 
-const { users } = useStoreGetters()
+const { users } = useUsersAndGroups()
 const [search, filteredUsers] = useSearch(
-  users as ComputedRef<Obj[] | undefined>,
+  users,
   (s, user) =>
     user.username.toLowerCase().includes(s) || user.groups.includes(s),
 )