refactor(ui): migrate Spinner store to Pinia

Author: luizhf42

ui/src/api/interceptors.ts

@@ -1,26 +1,26 @@
 import { AxiosError, AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from "axios";
-import { store } from "../store";
 import { router } from "../router";
 import useAuthStore from "@/store/modules/auth";
+import useSpinnerStore from "@/store/modules/spinner";
 
 const onRequest = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
-  store.dispatch("spinner/setStatus", true);
+  useSpinnerStore().status = true;
   return config;
 };
 
 const onRequestError = (error: AxiosError) => {
-  store.dispatch("spinner/setStatus", false);
+  useSpinnerStore().status = false;
   return Promise.reject(error);
 };
 
 const onResponse = (response: AxiosResponse): AxiosResponse => {
-  store.dispatch("spinner/setStatus", false);
+  useSpinnerStore().status = false;
   return response;
 };
 
 const onResponseError = async (error: AxiosError): Promise<AxiosError> => {
   const { logout } = useAuthStore();
-  store.dispatch("spinner/setStatus", false);
+  useSpinnerStore().status = false;
   if (error.response?.status === 401) {
     logout();
     await router.push({ name: "Login", query: router.currentRoute.value.query });

ui/src/layouts/AppLayout.vue

@@ -164,7 +164,6 @@ import { useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
 import Logo from "../assets/logo-inverted.png";
 import { envVariables } from "../envVariables";
-import { useStore } from "../store";
 import UserWarning from "../components/User/UserWarning.vue";
 import Namespace from "@/components/Namespace/Namespace.vue";
 import AppBar from "../components/AppBar/AppBar.vue";
@@ -174,15 +173,16 @@ import Snackbar from "@/components/Snackbar/Snackbar.vue";
 import useLayoutStore from "@/store/modules/layout";
 import useNamespacesStore from "@/store/modules/namespaces";
 import usePrivateKeysStore from "@/store/modules/private_keys";
+import useSpinnerStore from "@/store/modules/spinner";
 
 defineOptions({
   inheritAttrs: false,
 });
 
 const router = useRouter();
-const store = useStore();
 const layoutStore = useLayoutStore();
 const namespacesStore = useNamespacesStore();
+const spinnerStore = useSpinnerStore();
 const { getPrivateKeyList } = usePrivateKeysStore();
 const currentRoute = computed(() => router.currentRoute);
 const showNamespaceAdd = ref(false);
@@ -195,8 +195,8 @@ const permanent = computed(() => lgAndUp.value);
 const showNavigationDrawer = ref(lgAndUp.value);
 
 const hasSpinner = computed({
-  get() { return store.getters["spinner/status"]; },
-  set(v) { store.dispatch("spinner/setStatus", v); },
+  get() { return spinnerStore.status; },
+  set(newStatus) { spinnerStore.status = newStatus; },
 });
 
 const disableItem = (item: string) => !hasNamespaces.value && item !== "Settings";

ui/src/store/helpers/http.ts

@@ -1,7 +1,7 @@
 import Axios from "axios";
 import { router } from "@/router";
-import { store } from "..";
 import useAuthStore from "../modules/auth";
+import useSpinnerStore from "@/store/modules/spinner";
 
 export default () => {
   const axios = Axios.create({
@@ -12,10 +12,11 @@ export default () => {
   });
 
   const { logout } = useAuthStore();
+  const spinnerStore = useSpinnerStore();
 
   axios.interceptors.request.use(
     (config) => {
-      store.dispatch("spinner/setStatus", true);
+      spinnerStore.status = true;
       return config;
     },
     async (error) => {
@@ -25,11 +26,11 @@ export default () => {
 
   axios.interceptors.response.use(
     (response) => {
-      store.dispatch("spinner/setStatus", false);
+      spinnerStore.status = false;
       return response;
     },
     async (error) => {
-      store.dispatch("spinner/setStatus", false);
+      spinnerStore.status = false;
       if (error.response.status === 401) {
         logout();
         await router.push({ name: "Login" });

ui/src/store/index.ts

@@ -5,12 +5,10 @@ import { users, UsersState } from "./modules/users";
 import { tags, TagsState } from "./modules/tags";
 import { stats, StatsState } from "./modules/stats";
 import { support, SupportState } from "./modules/support";
-import { spinner, SpinnerState } from "./modules/spinner";
 import { webEndpoints, WebEndpointsState } from "./modules/web_endpoints";
 
 export interface State {
   webEndpoints: WebEndpointsState;
-  spinner: SpinnerState;
   stats: StatsState;
   support: SupportState;
   tags: TagsState;
@@ -22,7 +20,6 @@ export const key: InjectionKey<Store<State>> = Symbol("store");
 export const store = createStore<State>({
   modules: {
     webEndpoints,
-    spinner,
     stats,
     support,
     tags,

ui/src/store/modules/spinner.ts

@@ -1,27 +1,10 @@
-import { Module } from "vuex";
-import { State } from "..";
+import { defineStore } from "pinia";
+import { ref } from "vue";
 
-export interface SpinnerState {
-  status: boolean;
-}
+const useSpinnerStore = defineStore("spinner", () => {
+  const status = ref(false);
 
-export const spinner: Module<SpinnerState, State> = {
-  namespaced: true,
-  state: {
-    status: false,
-  },
-  getters: {
-    status: (state: SpinnerState) => state.status,
-  },
-  mutations: {
-    setStatus: (state, status) => {
-      state.status = status;
-    },
-  },
+  return { status };
+});
 
-  actions: {
-    setStatus: async ({ commit }, status) => {
-      commit("setStatus", status);
-    },
-  },
-};
+export default useSpinnerStore;

ui/tests/layouts/AppLayout.spec.ts

@@ -12,13 +12,15 @@ import { router } from "@/router";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 import { devicesApi, containersApi } from "@/api/http";
 import { envVariables } from "@/envVariables";
+import useSpinnerStore from "@/store/modules/spinner";
 
 let mockDevices: MockAdapter;
 let mockContainers: MockAdapter;
 
 describe("App Layout Component", () => {
   let wrapper;
   setActivePinia(createPinia());
+  const spinnerStore = useSpinnerStore();
   const vuetify = createVuetify({
     components,
     directives,
@@ -38,7 +40,7 @@ describe("App Layout Component", () => {
 
     envVariables.hasWebEndpoints = true;
     envVariables.isCloud = true;
-    store.dispatch("spinner/setStatus", true);
+    spinnerStore.status = true;
 
     mockDevices = new MockAdapter(devicesApi.getAxios());
     mockContainers = new MockAdapter(containersApi.getAxios());
@@ -96,7 +98,7 @@ describe("App Layout Component", () => {
   });
 
   it("Renders loading screen", async () => {
-    await store.dispatch("spinner/setStatus", true);
+    spinnerStore.status = true;
     await flushPromises();
 
     const layoutWrapper = wrapper.findComponent(AppLayout);

ui/tests/store/modules/web_endpoints.spec.ts

@@ -1,3 +1,4 @@
+import { createPinia, setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import MockAdapter from "axios-mock-adapter";
 import { webEndpointsApi } from "@/api/http";
@@ -14,6 +15,7 @@ const initialWebEndpoints = {
 };
 
 describe("WebEndpoints store", () => {
+  setActivePinia(createPinia());
   let mock: MockAdapter;
 
   beforeEach(() => {