[#6] add saving paused events on the page reload

Author: Kreezag

stores/events.ts

@@ -13,12 +13,9 @@ import {
 } from "~/config/types";
 import { ALL_EVENTS, EVENT_TYPES } from "~/config/constants";
 
-type TCachedEventsEmptyMap = Record<
-  OneOfValues<typeof EVENT_TYPES>,
-  EventId[]
->;
+type TCachedEventsEmptyMap = Record<OneOfValues<typeof EVENT_TYPES>, EventId[]>;
 
-const initialcachedEventsIdsMap: TCachedEventsEmptyMap = {
+const initialCachedEventsIdsMap: TCachedEventsEmptyMap = {
   [EVENT_TYPES.SENTRY]: [] as EventId[],
   [EVENT_TYPES.INSPECTOR]: [] as EventId[],
   [EVENT_TYPES.PROFILER]: [] as EventId[],
@@ -29,12 +26,43 @@ const initialcachedEventsIdsMap: TCachedEventsEmptyMap = {
   [ALL_EVENTS]: [] as EventId[],
 };
 
+const { localStorage } = window;
+const getCachedEventsIdsMap = (): TCachedEventsEmptyMap => {
+  const storageValue = localStorage?.getItem("cached_events");
+
+  if (storageValue) {
+    return JSON.parse(storageValue) as TCachedEventsEmptyMap;
+  }
+
+  return initialCachedEventsIdsMap;
+};
+
 export const useEventStore = defineStore("useEventStore", {
   state: () => ({
     events: [] as ServerEvent<unknown>[],
-    cachedEventsIdsMap: initialcachedEventsIdsMap,
+    cachedEventsIdsMap: getCachedEventsIdsMap(),
   }),
   actions: {
+    addEvents(events: ServerEvent<unknown>[]) {
+      events.forEach((event) => {
+        const isExistedEvent = this.events.some((el) => el.uuid === event.uuid);
+        if (!isExistedEvent) {
+          this.events.unshift(event);
+        } else {
+          this.events = this.events.map((el) => {
+            if (el.uuid === event.uuid) {
+              return event;
+            }
+            return el;
+          });
+        }
+      });
+    },
+    removeEvents() {
+      this.events.length = 0;
+
+      this.cachedEventsIdsMap = initialCachedEventsIdsMap;
+    },
     removeEventById(eventUuid: EventId) {
       const eventType = this.events.find(
         ({ uuid }) => uuid === eventUuid
@@ -43,52 +71,47 @@ export const useEventStore = defineStore("useEventStore", {
       if (eventType) {
         this.cachedEventsIdsMap[eventType] = this.cachedEventsIdsMap[
           eventType
-        ].filter((uuid) => uuid !== eventUuid);
+        ].filter((uuid: EventId) => uuid !== eventUuid);
       }
 
       if (this.cachedEventsIdsMap[ALL_EVENTS].length) {
         this.cachedEventsIdsMap[ALL_EVENTS] = this.cachedEventsIdsMap[
           ALL_EVENTS
-        ].filter((uuid) => uuid !== eventUuid);
+        ].filter((uuid: EventId) => uuid !== eventUuid);
       }
 
       this.events = this.events.filter(({ uuid }) => uuid !== eventUuid);
     },
-    removeEvents() {
-      this.events.length = 0;
-
-      this.cachedEventsIdsMap = initialcachedEventsIdsMap;
-    },
     removeEventsByType(eventType: OneOfValues<typeof EVENT_TYPES>) {
       this.cachedEventsIdsMap[eventType].length = 0;
       this.events = this.events.filter(({ type }) => type !== eventType);
     },
-    addEvents(events: ServerEvent<unknown>[]) {
-      events.forEach((event) => {
-        const isExistedEvent = this.events.some((el) => el.uuid === event.uuid);
-        if (!isExistedEvent) {
-          this.events.unshift(event);
-        } else {
-          this.events = this.events.map((el) => {
-            if (el.uuid === event.uuid) {
-              return event;
-            }
-            return el;
-          });
-        }
-      });
-    },
-    setCachedEvents(eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>) {
+
+    setCachedEvents(
+      eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
+    ) {
       this.events
         .filter(({ type }) =>
           eventType === ALL_EVENTS ? true : type === eventType
         )
         .forEach((event) => {
           this.cachedEventsIdsMap[eventType].push(event.uuid);
         });
+
+      localStorage?.setItem(
+        "cached_events",
+        JSON.stringify(this.cachedEventsIdsMap)
+      );
     },
-    removeCachedEvents(eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>) {
+    removeCachedEvents(
+      eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
+    ) {
       this.cachedEventsIdsMap[eventType].length = 0;
+
+      localStorage?.setItem(
+        "cached_events",
+        JSON.stringify(this.cachedEventsIdsMap)
+      );
     },
   },
 });