[#58] move changed events plugin to use-events libs

buggregator · Feb 11, 2024 · 1b719ae · 1b719ae
1 parent 9f7bb51
commit 1b719ae
Show file tree

Hide file tree

Showing 7 changed files with 2,390 additions and 3,210 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "@types/cytoscape-dagre": "^2.3.1",
     "@types/downloadjs": "^1.4.3",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/pluralize": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "@vitejs/plugin-vue": "^4.0.0",

diff --git a/pages/index.vue b/pages/index.vue
@@ -38,9 +38,9 @@
 </template>
 
 <script lang="ts">
-import pluralize from "pluralize"; // eslint-disable-line @conarti/feature-sliced/public-api
+// eslint-disable-next-line @conarti/feature-sliced/public-api
+import pluralize from "pluralize";
 import { defineComponent } from "vue";
-import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader, EventCard, PagePlaceholder } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 import { useEvents } from "~/src/shared/lib/use-events";
@@ -77,19 +77,19 @@ export default defineComponent({
       return events.items.value.filter(({ type }) => type === this.type);
     },
     isEventsPaused() {
-      const { $cachedEvents } = useNuxtApp();
+      const { cachedEvents } = useEvents();
 
-      return $cachedEvents.eventsIdsByType.value[this.type]?.length > 0;
+      return cachedEvents.idsByType.value[this.type]?.length > 0;
     },
     visibleEvents() {
       if (!this.isEventsPaused) {
         return this.allEvents;
       }
 
-      const { $cachedEvents } = useNuxtApp();
+      const { cachedEvents } = useEvents();
 
       return this.allEvents.filter(({ uuid }) =>
-        $cachedEvents.eventsIdsByType.value[this.type]?.includes(uuid)
+        cachedEvents.idsByType.value[this.type]?.includes(uuid)
       );
     },
     hiddenEventsCount() {
@@ -110,12 +110,12 @@ export default defineComponent({
       return events.removeByType(this.type as EventType);
     },
     toggleUpdate() {
-      const { $cachedEvents } = useNuxtApp();
+      const { cachedEvents } = useEvents();
 
       if (this.isEventsPaused) {
-        $cachedEvents.runUpdatesByType(this.type);
+        cachedEvents.runUpdatesByType(this.type);
       } else {
-        $cachedEvents.stopUpdatesByType(this.type);
+        cachedEvents.stopUpdatesByType(this.type);
       }
     },
   },

diff --git a/pages/smtp/[id].vue b/pages/smtp/[id].vue
@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useSmtp } from "~/src/entities/smtp";
 import type { SMTP } from "~/src/entities/smtp/types";

diff --git a/plugins/events.client.ts b/plugins/events.client.ts
@@ -1,111 +1,21 @@
 import { storeToRefs } from "pinia";
 import { useApiTransport } from '~/src/shared/lib/use-api-transport'
-import type { EventId, EventType, ServerEvent } from '~/src/shared/types';
-import { useCachedIdsStore } from "~/stores/cached-ids";
-import { useEventStore } from "~/stores/events";
 import { useLockedIdsStore } from "~/stores/locked-ids";
 
 export default defineNuxtPlugin(() => {
-  const eventsStore = useEventStore();
-  const cachedIdsStore = useCachedIdsStore();
   const lockedIdsStore = useLockedIdsStore();
 
   const {
     lockedIds,
   } = storeToRefs(lockedIdsStore)
 
   const {
-    events,
-  } = storeToRefs(eventsStore)
-
-  const {
-    deleteEventsAll,
-    deleteEventsList,
-    deleteEventsByType,
-    getEventsAll,
-    getEvent,
-    getUrl,
     rayContinueExecution,
     rayStopExecution,
   } = useApiTransport();
 
-  const removeList = async (uuids: EventId[]) => {
-    const res = await deleteEventsList(uuids)
-
-    if (res) {
-      eventsStore.removeByIds(uuids);
-      cachedIdsStore.removeByIds(uuids);
-    }
-  }
-
-  const removeAll = async () => {
-    if (lockedIds.value.length) {
-      const removedIds = events.value
-        .filter(({ uuid }) => !lockedIds.value.includes(uuid))
-        .map(({ uuid }) => uuid)
-
-      await removeList(removedIds)
-
-      return
-    }
-
-    const res = await deleteEventsAll()
-
-    if (res) {
-      eventsStore.removeAll()
-      cachedIdsStore.removeAll()
-    }
-  }
-
-  const removeById = async (eventId: EventId) => {
-    await removeList([eventId])
-  }
-
-  const removeByType = async (eventType: EventType) => {
-    if (lockedIds.value.length) {
-      const removedIds = events.value
-        .filter(({ type, uuid }) => type === eventType && !lockedIds.value.includes(uuid))
-        .map(({ uuid }) => uuid)
-
-      await removeList(removedIds)
-
-      return
-    }
-
-    const res = await deleteEventsByType(eventType)
-
-    if (res) {
-      eventsStore.removeByType(eventType);
-      cachedIdsStore.removeByType(eventType);
-    }
-  }
-
-  const getAll = () => {
-    getEventsAll().then((eventsList: ServerEvent<unknown>[]) => {
-      if (eventsList.length) {
-        eventsStore.initialize(eventsList);
-        cachedIdsStore.syncWithActive(eventsList.map(({ uuid }) => uuid));
-      } else {
-        // NOTE: clear cached events hardly
-        eventsStore.removeAll();
-        cachedIdsStore.removeAll();
-      }
-    }).catch((err) => {
-      console.error('getAll err', err);
-    })
-  }
-
-  const {
-    cachedIds,
-  } = storeToRefs(cachedIdsStore)
-
   return {
     provide: {
-      cachedEvents: {
-        eventsIdsByType: cachedIds,
-        stopUpdatesByType: cachedIdsStore.setByType,
-        runUpdatesByType: cachedIdsStore.removeByType,
-      },
       rayExecution: {
         continue: rayContinueExecution,
         stop: rayStopExecution,

diff --git a/src/shared/lib/use-events/use-events.ts b/src/shared/lib/use-events/use-events.ts
@@ -1,13 +1,35 @@
+import { storeToRefs } from "pinia";
+import type { Ref } from "vue";
 import type { ServerEvent, NormalizedEvent } from '../../types';
 import { normalizeUnknownEvent } from "./normalize-unknown-event";
 import { useEventsPlugin, type TUseEventsPluginData } from "./use-events-plugin";
+import type { TCachedEventsEmptyMap, TEventsGroup } from "~/stores/cached-ids";
+import { useCachedIdsStore } from "~/stores/cached-ids";
 
 type TUseEvents = () => {
   normalizeUnknownEvent: (event: ServerEvent<unknown>) => NormalizedEvent<unknown>
   events: TUseEventsPluginData
+  cachedEvents: {
+    idsByType: Ref<TCachedEventsEmptyMap>;
+    stopUpdatesByType: (type: TEventsGroup) => void
+    runUpdatesByType: (type: TEventsGroup) => void
+  }
 }
 
-export const useEvents: TUseEvents = () => ({
-  normalizeUnknownEvent,
-  events: useEventsPlugin()
-})
+export const useEvents: TUseEvents = () => {
+  const cachedIdsStore = useCachedIdsStore();
+
+  const {
+    cachedIds,
+  } = storeToRefs(cachedIdsStore)
+
+  return {
+    normalizeUnknownEvent,
+    events: useEventsPlugin(),
+    cachedEvents: {
+      idsByType: cachedIds as unknown as Ref<TCachedEventsEmptyMap>,
+      stopUpdatesByType: cachedIdsStore.setByType,
+      runUpdatesByType: cachedIdsStore.removeByType,
+    },
+  }
+}
diff --git a/stores/cached-ids.ts b/stores/cached-ids.ts
@@ -4,9 +4,9 @@ import { LOCAL_STORAGE_KEYS } from '~/src/shared/types';
 import type { EventId, OneOfValues } from '~/src/shared/types';
 import { useEventStore } from "~/stores/events";
 
-type TEventsGroup = OneOfValues<typeof PAGE_TYPES>
+export type TEventsGroup = OneOfValues<typeof PAGE_TYPES>
 
-type TCachedEventsEmptyMap = Record<TEventsGroup, EventId[]>;
+export type TCachedEventsEmptyMap = Record<TEventsGroup, EventId[]>;
 
 const initialCachedIds: TCachedEventsEmptyMap = {
   [PAGE_TYPES.SENTRY]: [] as EventId[],