refactor(ui): refactor admin's Stats store to setup syntax

Author: luizhf42

ui/admin/src/store/api/stats.ts

@@ -1,5 +1,5 @@
-import { adminApi } from "./../../api/http";
+import { adminApi } from "@admin/api/http";
 
-const getStats = async () => adminApi.getStats();
+const getAdminStats = async () => adminApi.getStats();
 
-export default getStats;
+export default getAdminStats;

ui/admin/src/store/modules/stats.ts

@@ -1,27 +1,14 @@
 import { defineStore } from "pinia";
 import { IAdminStats } from "@admin/interfaces/IStats";
-import getStats from "../api/stats";
+import getAdminStats from "../api/stats";
 
-export const useStatsStore = defineStore("stats", {
-  state: () => ({
-    stats: {} as IAdminStats,
-  }),
+const useStatsStore = defineStore("stats", () => {
+  const getStats = async () => {
+    const { data } = await getAdminStats();
+    return data as IAdminStats;
+  };
 
-  getters: {
-    getStats: (state) => state.stats,
-  },
-
-  actions: {
-    async get() {
-      const res = await getStats();
-      this.stats = res.data as IAdminStats;
-      return res;
-    },
-
-    clearListState() {
-      this.stats = {} as IAdminStats;
-    },
-  },
+  return { getStats };
 });
 
 export default useStatsStore;

ui/admin/src/views/Dashboard.vue

@@ -20,8 +20,9 @@
 
 <script setup lang="ts">
 import axios, { AxiosError } from "axios";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import useStatsStore from "@admin/store/modules/stats";
+import { IAdminStats } from "@admin/interfaces/IStats";
 import { StatCardItem } from "@/interfaces/IStats";
 import useSnackbar from "@/helpers/snackbar";
 import StatCard from "@/components/StatCard.vue";
@@ -30,59 +31,59 @@ const snackbar = useSnackbar();
 const statsStore = useStatsStore();
 const items = ref<StatCardItem[]>([]);
 const hasStatus = ref(false);
-const itemsStats = computed(() => statsStore.getStats);
+const stats = ref({} as IAdminStats);
 
 onMounted(async () => {
   try {
-    await statsStore.get();
+    stats.value = await statsStore.getStats();
     items.value = [
       {
         title: "Registered Users",
         content: "Registered users",
         icon: "mdi-account-group",
         buttonLabel: "View all Users",
         path: "users",
-        stat: itemsStats.value.registered_users ?? 0,
+        stat: stats.value.registered_users ?? 0,
       },
       {
         title: "Registered Devices",
         content: "Registered devices",
         icon: "mdi-developer-board",
         buttonLabel: "View all Devices",
         path: "devices",
-        stat: itemsStats.value.registered_devices ?? 0,
+        stat: stats.value.registered_devices ?? 0,
       },
       {
         title: "Online Devices",
         content: "Devices are online and ready for connecting",
         icon: "mdi-developer-board",
         buttonLabel: "View all Devices",
         path: "devices",
-        stat: itemsStats.value.online_devices ?? 0,
+        stat: stats.value.online_devices ?? 0,
       },
       {
         title: "Active Sessions",
         content: "Active SSH Sessions opened by users",
         icon: "mdi-developer-board",
         buttonLabel: "View all Sessions",
         path: "sessions",
-        stat: itemsStats.value.active_sessions ?? 0,
+        stat: stats.value.active_sessions ?? 0,
       },
       {
         title: "Pending Devices",
         content: "Pending devices",
         icon: "mdi-developer-board",
         buttonLabel: "View all Devices",
         path: "devices",
-        stat: itemsStats.value.pending_devices ?? 0,
+        stat: stats.value.pending_devices ?? 0,
       },
       {
         title: "Rejected Devices",
         content: "Rejected devices",
         icon: "mdi-developer-board",
         buttonLabel: "View all Devices",
         path: "devices",
-        stat: itemsStats.value.rejected_devices ?? 0,
+        stat: stats.value.rejected_devices ?? 0,
       },
     ];
   } catch (error: unknown) {
@@ -98,5 +99,5 @@ onMounted(async () => {
   }
 });
 
-defineExpose({ items, itemsStats, hasStatus });
+defineExpose({ items, stats, hasStatus });
 </script>

ui/admin/tests/unit/store/modules/stats.spec.ts

@@ -1,36 +1,23 @@
-import { describe, expect, it, beforeEach } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { setActivePinia, createPinia } from "pinia";
 import useStatsStore from "@admin/store/modules/stats";
 
-describe("Stats Pinia Store", () => {
-  let statsStore: ReturnType<typeof useStatsStore>;
-
-  const stats = {
-    registered_devices: 2,
-    online_devices: 1,
-    active_sessions: 1,
-    pending_devices: 1,
-    registered_users: 10,
-    rejected_devices: 0,
-  };
-
-  beforeEach(() => {
-    setActivePinia(createPinia());
-    statsStore = useStatsStore();
-  });
+const stats = {
+  registered_devices: 2,
+  online_devices: 1,
+  active_sessions: 1,
+  pending_devices: 1,
+  registered_users: 10,
+  rejected_devices: 0,
+};
 
-  it("returns default stats state", () => {
-    expect(statsStore.getStats).toEqual({});
-  });
-
-  it("sets stats state", () => {
-    statsStore.stats = stats;
-    expect(statsStore.getStats).toEqual(stats);
-  });
+describe("Stats Pinia Store", () => {
+  setActivePinia(createPinia());
+  const statsStore = useStatsStore();
 
-  it("clears stats state", () => {
-    statsStore.stats = stats;
-    statsStore.clearListState();
-    expect(statsStore.getStats).toEqual({});
+  it("returns default stats state", async () => {
+    statsStore.getStats = vi.fn().mockResolvedValue(stats);
+    const responseData = await statsStore.getStats();
+    expect(responseData).toEqual(stats);
   });
 });

ui/admin/tests/unit/views/Dashboard/index.spec.ts

@@ -1,14 +1,12 @@
 import { createVuetify } from "vuetify";
-import { mount, VueWrapper } from "@vue/test-utils";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
 import { createPinia, setActivePinia } from "pinia";
 import useStatsStore from "@admin/store/modules/stats";
 import routes from "@admin/router";
 import Dashboard from "@admin/views/Dashboard.vue";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 
-type DashboardWrapper = VueWrapper<InstanceType<typeof Dashboard>>;
-
 const stats = {
   registered_users: 0,
   registered_devices: 0,
@@ -72,25 +70,16 @@ const cardsContent = [
 const numberOfCards = 6;
 
 describe("Dashboard", () => {
-  let wrapper: DashboardWrapper;
-
-  beforeEach(async () => {
-    const pinia = createPinia();
-    setActivePinia(pinia);
-
-    const statsStore = useStatsStore();
-    statsStore.get = vi.fn().mockResolvedValue(undefined);
-    statsStore.stats = stats;
-
-    const vuetify = createVuetify();
-
-    wrapper = mount(Dashboard, {
-      global: {
-        plugins: [pinia, vuetify, routes, SnackbarPlugin],
-      },
-    });
+  const pinia = createPinia();
+  setActivePinia(pinia);
+  const statsStore = useStatsStore();
+  statsStore.getStats = vi.fn().mockResolvedValue(stats);
+  const vuetify = createVuetify();
 
-    await statsStore.get();
+  const wrapper = mount(Dashboard, {
+    global: {
+      plugins: [pinia, vuetify, routes, SnackbarPlugin],
+    },
   });
 
   it("Is a Vue instance", () => {
@@ -103,7 +92,7 @@ describe("Dashboard", () => {
 
   it("Renders the template with data", async () => {
     expect(wrapper.vm.items).toEqual(cardsContent);
-    expect(wrapper.vm.itemsStats).toEqual(stats);
+    expect(wrapper.vm.stats).toEqual(stats);
     expect(wrapper.vm.hasStatus).toBe(false);
   });