Refact tab

Author: Stigmatoz

src/compositions/useExtensionPage.ts

@@ -1,30 +1,49 @@
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { SettingsTab } from '../utils/enums';
+import { getStringTab } from '../utils/extension-tabs';
 
 export const QUERY_PARAMS_DASHBOARD = 'dashboard.html';
 export const QUERY_PARAMS_DASHBOARD_TAB = 'tab';
-export const QUERY_PARAMS_DASHBOARD_TAB_SETTINGS = 'settings';
+export const QUERY_PARAMS_DASHBOARD_TAB_LIMITS = 'limits';
 export const QUERY_PARAMS_BLOCK = 'block.html';
 export const QUERY_PARAMS_BLOCK_DOMAIN = 'domain';
 
 export function useExtensionPage() {
-  const urlObj = new URL(location.href);
+  const urlObj = ref(new URL(location.href));
 
   const isLimitPage = computed(
     () =>
-      urlObj.hostname == __APP_ID__ &&
-      urlObj.pathname.includes(QUERY_PARAMS_DASHBOARD) &&
-      urlObj.searchParams.get(QUERY_PARAMS_DASHBOARD_TAB) == QUERY_PARAMS_DASHBOARD_TAB_SETTINGS,
+      urlObj.value.hostname == __APP_ID__ &&
+      urlObj.value.pathname.includes(QUERY_PARAMS_DASHBOARD) &&
+      urlObj.value.searchParams.get(QUERY_PARAMS_DASHBOARD_TAB) ==
+        QUERY_PARAMS_DASHBOARD_TAB_LIMITS,
   );
 
   const isBlockPage = computed(
     () =>
-      urlObj.hostname == __APP_ID__ &&
-      urlObj.pathname.includes(QUERY_PARAMS_BLOCK) &&
-      urlObj.searchParams.get(QUERY_PARAMS_BLOCK_DOMAIN) == 'youtube.com',
+      urlObj.value.hostname == __APP_ID__ &&
+      urlObj.value.pathname.includes(QUERY_PARAMS_BLOCK) &&
+      urlObj.value.searchParams.get(QUERY_PARAMS_BLOCK_DOMAIN) == 'youtube.com',
   );
 
+  function updateTab(tab: SettingsTab) {
+    let targetTab = getStringTab(tab);
+    const currentTab = urlObj.value.searchParams.get(QUERY_PARAMS_DASHBOARD_TAB);
+    if (window.history.replaceState && currentTab) {
+      const sourceUrl = `tab=${currentTab}`;
+      const targetUrl = `tab=${targetTab}`;
+      window.history.replaceState(
+        location.href,
+        document.title,
+        location.href.replace(sourceUrl, targetUrl),
+      );
+      urlObj.value = new URL(location.href);
+    }
+  }
+
   return {
     isLimitPage,
     isBlockPage,
+    updateTab,
   };
 }

src/pages/Dashboard.vue

@@ -135,7 +135,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import GeneralSettings from '../components/GeneralSettings.vue';
 import WhiteList from '../components/WhiteList.vue';
@@ -144,35 +144,46 @@ import DailyNotifications from '../components/Notifications.vue';
 import About from '../components/About.vue';
 import { SettingsTab } from '../utils/enums';
 import DashboadContainer from '../components/DashboadContainer.vue';
+import { useExtensionPage } from '../compositions/useExtensionPage';
+import { getEnumValueTab } from '../utils/extension-tabs';
 
 const { t } = useI18n();
+const extensionPage = useExtensionPage();
 
 const selectedTab = ref<SettingsTab>();
+const currentUrl = ref(new URL(location.href));
 const selectedWebsite = ref<string>();
 
+watch(currentUrl, () => {
+  getCurrentTab();
+});
+
 onMounted(() => {
-  const urlObj = new URL(location.href);
-  const tabName = urlObj.searchParams.get('tab');
+  getCurrentTab();
+});
+
+function getCurrentTab() {
+  const tabName = currentUrl.value.searchParams.get('tab');
   if (tabName != null && tabName != '') {
-    switch (tabName) {
-      case 'dashboard':
-        selectedTab.value = SettingsTab.Dashboard;
-        break;
-      case 'settings':
-        selectedTab.value = SettingsTab.GeneralSettings;
-        break;
-      case 'website-stats':
-        selectedTab.value = SettingsTab.WebsiteStats;
-        const domain = urlObj.searchParams.get('website');
-        if (domain != null && domain != '') selectedWebsite.value = domain;
-        else selectedTab.value = SettingsTab.Dashboard;
-        break;
+    selectedTab.value = getEnumValueTab(tabName);
+    const domain = currentUrl.value.searchParams.get('website');
+    if (selectedTab.value == SettingsTab.WebsiteStats) {
+      if (domain != null && domain != '') selectedWebsite.value = domain;
+      else selectedTab.value = SettingsTab.Dashboard;
+    } else if (domain != null && domain != '') {
+      window.history.replaceState(
+        location.href,
+        document.title,
+        location.href.replace(`&website=${domain}`, ''),
+      );
     }
-  } else selectedTab.value = selectedTab.value = SettingsTab.Dashboard;
-});
+  }
+}
 
 function selectTab(value: SettingsTab) {
   selectedTab.value = value;
+  extensionPage.updateTab(value);
+  currentUrl.value = new URL(location.href);
 }
 </script>
 

src/utils/extension-tabs.ts

@@ -0,0 +1,39 @@
+import { SettingsTab } from './enums';
+
+export function getStringTab(tab: SettingsTab) {
+  switch (tab) {
+    case SettingsTab.Dashboard:
+      return 'dashboard';
+    case SettingsTab.WebsiteStats:
+      return 'website-stats';
+    case SettingsTab.GeneralSettings:
+      return 'settings';
+    case SettingsTab.About:
+      return 'about';
+    case SettingsTab.Limits:
+      return 'limits';
+    case SettingsTab.WhiteList:
+      return 'whitelist';
+    case SettingsTab.Notifications:
+      return 'notifications';
+  }
+}
+
+export function getEnumValueTab(tab: string) {
+  switch (tab) {
+    case 'dashboard':
+      return SettingsTab.Dashboard;
+    case 'website-stats':
+      return SettingsTab.WebsiteStats;
+    case 'settings':
+      return SettingsTab.GeneralSettings;
+    case 'about':
+      return SettingsTab.About;
+    case 'limits':
+      return SettingsTab.Limits;
+    case 'whitelist':
+      return SettingsTab.WhiteList;
+    case 'notifications':
+      return SettingsTab.Notifications;
+  }
+}

src/utils/open-page.ts

@@ -1,23 +1,14 @@
 import Browser from 'webextension-polyfill';
 import { SettingsTab } from './enums';
+import { getStringTab } from './extension-tabs';
 
 export async function openPage(tab: SettingsTab, domain?: string) {
   function getDomain() {
     return domain != undefined && tab == SettingsTab.WebsiteStats ? `&website=${domain}` : '';
   }
 
-  let tabName = '';
-  switch (tab) {
-    case SettingsTab.Dashboard:
-      tabName = 'dashboard';
-      break;
-    case SettingsTab.WebsiteStats:
-      tabName = 'website-stats';
-      break;
-    case SettingsTab.GeneralSettings:
-      tabName = 'settings';
-      break;
-  }
+  let tabName = getStringTab(tab);
+
   const url = Browser.runtime.getURL(
     `src/dashboard.html${tabName != '' ? `?tab=${tabName}` : ''}${getDomain()}`,
   );