From 6e2ed46f8a8ee52b3e3f401210a71adcc990dc5a Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 4 Mar 2024 01:15:11 -0300
Subject: [PATCH] refactor: refactor methods for dock items comparison and home
 tabs comparison

---
 src/components/Dock/Dock.vue                | 104 +++++++++-----------
 src/components/Dock/types.ts                |   9 --
 src/components/Settings/components/Home.vue |  38 +------
 src/contentScripts/views/Home/Home.vue      |  61 ++++--------
 src/contentScripts/views/Home/types.ts      |   5 -
 src/stores/mainStore.ts                     |  33 ++++++-
 6 files changed, 101 insertions(+), 149 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 411a908a..3e7a8dbe 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
 import { usePreferredDark } from '@vueuse/core'
-import type { CurrentDockItem, HoveringDockItem } from './types'
-import type { AppPage } from '~/enums/appEnums'
+import type { HoveringDockItem } from './types'
+import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import type { DockItem } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
@@ -14,14 +13,13 @@ const emit = defineEmits(['change-page', 'settings-visibility-change'])
 const { mainAppRef } = useBewlyApp()
 
 const mainStore = useMainStore()
-const { t } = useI18n()
 
 const hideDock = ref<boolean>(false)
-
 const hoveringDockItem = reactive<HoveringDockItem>({
   themeMode: false,
   settings: false,
 })
