Merge pull request #117 from buggregator/hotfix/ws-connection

Fixes problem with subscribing WS events

Author: butschster

.docker/Dockerfile

@@ -12,6 +12,7 @@ WORKDIR /app
 
 ARG APP_VERSION=1.0.0
 ENV NODE_OPTIONS=--openssl-legacy-provider
+ENV VITE_APP_MODE=production
 
 RUN sed -i "s/\"version\": \".*\"/\"version\": \"${APP_VERSION}\"/" package.json
 

assets/mixins.scss

@@ -7,10 +7,11 @@
 }
 
 @mixin layout-head {
-  @apply justify-between bg-white dark:bg-gray-800;
+  @apply justify-between;
+  @apply backdrop-blur-sm bg-gradient-to-b from-white/80 to-white/20 dark:from-gray-800/80 dark:to-gray-800/20;
+  //@apply backdrop-blur dark:backdrop-brightness-150 dark:bg-black/30 bg-white/30;
   @apply absolute left-0 right-0 z-50;
   @apply h-9 sm:h-10 md:h-14;
-  @apply border-b border-gray-200 dark:border-gray-700;
   @apply px-2 md:px-4;
 
   html.navbar-fixed & {
@@ -19,7 +20,7 @@
 }
 
 @mixin layout-body {
-  @apply flex flex-col flex-1 pt-12;
+  @apply flex flex-col flex-1 pt-10 md:pt-14;
 }
 
 @mixin text-muted {

src/shared/lib/io/logger.ts

@@ -1,5 +1,11 @@
 import type { LoggerParams } from "./types";
 
-export const logger = (params: LoggerParams) => {
+const isProduction: boolean = import.meta.env.VITE_APP_MODE as string === 'production'
+
+export const logger = (params: LoggerParams): void => {
+  if (isProduction) {
+    return
+  }
+
   console.info(`[ApiConnection logger]:Centrifuge "${params[0]}" called with params: "${JSON.stringify(params[1])}"`)
 }

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

@@ -4,9 +4,11 @@ import { useCentrifuge, useEventsRequests } from "../io";
 import { useConnectionStore } from "~/stores/connections";
 import { useEventStore } from "~/stores/events";
 
-const CHECK_CONNECTION_INTERVAL = 10000
+const CHECK_CONNECTION_INTERVAL: number = 10000
+let isEventsEmitted: boolean = false
+
 export const useApiTransport = () => {
-  const { centrifuge } = useCentrifuge()
+  const {centrifuge} = useCentrifuge()
   const eventsStore = useEventStore()
   const connectionStore = useConnectionStore()
   const {
@@ -21,37 +23,44 @@ export const useApiTransport = () => {
 
   const getWSConnection = () => connectionStore.isConnectedWS
   const checkWSConnectionFail = (onConnectionLost: () => void) => {
-    if(!getWSConnection()) {
+    if (!getWSConnection()) {
       onConnectionLost()
     }
     setTimeout(() => {
       checkWSConnectionFail(onConnectionLost)
     }, CHECK_CONNECTION_INTERVAL)
   }
 
-  centrifuge.on('connected', () => {
-    connectionStore.addWSConnection()
-  });
+  const subscribeToEvents = (): void => {
+    centrifuge.on('connected', () => {
+      connectionStore.addWSConnection()
+    });
 
-  centrifuge.on('disconnected', () => {
-    connectionStore.removeWSConnection()
-  });
+    centrifuge.on('disconnected', () => {
+      connectionStore.removeWSConnection()
+    });
 
-  centrifuge.on('error', () => {
-    connectionStore.removeWSConnection()
-  })
+    centrifuge.on('error', () => {
+      connectionStore.removeWSConnection()
+    })
 
-  centrifuge.on('message', () => {
-    connectionStore.addWSConnection()
-  })
+    centrifuge.on('message', () => {
+      connectionStore.addWSConnection()
+    })
 
-  centrifuge.on('publication', (ctx) => {
-    // We need to handle only events from the channel 'events' with event name 'event.received'
-    if (ctx.channel === 'events' && ctx.data?.event === 'event.received') {
-      const event = ctx?.data?.data || null
-      eventsStore.addList([ event ]);
-    }
-  });
+    centrifuge.on('publication', (ctx) => {
+      // We need to handle only events from the channel 'events' with event name 'event.received'
+      if (ctx.channel === 'events' && ctx.data?.event === 'event.received') {
+        const event = ctx?.data?.data || null
+        eventsStore.addList([event]);
+      }
+    });
+  }
+
+  if (!isEventsEmitted) {
+    subscribeToEvents()
+    isEventsEmitted = true
+  }
 
   checkWSConnectionFail(async () => {
     const events = await getAll();
@@ -85,7 +94,7 @@ export const useApiTransport = () => {
     }
 
     if (getWSConnection()) {
-      return centrifuge.rpc(`delete:api/events`, { uuids })
+      return centrifuge.rpc(`delete:api/events`, {uuids})
     }
 
     return deleteList(uuids);

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

@@ -83,13 +83,13 @@ const isVisibleTags = computed(() => props.tags.length > 0);
     </div>
 
     <div v-if="isVisibleControls" class="preview-card-header__buttons">
-      <div class="preview-card-header__buttons-expand">
+      <div v-if="isOpen" class="preview-card-header__buttons-expand">
         <button
           class="preview-card-header__button preview-card-header__button--copy"
           title="Copy event as PNG image to clipboard"
           @click="copyEvent"
         >
-          <IconSvg name="copy" class="preview-card-header__button-icon" />
+          <IconSvg name="copy" class="preview-card-header__button-icon"/>
         </button>
 
         <div class="preview-card-header__buttons-expand-list">
@@ -143,7 +143,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
         }"
         @click="lockEvent"
       >
-        <IconSvg name="lock" class="preview-card-header__button-icon" />
+        <IconSvg name="lock" class="preview-card-header__button-icon"/>
       </button>
 
       <button
@@ -152,7 +152,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
         :disabled="isLocked"
         @click="deleteEvent"
       >
-        <IconSvg name="times" class="preview-card-header__button-icon" />
+        <IconSvg name="times" class="preview-card-header__button-icon"/>
       </button>
     </div>
   </div>

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

@@ -43,8 +43,9 @@ const normalizedOrigin = computed(() => {
 
 const eventUrl = computed(() => `${REST_API_URL}/api/event/${props.event.id}`);
 
-const toggleView = () => {
+const toggleView = (e: MouseEvent) => {
   isCollapsed.value = !isCollapsed.value;
+  e.preventDefault();
 };
 
 const changeVisibleControls = (value = true) => {
@@ -176,6 +177,7 @@ onBeforeUnmount(() => {
       @copy="copyCode"
       @download="downloadEvent"
       @lock="toggleEventLock"
+      @dblclick="toggleView"
     />
 
     <div
@@ -207,7 +209,7 @@ onBeforeUnmount(() => {
 }
 
 .preview-card--collapsed {
-  @apply shadow-bottom;
+  // @apply shadow-bottom;
 }
 
 .preview-card__header {

src/widgets/ui/layout-sidebar/layout-sidebar.vue

@@ -96,30 +96,39 @@ const connectionText = computed(
 <style lang="scss" scoped>
 .layout-sidebar {
   @apply bg-gray-200 dark:bg-gray-800;
-  @apply w-9 sm:w-10 md:w-14;
+  @apply w-9 sm:w-12 md:w-16;
   @apply flex flex-col justify-between;
 }
 
 .layout-sidebar__nav {
   @apply flex-col flex overflow-auto;
-  @apply divide-y divide-gray-300 dark:divide-gray-600;
-  @apply border-b border-gray-300 dark:border-gray-600;
+  @apply divide-y divide-gray-300 dark:divide-gray-600 md:divide-none;
+  @apply border-b border-gray-300 dark:border-gray-600 md:border-none;
+  @apply overflow-hidden;
 }
 
 .layout-sidebar__link {
-  @apply text-blue-500 block hover:bg-blue-500 hover:text-white relative;
-  @apply h-9 sm:h-10 md:h-14;
+  @apply block relative;
+  @apply text-blue-500 hover:text-white;
+  @apply hover:bg-gray-700;
   @apply flex items-center justify-center;
+  @apply md:my-2 md:mx-1 lg:m-2 md:rounded-lg;
 
   &.router-link-active {
     @apply bg-blue-700 text-blue-200;
   }
 }
 
 .layout-sidebar__link-icon {
+  @apply flex items-center justify-center;
   @apply fill-current;
   @apply mx-auto;
-  @apply w-3 h-3 md:w-5 md:h-5 lg:w-6 lg:h-6;
+  @apply h-5 md:h-6;
+  @apply m-2.5 md:m-3;
+
+  & > svg {
+    @apply h-auto;
+  }
 }
 
 .layout-sidebar__connection {

src/widgets/ui/page-header/page-header.vue

@@ -38,7 +38,7 @@ const clearEvents = () => {
       </button>
     </div>
 
-    <IconSvg class="page-header__lock-icon" name="lock" />
+<!--    <IconSvg class="page-header__lock-icon" name="lock" />-->
   </header>
 </template>
 

stores/settings.ts

@@ -27,7 +27,10 @@ const checkThemeActive = () => {
 
 const checkHeaderFixed = () => {
   if (process.client) {
-    const isFixed = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) === "true"
+    const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
+
+
+    const isFixed: boolean = storedValue === "true"
 
     if (isFixed) {
       document?.documentElement?.classList?.add("navbar-fixed");