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

Author: luizhf42

ui/admin/src/components/Sessions/SessionList.vue

@@ -100,8 +100,8 @@ import handleError from "@/utils/handleError";
 const router = useRouter();
 const snackbar = useSnackbar();
 const sessionStore = useSessionsStore();
-const sessions = computed(() => sessionStore.getSessions);
-const sessionCount = computed(() => sessionStore.getNumberSessions);
+const sessions = computed(() => sessionStore.sessions);
+const sessionCount = computed(() => sessionStore.sessionCount);
 const itemsPerPage = ref(10);
 const loading = ref(false);
 const page = ref(1);
@@ -147,7 +147,7 @@ const headers = ref([
 const fetchSessions = async () => {
   try {
     loading.value = true;
-    await sessionStore.fetch({
+    await sessionStore.fetchSessionList({
       perPage: itemsPerPage.value,
       page: page.value,
     });

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

@@ -1,47 +1,30 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 import { IAdminSession } from "@admin/interfaces/ISession";
-import * as apiSession from "../api/sessions";
-
-export const useSessionsStore = defineStore("sessions", {
-  state: () => ({
-    sessions: [] as Array<IAdminSession>,
-    session: {} as IAdminSession,
-    numberSessions: 0,
-  }),
-
-  getters: {
-    getSessions: (state) => state.sessions,
-    getSession: (state) => state.session,
-    getNumberSessions: (state) => state.numberSessions,
-  },
-
-  actions: {
-    async fetch(data: { perPage: number; page: number }) {
-      const res = await apiSession.fetchSessions(data.perPage, data.page);
-
-      if (res.data.length) {
-        this.sessions = res.data as Array<IAdminSession>;
-        this.numberSessions = parseInt(res.headers["x-total-count"], 10);
-        return res;
-      }
-
-      return false;
-    },
-
-    async get(uid: string) {
-      const res = await apiSession.getSession(uid);
-      this.session = res.data as IAdminSession;
-    },
-
-    clearListSessions() {
-      this.sessions = [];
-      this.numberSessions = 0;
-    },
-
-    clearObjectSession() {
-      this.session = {} as IAdminSession;
-    },
-  },
+import * as sessionsApi from "../api/sessions";
+
+const useSessionsStore = defineStore("sessions", () => {
+  const sessions = ref<Array<IAdminSession>>([]);
+  const sessionCount = ref<number>(0);
+
+  const fetchSessionList = async (data: { perPage: number; page: number }) => {
+    const res = await sessionsApi.fetchSessions(data.perPage, data.page);
+
+    sessions.value = res.data as Array<IAdminSession>;
+    sessionCount.value = parseInt(res.headers["x-total-count"], 10);
+  };
+
+  const fetchSessionById = async (uid: string) => {
+    const { data } = await sessionsApi.getSession(uid);
+    return data as IAdminSession;
+  };
+
+  return {
+    sessions,
+    sessionCount,
+    fetchSessionList,
+    fetchSessionById,
+  };
 });
 
 export default useSessionsStore;

ui/admin/src/views/SessionDetails.vue

@@ -50,7 +50,7 @@
 
       <div>
         <div class="text-overline mt-3">
-          <h3>Ip Adress:</h3>
+          <h3>Ip Address:</h3>
         </div>
         <div :data-test="session.ip_address">
           <p>{{ session.ip_address }}</p>
@@ -110,25 +110,22 @@ const route = useRoute();
 const router = useRouter();
 const snackbar = useSnackbar();
 const sessionStore = useSessionsStore();
-
-const session = ref({} as IAdminSession);
 const sessionId = computed(() => route.params.id);
+const session = ref({} as IAdminSession);
+const sessionIsEmpty = computed(() => session.value && session.value.device_uid?.length === 0);
+
+const goToDevice = (deviceId: string) => {
+  router.push({ name: "deviceDetails", params: { id: deviceId } });
+};
 
 onMounted(async () => {
   try {
-    await sessionStore.get(sessionId.value as string);
-    session.value = sessionStore.getSession;
+    session.value = await sessionStore.fetchSessionById(sessionId.value as string);
   } catch {
     snackbar.showError("Failed to get session details.");
   }
 });
 
-const goToDevice = (deviceId: string) => {
-  router.push({ name: "deviceDetails", params: { id: deviceId } });
-};
-
-const sessionIsEmpty = computed(() => sessionStore.getSession && sessionStore.getSession.device_uid?.length === 0);
-
 defineExpose({ session });
 </script>
 

ui/admin/tests/unit/components/Session/SessionList/index.spec.ts

@@ -67,18 +67,15 @@ const sessions = [
 
 describe("Sessions List", () => {
   let wrapper: SessionListWrapper;
+  setActivePinia(createPinia());
+  const sessionStore = useSessionsStore();
+  const vuetify = createVuetify();
 
-  beforeEach(() => {
-    setActivePinia(createPinia());
-
-    const vuetify = createVuetify();
-
-    const sessionStore = useSessionsStore();
-
-    sessionStore.sessions = sessions as IAdminSession[];
-    sessionStore.numberSessions = sessions.length;
-    sessionStore.fetch = vi.fn();
+  sessionStore.sessions = sessions as IAdminSession[];
+  sessionStore.fetchSessionList = vi.fn();
+  sessionStore.sessionCount = sessions.length;
 
+  beforeEach(() => {
     wrapper = mount(SessionList, {
       global: {
         plugins: [vuetify, routes, SnackbarPlugin],
@@ -95,11 +92,9 @@ describe("Sessions List", () => {
   });
 
   it("Renders the template with session data", () => {
-    const dt = wrapper.find("[data-test='session-list']");
-    expect(dt.exists()).toBe(true);
-
-    const store = useSessionsStore();
-    expect(store.getSessions).toEqual(sessions);
-    expect(store.getNumberSessions).toBe(sessions.length);
+    const sessionList = wrapper.find("[data-test='session-list']");
+    expect(sessionList.exists()).toBe(true);
+    expect(sessionStore.sessions).toEqual(sessions);
+    expect(sessionStore.sessionCount).toBe(sessions.length);
   });
 });

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

@@ -1,89 +1,64 @@
-import { describe, expect, it, beforeEach } from "vitest";
+import { describe, expect, it } from "vitest";
 import { setActivePinia, createPinia } from "pinia";
 import useSessionsStore from "@admin/store/modules/sessions";
 import { IAdminSession } from "@admin/interfaces/ISession";
 
-describe("Sessions Pinia Store", () => {
-  let sessionsStore: ReturnType<typeof useSessionsStore>;
-
-  const session = {
-    uid: "8c354a00f50",
-    device_uid: "a582b47a42d",
-    device: {
-      uid: "a582b47a42d",
-      name: "39-5e-2a",
-      identity: {
-        mac: "00:00:00:00:00:00",
-      },
-      info: {
-        id: "debian",
-        pretty_name: "Debian GNU/Linux 10 (buster)",
-        version: "v0.2.5",
-      },
-      public_key: "----- PUBLIC KEY -----",
-      tenant_id: "00000000",
-      last_seen: "2020-05-18T13:27:02.498Z",
-      online: false,
-      namespace: "user",
+const session = {
+  uid: "8c354a00f50",
+  device_uid: "a582b47a42d",
+  device: {
+    uid: "a582b47a42d",
+    name: "39-5e-2a",
+    identity: {
+      mac: "00:00:00:00:00:00",
+    },
+    info: {
+      id: "debian",
+      pretty_name: "Debian GNU/Linux 10 (buster)",
+      version: "v0.2.5",
     },
+    public_key: "----- PUBLIC KEY -----",
     tenant_id: "00000000",
-    username: "user",
-    ip_address: "000.000.000.000",
-    started_at: "2020-05-18T12:30:28.824Z",
-    last_seen: "2020-05-18T12:30:30.205Z",
-    active: false,
-    authenticated: false,
-  } as IAdminSession;
+    last_seen: "2020-05-18T13:27:02.498Z",
+    online: false,
+    namespace: "user",
+  },
+  tenant_id: "00000000",
+  username: "user",
+  ip_address: "000.000.000.000",
+  started_at: "2020-05-18T12:30:28.824Z",
+  last_seen: "2020-05-18T12:30:30.205Z",
+  active: false,
+  authenticated: false,
+} as IAdminSession;
 
-  const sessions = [
-    { ...session },
-    {
-      ...session,
-      device: {
-        ...session.device,
-        name: "b4-2e-99",
-      },
+const sessions = [
+  { ...session },
+  {
+    ...session,
+    device: {
+      ...session.device,
+      name: "b4-2e-99",
     },
-  ];
+  },
+];
 
-  const numberSessions = 2;
+const sessionCount = 2;
 
-  beforeEach(() => {
-    setActivePinia(createPinia());
-    sessionsStore = useSessionsStore();
-  });
+describe("Sessions Pinia Store", () => {
+  setActivePinia(createPinia());
+  const sessionsStore = useSessionsStore();
 
   it("returns default session state", () => {
-    expect(sessionsStore.getSessions).toEqual([]);
-    expect(sessionsStore.getSession).toEqual({});
+    expect(sessionsStore.sessions).toEqual([]);
+    expect(sessionsStore.sessionCount).toEqual(0);
   });
 
   it("sets sessions and total count", () => {
     sessionsStore.sessions = sessions;
-    sessionsStore.numberSessions = numberSessions;
-
-    expect(sessionsStore.getSessions).toEqual(sessions);
-    expect(sessionsStore.getNumberSessions).toEqual(numberSessions);
-  });
-
-  it("sets a single session", () => {
-    sessionsStore.session = session;
-    expect(sessionsStore.getSession).toEqual(session);
-  });
-
-  it("clears the session object", () => {
-    sessionsStore.session = session;
-    sessionsStore.clearObjectSession();
-    expect(sessionsStore.getSession).toEqual({});
-  });
-
-  it("clears the sessions list", () => {
-    sessionsStore.sessions = sessions;
-    sessionsStore.numberSessions = numberSessions;
-
-    sessionsStore.clearListSessions();
+    sessionsStore.sessionCount = sessionCount;
 
-    expect(sessionsStore.getSessions).toEqual([]);
-    expect(sessionsStore.getNumberSessions).toEqual(0);
+    expect(sessionsStore.sessions).toEqual(sessions);
+    expect(sessionsStore.sessionCount).toEqual(sessionCount);
   });
 });