+const currentDockItems = ref<DockItem[]>([])
 
 const tooltipPlacement = computed(() => {
   if (settings.value.dockPosition === 'left')
@@ -43,49 +41,39 @@ const currentAppColorScheme = computed((): 'dark' | 'light' => {
     return currentSystemColorScheme.value
 })
 
-const currentDockItems = computed((): CurrentDockItem[] => {
-  return mainStore.dockItems.map((e: DockItem) => {
-    return {
-      label: t(e.i18nKey),
-      icon: e.icon,
-      iconActivated: e.iconActivated,
-      page: e.page,
-    }
-  })
-})
-
 watch(() => settings.value.autoHideDock, (newValue) => {
   hideDock.value = newValue
 })
 
+// use Json stringify to watch the changes of the array item properties
+watch(() => JSON.stringify(settings.value.dockItemVisibilityList), () => {
+  currentDockItems.value = computeDockItem()
+})
+
+function computeDockItem(): DockItem[] {
+  // if dockItemVisibilityList not fresh , set it to default
+  if (!settings.value.dockItemVisibilityList.length || settings.value.dockItemVisibilityList.length !== mainStore.dockItems.length)
+    settings.value.dockItemVisibilityList = mainStore.dockItems.map(dock => ({ page: dock.page, visible: true }))
+
+  const targetDockItems: DockItem[] = []
+
+  settings.value.dockItemVisibilityList.forEach((item) => {
+    const foundItem = mainStore.dockItems.find(defaultItem => defaultItem.page === item.page)
+    item.visible && targetDockItems.push({
+      i18nKey: foundItem?.i18nKey || '',
+      icon: foundItem?.icon || '',
+      iconActivated: foundItem?.iconActivated || '',
+      page: foundItem?.page || AppPage.Home,
+    })
+  })
+  return targetDockItems
+}
+
 onMounted(() => {
   if (settings.value.autoHideDock)
     hideDock.value = true
 
-  if (settings.value.dockItemVisibilityList.length < currentDockItems.value.length || settings.value.dockItemVisibilityList.length > currentDockItems.value.length) {
-    const newDockItemVisibilityList = ref<{ page: AppPage, visible: boolean }[]>([])
-    currentDockItems.value.forEach((item) => {
-      newDockItemVisibilityList.value.push({ page: item.page, visible: true })
-    })
-
-    // Compare two arrays, get the differing elements, and delete or add them to the dockItemVisibilityList
-    const notInNewDockItemVisibilityList = settings.value.dockItemVisibilityList.filter(obj1 =>
-      !newDockItemVisibilityList.value.some(obj2 => obj1.page === obj2.page),
-    )
-    const notInDockItemVisibilityList = newDockItemVisibilityList.value.filter(obj1 =>
-      !settings.value.dockItemVisibilityList.some(obj2 => obj1.page === obj2.page),
-    )
-    const allDifferences = [...notInDockItemVisibilityList, ...notInNewDockItemVisibilityList]
-
-    if (settings.value.dockItemVisibilityList.length < currentDockItems.value.length) {
-      settings.value.dockItemVisibilityList.push(...allDifferences)
-    }
-    else {
-      allDifferences.forEach((obj1) => {
-        settings.value.dockItemVisibilityList = settings.value.dockItemVisibilityList.filter(obj2 => obj2.page !== obj1.page)
-      })
-    }
-  }
+  currentDockItems.value = computeDockItem()
 })
 
 function toggleDark(e: MouseEvent) {
@@ -199,25 +187,23 @@ function toggleDockHide(hide: boolean) {
       @mouseenter="toggleDockHide(false)"
       @mouseleave="toggleDockHide(true)"
     >
-      <template v-for="dockItemVisibility in settings.dockItemVisibilityList" :key="dockItemVisibility.page">
-        <template v-if="dockItemVisibility.visible">
-          <Tooltip :content="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.label as string" :placement="tooltipPlacement">
-            <button
-              class="dock-item"
-              :class="{ active: activatedPage === dockItemVisibility.page }"
-              @click="emit('change-page', dockItemVisibility.page)"
-            >
-              <Icon
-                v-show="activatedPage !== dockItemVisibility.page"
-                :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.icon as string"
-              />
-              <Icon
-                v-show="activatedPage === dockItemVisibility.page"
-                :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.iconActivated as string"
-              />
-            </button>
-          </Tooltip>
-        </template>
+      <template v-for="dockItem in currentDockItems" :key="dockItem.page">
+        <Tooltip :content="$t(dockItem.i18nKey)" :placement="tooltipPlacement">
+          <button
+            class="dock-item"
+            :class="{ active: activatedPage === dockItem.page }"
+            @click="emit('change-page', dockItem.page)"
+          >
+            <Icon
+              v-show="activatedPage !== dockItem.page"
+              :icon="dockItem.icon"
+            />
+            <Icon
+              v-show="activatedPage === dockItem.page"
+              :icon="dockItem.iconActivated"
+            />
+          </button>
+        </Tooltip>
       </template>
 
       <!-- dividing line -->
diff --git a/src/components/Dock/types.ts b/src/components/Dock/types.ts
index f9dd5095..bc33c283 100644
--- a/src/components/Dock/types.ts
+++ b/src/components/Dock/types.ts
@@ -1,12 +1,3 @@
-import type { AppPage } from '~/enums/appEnums'
-
-export interface CurrentDockItem {
-  label: string
-  icon: string
-  iconActivated: string
-  page: AppPage
-}
-
 export interface HoveringDockItem {
   themeMode: boolean
   settings: boolean
diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue
index e332ce09..90224433 100644
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -2,16 +2,13 @@
 import type { Ref } from 'vue'
 import QRCodeVue from 'qrcode.vue'
 import { useToast } from 'vue-toastification'
-import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
 import SearchPage from './SearchPage.vue'
-import type { HomeTab } from '~/contentScripts/views/Home/types.ts'
-import { HomeSubPage } from '~/contentScripts/views/Home/types'
 import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
 import { accessKey, settings } from '~/logic'
+import { useMainStore } from '~/stores/mainStore'
 
-const { t } = useI18n()
-
+const mainStore = useMainStore()
 const toast = useToast()
 
 const showSearchPageModeSharedSettings = ref<boolean>(false)
@@ -102,35 +99,10 @@ function handleCloseSearchPageModeSharedSettings() {
   preventCloseSettings.value = false
 }
 
-const homeTabs = computed((): HomeTab[] => {
-  return [
-    {
-      label: t('home.for_you'),
-      value: HomeSubPage.ForYou,
-    },
-    {
-      label: t('home.following'),
-      value: HomeSubPage.Following,
-    },
-    {
-      label: t('home.subscribed_series'),
-      value: HomeSubPage.SubscribedSeries,
-    },
-    {
-      label: t('home.trending'),
-      value: HomeSubPage.Trending,
-    },
-    {
-      label: t('home.ranking'),
-      value: HomeSubPage.Ranking,
-    },
-  ]
-})
-
 function resetHomeTabs() {
-  settings.value.homePageTabVisibilityList = homeTabs.value.map((tab) => {
+  settings.value.homePageTabVisibilityList = mainStore.homeTabs.map((tab) => {
     return {
-      page: tab.value,
+      page: tab.page,
       visible: true,
     }
   })
@@ -254,7 +226,7 @@ function handleToggleHomeTab(tab: any) {
               }"
               @click="handleToggleHomeTab(element)"
             >
-              {{ homeTabs.find(tab => tab.value === element.page)?.label }}
+              {{ $t(mainStore.homeTabs.find(tab => tab.page === element.page)?.i18nKey ?? '') }}
             </div>
           </template>
         </draggable>
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 5b4f890a..22715443 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import type { HomeTab } from './types'
 import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
 import { settings } from '~/logic'
 import { delay } from '~/utils/main'
+import type { HomeTab } from '~/stores/mainStore'
+import { useMainStore } from '~/stores/mainStore'
 
-const { t } = useI18n()
-
+const mainStore = useMainStore()
 const { handleBackToTop, scrollbarRef } = useBewlyApp()
 
 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
@@ -23,30 +22,7 @@ const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
 const tabContentLoading = ref<boolean>(false)
 
-const tabs = ref<HomeTab[]>([])
-
-const defaultTabs = [
-  {
-    label: t('home.for_you'),
-    value: HomeSubPage.ForYou,
-  },
-  {
-    label: t('home.following'),
-    value: HomeSubPage.Following,
-  },
-  {
-    label: t('home.subscribed_series'),
-    value: HomeSubPage.SubscribedSeries,
-  },
-  {
-    label: t('home.trending'),
-    value: HomeSubPage.Trending,
-  },
-  {
-    label: t('home.ranking'),
-    value: HomeSubPage.Ranking,
-  },
-]
+const currentTabs = ref<HomeTab[]>([])
 
 watch(() => activatedPage.value, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
@@ -54,20 +30,20 @@ watch(() => activatedPage.value, () => {
 
 // use Json stringify to watch the changes of the array item properties
 watch(() => JSON.stringify(settings.value.homePageTabVisibilityList), () => {
-  tabs.value = computeTabs()
+  currentTabs.value = computeTabs()
 })
 
-function computeTabs() {
+function computeTabs(): HomeTab[] {
   // if homePageTabVisibilityList not fresh , set it to default
-  if (!settings.value.homePageTabVisibilityList.length || settings.value.homePageTabVisibilityList.length !== defaultTabs.length)
-    settings.value.homePageTabVisibilityList = defaultTabs.map(tab => ({ page: tab.value, visible: true }))
+  if (!settings.value.homePageTabVisibilityList.length || settings.value.homePageTabVisibilityList.length !== mainStore.homeTabs.length)
+    settings.value.homePageTabVisibilityList = mainStore.homeTabs.map(tab => ({ page: tab.page, visible: true }))
 
   const targetTabs: HomeTab[] = []
 
   for (const tab of settings.value.homePageTabVisibilityList) {
     tab.visible && targetTabs.push({
-      label: (defaultTabs.find(defaultTab => defaultTab.value === tab.page) || {})?.label || tab.page,
-      value: tab.page,
+      i18nKey: (mainStore.homeTabs.find(defaultTab => defaultTab.page === tab.page) || {})?.i18nKey || tab.page,
+      page: tab.page,
     })
   }
 
@@ -105,8 +81,8 @@ onMounted(() => {
     }
   })
 
-  tabs.value = computeTabs()
-  activatedPage.value = tabs.value[0].value
+  currentTabs.value = computeTabs()
+  activatedPage.value = currentTabs.value[0].page
 })
 
 onUnmounted(() => {
@@ -120,11 +96,12 @@ function handleChangeTab(tab: HomeTab) {
   // because `handlePageRefresh` and `handleReachBottom` has been replaced
   // now they are set to refresh the data of the tab you switched to
   if (!tabContentLoading.value)
-    activatedPage.value = tab.value
+    activatedPage.value = tab.page
 }
 
 function toggleTabContentLoading(loading: boolean) {
   nextTick(async () => {
+    // Delay the closing effect to prevent the transition effect from being too stiff
     if (!loading)
       await delay(500)
     tabContentLoading.value = loading
@@ -200,18 +177,18 @@ function toggleTabContentLoading(loading: boolean) {
       >
         <ul flex="~ items-center gap-3 wrap">
           <li
-            v-for="tab in tabs" :key="tab.value"
+            v-for="tab in currentTabs" :key="tab.page"
             px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" backdrop-glass rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
             flex="~ gap-2 items-center"
-            :class="{ 'tab-activated': activatedPage === tab.value }"
+            :class="{ 'tab-activated': activatedPage === tab.page }"
             @click="handleChangeTab(tab)"
           >
-            <span class="text-center">{{ tab.label }}</span>
+            <span class="text-center">{{ $t(tab.i18nKey) }}</span>
             <Icon
               :style="{
-                opacity: activatedPage === tab.value && tabContentLoading ? 1 : 0,
-                margin: activatedPage === tab.value && tabContentLoading ? '0' : '-12px',
+                opacity: activatedPage === tab.page && tabContentLoading ? 1 : 0,
+                margin: activatedPage === tab.page && tabContentLoading ? '0' : '-12px',
               }"
               icon="svg-spinners:ring-resize"
               duration-300 ease-in-out mb--2px text-16px
diff --git a/src/contentScripts/views/Home/types.ts b/src/contentScripts/views/Home/types.ts
index f8cf6cb8..755b15c8 100644
--- a/src/contentScripts/views/Home/types.ts
+++ b/src/contentScripts/views/Home/types.ts
@@ -1,8 +1,3 @@
-export interface HomeTab {
-  label: string
-  value: HomeSubPage
-}
-
 export enum HomeSubPage {
   ForYou = 'ForYou',
   Following = 'Following',
diff --git a/src/stores/mainStore.ts b/src/stores/mainStore.ts
index b0a8dd1a..d0d1e28c 100644
--- a/src/stores/mainStore.ts
+++ b/src/stores/mainStore.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { HomeSubPage } from '~/contentScripts/views/Home/types'
 import { AppPage } from '~/enums/appEnums'
 
 export interface DockItem {
@@ -8,6 +9,11 @@ export interface DockItem {
   page: AppPage
 }
 
+export interface HomeTab {
+  i18nKey: string
+  page: HomeSubPage
+}
+
 export const useMainStore = defineStore('main', () => {
   const dockItems = computed((): DockItem[] => {
     return [
@@ -20,5 +26,30 @@ export const useMainStore = defineStore('main', () => {
     ]
   })
 
-  return { dockItems }
+  const homeTabs = computed((): HomeTab[] => {
+    return [
+      {
+        i18nKey: 'home.for_you',
+        page: HomeSubPage.ForYou,
+      },
+      {
+        i18nKey: 'home.following',
+        page: HomeSubPage.Following,
+      },
+      {
+        i18nKey: 'home.subscribed_series',
+        page: HomeSubPage.SubscribedSeries,
+      },
+      {
+        i18nKey: 'home.trending',
+        page: HomeSubPage.Trending,
+      },
+      {
+        i18nKey: 'home.ranking',
+        page: HomeSubPage.Ranking,
+      },
+    ]
+  })
+
+  return { dockItems, homeTabs }
 })