[#58] remove events from nuxt plugins

nuxt.config.ts

@@ -43,7 +43,6 @@ export default defineNuxtConfig({
   css: ["~/assets/index.css"],
   plugins: [
     {src: '~/plugins/api.client.ts'},
-    {src: '~/plugins/events.client.ts'},
     {src: '~/plugins/vendors.client.ts'},
   ],
   modules: [

src/entities/ray/ui/ray-lock/ray-lock.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useEvents } from "~/src/shared/lib/use-events";
 import type { RayContentLock } from "../../types";
 
 type Props = {
@@ -11,18 +11,17 @@ const props = defineProps<Props>();
 
 const disabled = ref(false);
 
+const { rayExecution } = useEvents();
+
 const continueExecution = () => {
-  if (process.client) {
-    disabled.value = true;
-    useNuxtApp().$rayExecution.continue(props.name);
-  }
+  disabled.value = true;
+
+  rayExecution.continue(props.name);
 };
 
 const stopExecution = () => {
-  if (process.client) {
-    disabled.value = true;
-    useNuxtApp().$rayExecution.stop(props.name);
-  }
+  disabled.value = true;
+  rayExecution.stop(props.name);
 };
 </script>
 

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -1,3 +1,4 @@
+import type { RayContentLock } from "~/src/entities/ray/types";
 import type { EventId, EventType } from '../../types';
 import { useCentrifuge, useEventsRequests } from "../io";
 import { useConnectionStore } from "~/stores/connections";
@@ -99,14 +100,14 @@ export const useApiTransport = () => {
   }
 
   // NOTE: works only with ws
-  const rayStopExecution = (hash: string) => {
+  const rayStopExecution = (hash: RayContentLock["name"]) => {
     centrifuge.rpc(`post:api/ray/locks/${hash}`, {
       stop_execution: true
     })
   }
 
   // NOTE: works only with ws
-  const rayContinueExecution = (hash: string) => {
+  const rayContinueExecution = (hash: RayContentLock["name"]) => {
     centrifuge.rpc(`post:api/ray/locks/${hash}`, undefined)
   }
 

src/shared/lib/use-events/use-events.ts

@@ -1,10 +1,14 @@
 import { storeToRefs } from "pinia";
 import type { Ref } from "vue";
-import type { ServerEvent, NormalizedEvent } from '../../types';
+import type { RayContentLock } from "~/src/entities/ray/types";
+import type { ServerEvent, NormalizedEvent, EventId } from '../../types';
+import { useApiTransport } from "../use-api-transport";
 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";
+import { useLockedIdsStore } from "~/stores/locked-ids";
+
 
 type TUseEvents = () => {
   normalizeUnknownEvent: (event: ServerEvent<unknown>) => NormalizedEvent<unknown>
@@ -13,16 +17,35 @@ type TUseEvents = () => {
     idsByType: Ref<TCachedEventsEmptyMap>;
     stopUpdatesByType: (type: TEventsGroup) => void
     runUpdatesByType: (type: TEventsGroup) => void
+  },
+  lockedIds: {
+    items: Ref<EventId[]>
+    add: (id: EventId) => void
+    remove: (id: EventId) => void
+  },
+  rayExecution: {
+    continue: (contentName: RayContentLock["name"]) => void
+    stop: (contentName: RayContentLock["name"]) => void
   }
 }
 
 export const useEvents: TUseEvents = () => {
   const cachedIdsStore = useCachedIdsStore();
+  const lockedIdsStore = useLockedIdsStore();
+
+  const {
+    rayContinueExecution,
+    rayStopExecution,
+  } = useApiTransport();
 
   const {
     cachedIds,
   } = storeToRefs(cachedIdsStore)
 
+  const {
+    lockedIds,
+  } = storeToRefs(lockedIdsStore)
+
   return {
     normalizeUnknownEvent,
     events: useEventsPlugin(),
@@ -31,5 +54,14 @@ export const useEvents: TUseEvents = () => {
       stopUpdatesByType: cachedIdsStore.setByType,
       runUpdatesByType: cachedIdsStore.removeByType,
     },
+    lockedIds: {
+      items: lockedIds as unknown as Ref<EventId[]>,
+      add: lockedIdsStore.add,
+      remove: lockedIdsStore.remove,
+    },
+    rayExecution: {
+      continue: rayContinueExecution,
+      stop: rayStopExecution,
+    }
   }
 }

src/shared/ui/preview-card/preview-card.vue

@@ -6,7 +6,6 @@ import { toBlob, toPng } from "html-to-image";
 import debounce from "lodash.debounce";
 import moment from "moment";
 import { ref, computed, onMounted, onBeforeUnmount, onBeforeMount } from "vue";
-import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { REST_API_URL } from "../../lib/io";
 import { useEvents } from "../../lib/use-events";
 import type { NormalizedEvent } from "../../types";
@@ -26,7 +25,7 @@ const isOptimized = ref(false);
 const isVisibleControls = ref(true);
 
 const eventRef = ref(null);
-const { events } = useEvents();
+const { events, lockedIds } = useEvents();
 
 const normalizedTags = computed(() => [
   moment(props.event.date).format("HH:mm:ss"),
@@ -56,14 +55,12 @@ const changeVisibleControls = (value = true) => {
 const deleteEvent = () => events?.removeById(props.event.id);
 
 const toggleEventLock = () => {
-  const { $lockedIds } = useNuxtApp();
-
-  if (($lockedIds?.items.value || []).includes(props.event.id)) {
-    $lockedIds?.remove(props.event.id);
+  if ((lockedIds?.items.value || []).includes(props.event.id)) {
+    lockedIds?.remove(props.event.id);
 
     isLocked.value = false;
   } else {
-    $lockedIds?.add(props.event.id);
+    lockedIds?.add(props.event.id);
 
     isLocked.value = true;
   }
@@ -147,11 +144,7 @@ const optimiseRenderHidden = debounce(() => {
 }, 30);
 
 onBeforeMount(() => {
-  const {
-    $lockedIds: { items },
-  } = useNuxtApp();
-
-  isLocked.value = items.value.includes(props.event.id);
+  isLocked.value = lockedIds.items.value.includes(props.event.id);
 });
 
 onMounted(() => {