From b919b9f68c6519e42b1b6597f42ae1e47c66a054 Mon Sep 17 00:00:00 2001
From: nWacky <38620459+nWacky@users.noreply.github.com>
Date: Thu, 18 Jan 2024 14:54:08 +0300
Subject: [PATCH] fix(BaseSocial): move dialog to an object (#597)

---
 src/mixins/BaseSocial/BaseSocial.ts | 31 +++++++++++++++++------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/mixins/BaseSocial/BaseSocial.ts b/src/mixins/BaseSocial/BaseSocial.ts
index a7d07e6..f8ec439 100644
--- a/src/mixins/BaseSocial/BaseSocial.ts
+++ b/src/mixins/BaseSocial/BaseSocial.ts
@@ -12,6 +12,7 @@ import {
   PropType,
   h,
   DefineComponent,
+  markRaw,
 } from 'vue';
 import { IWindowFeatures } from '@/types/common/windowFeatures';
 import getFormattedWindowFeatures from '@/utils/getFormattedWindowFeatures';
@@ -19,8 +20,10 @@ import getPopupClientRect from '@/utils/getPopupClientRect';
 import { isUndefined } from '@/utils/inspect';
 
 export interface IBaseSocialDataOptions {
-  shareDialog: Window | null;
-  shareDialogCloseIntervalId: number | undefined
+  dialog: {
+    shareDialog: Window | null;
+    shareDialogCloseIntervalId: number | undefined
+  }
 }
 
 export type TBaseSocialPropsOptions<T> = {
@@ -81,8 +84,10 @@ export default function BaseSocials<T>(
 
     data(): IBaseSocialDataOptions {
       return {
-        shareDialog: null,
-        shareDialogCloseIntervalId: undefined,
+        dialog: markRaw({
+          shareDialog: null,
+          shareDialogCloseIntervalId: undefined,
+        }),
       };
     },
 
@@ -92,7 +97,7 @@ export default function BaseSocials<T>(
      * Make sure interval has been cleared
      */
     beforeUnmount() {
-      window.clearInterval(this.shareDialogCloseIntervalId);
+      window.clearInterval(this.dialog.shareDialogCloseIntervalId);
     },
 
     computed: {
@@ -139,12 +144,12 @@ export default function BaseSocials<T>(
          * If the pointer to the window object in memory does not exist
          * or if such pointer exists but the window was closed
          */
-        if (this.shareDialog === null || this.shareDialog?.closed) {
+        if (this.dialog.shareDialog === null || this.dialog.shareDialog?.closed) {
           /**
            * then create it. The new window will be created and
            * will be brought on top of any other window.
            */
-          this.shareDialog = window.open(
+          this.dialog.shareDialog = window.open(
             url,
             '_blank',
             formattedFeatures,
@@ -153,7 +158,7 @@ export default function BaseSocials<T>(
            * If window.open has been blocked – emit 'block' event and then do nothing
            * If not – emit 'open' event
            */
-          if (!this.shareDialog) {
+          if (!this.dialog.shareDialog) {
             this.$emit('popup-block');
             return;
           }
@@ -164,15 +169,15 @@ export default function BaseSocials<T>(
            * So we check if it has been closed every 300 ms
            * @link https://atashbahar.com/post/2010-04-27-detect-when-a-javascript-popup-window-gets-closed
            */
-          this.shareDialogCloseIntervalId = window.setInterval(() => {
-            if (this.shareDialog === null || this.shareDialog?.closed) {
-              window.clearInterval(this.shareDialogCloseIntervalId);
+          this.dialog.shareDialogCloseIntervalId = window.setInterval(() => {
+            if (this.dialog.shareDialog === null || this.dialog.shareDialog?.closed) {
+              window.clearInterval(this.dialog.shareDialogCloseIntervalId);
               this.$emit('popup-close');
               /**
                * Unset reference to the popup window
                * @link https://web.dev/detached-window-memory-leaks/#solution-unset-references
                */
-              this.shareDialog = null;
+              this.dialog.shareDialog = null;
             }
           }, 300);
         } else {
@@ -182,7 +187,7 @@ export default function BaseSocials<T>(
            * window with the focus() method. There would be no need to re-create
            * the window or to reload the referenced resource.
            */
-          this.shareDialog.focus();
+          this.dialog.shareDialog.focus();
           this.$emit('popup-focus');
         }
       },