From 97af42fad10684e313ebb61f50507feb6dfa3810 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Sep 2024 22:08:48 +0530
Subject: [PATCH] chore: used debounce function from vueuse and useStorage
 instead of localStorage

---
 .../src/composables/useActiveTabManager.js    | 57 +++++++++----------
 frontend/src/pages/Deal.vue                   |  2 +-
 frontend/src/pages/Lead.vue                   |  2 +-
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/frontend/src/composables/useActiveTabManager.js b/frontend/src/composables/useActiveTabManager.js
index 9f99306b..3a134869 100644
--- a/frontend/src/composables/useActiveTabManager.js
+++ b/frontend/src/composables/useActiveTabManager.js
@@ -1,54 +1,49 @@
-import { ref, watch } from 'vue';
-
-// Debounce function to delay updates
-function debounce(fn, delay) {
-  let timeout;
-  return (...args) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => fn(...args), delay);
-  };
-}
+import { ref, watch } from 'vue'
+import { useDebounceFn, useStorage } from '@vueuse/core'
 
 export function useActiveTabManager(tabs, storageKey) {
-    
-  const preserveLastVisitedTab = debounce((tabName) => {
-    localStorage.setItem(storageKey, tabName.toLowerCase());
-  }, 300);
+  const activieTab = useStorage(storageKey, 'activity')
+
+  const preserveLastVisitedTab = useDebounceFn((tabName) => {
+    activieTab.value = tabName.toLowerCase()
+  }, 300)
 
   function setActiveTabInUrl(tabName) {
-    window.location.hash = '#' + tabName.toLowerCase();
+    window.location.hash = '#' + tabName.toLowerCase()
   }
 
   function getActiveTabFromUrl() {
-    return window.location.hash.replace('#', '');
+    return window.location.hash.replace('#', '')
   }
 
-  function findTabIndex(tabName){
-    return tabs.value.findIndex(tabOptions => tabOptions.name.toLowerCase() === tabName);
+  function findTabIndex(tabName) {
+    return tabs.value.findIndex(
+      (tabOptions) => tabOptions.name.toLowerCase() === tabName,
+    )
   }
 
   function getTabIndex(tabName) {
     let index = findTabIndex(tabName)
-    return index !== -1 ? index : 0; // Default to the first tab if not found
+    return index !== -1 ? index : 0 // Default to the first tab if not found
   }
 
   function getActiveTabFromLocalStorage() {
-    return localStorage.getItem(storageKey);
+    return activieTab.value
   }
 
   function getActiveTab() {
-    let activeTab = getActiveTabFromUrl();
-    if(activeTab){
+    let activeTab = getActiveTabFromUrl()
+    if (activeTab) {
       let index = findTabIndex(activeTab)
-      if(index !== -1){
+      if (index !== -1) {
         preserveLastVisitedTab(activeTab)
         return index
       }
       return 0
     }
 
-    let lastVisitedTab = getActiveTabFromLocalStorage();
-    if(lastVisitedTab){
+    let lastVisitedTab = getActiveTabFromLocalStorage()
+    if (lastVisitedTab) {
       setActiveTabInUrl(lastVisitedTab)
       return getTabIndex(lastVisitedTab)
     }
@@ -56,13 +51,13 @@ export function useActiveTabManager(tabs, storageKey) {
     return 0 // Default to the first tab if nothing is found
   }
 
-  const tabIndex = ref(getActiveTab());
+  const tabIndex = ref(getActiveTab())
 
   watch(tabIndex, (tabIndexValue) => {
-    let currentTab = tabs.value[tabIndexValue].name;
-    setActiveTabInUrl(currentTab);
-    preserveLastVisitedTab(currentTab);
-  });
+    let currentTab = tabs.value[tabIndexValue].name
+    setActiveTabInUrl(currentTab)
+    preserveLastVisitedTab(currentTab)
+  })
 
-  return { tabIndex };
+  return { tabIndex }
 }
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 363cc179..9c73e7be 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -354,7 +354,7 @@ import {
 } from 'frappe-ui'
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import {useActiveTabManager} from '@/composables/useActiveTabManager'
+import { useActiveTabManager } from '@/composables/useActiveTabManager'
 
 
 const { $dialog, $socket, makeCall } = globalStore()
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 43c50441..03e10670 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -330,7 +330,7 @@ import {
 } from 'frappe-ui'
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import {useActiveTabManager} from '@/composables/useActiveTabManager'
+import { useActiveTabManager } from '@/composables/useActiveTabManager'
 
 const { $dialog, $socket, makeCall } = globalStore()
 const { getContactByName, contacts } = contactsStore()