refactor: refactor some functions implementation

src/components/Topbar/Topbar.vue

@@ -40,18 +40,7 @@ const newMomentsCount = ref<number>(0)
 const logo = ref<HTMLElement>() as Ref<HTMLElement>
 const avatarImg = ref<HTMLImageElement>() as Ref<HTMLImageElement>
 const avatarShadow = ref<HTMLImageElement>() as Ref<HTMLImageElement>
-
-const isHomePage = computed(() => {
-  if (
-    /https?:\/\/bilibili.com\/?$/.test(location.href)
-  || /https?:\/\/www.bilibili.com\/?$/.test(location.href)
-  || /https?:\/\/www.bilibili.com\/index.html$/.test(location.href)
-  || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(location.href)
-  || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(location.href)
-  )
-    return true
-  return false
-})
+const favoritesPopRef = ref<any>()
 
 watch(
   showNotificationsPop,
@@ -75,6 +64,13 @@ watch(
   },
 )
 
+// watch(showFavoritesPop, (newVal, oldVal) => {
+//   if (newVal === oldVal)
+//     return
+//   if (newVal && favoritesPopRef.value)
+//     favoritesPopRef.value.refreshFavoriteResources()
+// })
+
 onMounted(() => {
   initData()
 })
@@ -374,6 +370,7 @@ async function getTopbarNewMomentsCount() {
 
             <!-- Favorites -->
             <div
+              ref="favoritesPopRef"
               class="right-side-item"
               :class="{ active: showFavoritesPop }"
               @mouseenter="showFavoritesPop = true"

src/components/Topbar/components/FavoritesPop.vue

@@ -11,7 +11,6 @@ const favoriteResources = reactive<Array<FavoriteResource>>([])
 const activatedMediaId = ref<number>(0)
 const activatedFavoriteTitle = ref<string>()
 const currentPageNum = ref<number>(1)
-const keyword = ref<string>()
 
 const isLoading = ref<boolean>(false)
 // when noMoreContent is true, the user can't scroll down to load more content
@@ -32,18 +31,14 @@ watch(activatedMediaId, (newVal: number, oldVal: number) => {
   if (favoriteVideosWrap.value)
     smoothScrollToTop(favoriteVideosWrap.value, 300)
 
-  getFavoriteResources(newVal, 1)
+  currentPageNum.value = 1
+  getFavoriteResources()
 })
 
 onMounted(async () => {
   await getFavoriteCategories()
   activatedMediaId.value = favoriteCategories[0].id
   activatedFavoriteTitle.value = favoriteCategories[0].title
-  getFavoriteResources(
-    activatedMediaId.value,
-    ++currentPageNum.value,
-    keyword.value,
-  )
 
   if (favoriteVideosWrap.value) {
     favoriteVideosWrap.value.addEventListener('scroll', () => {
@@ -56,8 +51,10 @@ onMounted(async () => {
         && favoriteResources.length > 0
         && !isLoading.value
       ) {
-        if (activatedMediaId.value && !noMoreContent.value)
-          getFavoriteResources(activatedMediaId.value, ++currentPageNum.value)
+        if (activatedMediaId.value && !noMoreContent.value) {
+          currentPageNum.value++
+          getFavoriteResources()
+        }
       }
     })
   }
@@ -80,22 +77,15 @@ async function getFavoriteCategories() {
 
 /**
  * Get favorite video resources
- * @param mediaId
- * @param pageNum
- * @param keyword
  */
-function getFavoriteResources(
-  mediaId: number,
-  pageNum: number,
-  keyword = '' as string,
-) {
+function getFavoriteResources() {
   isLoading.value = true
   browser.runtime
     .sendMessage({
       contentScriptQuery: 'getFavoriteResources',
-      mediaId,
-      pageNum,
-      keyword,
+      mediaId: activatedMediaId.value,
+      pageNum: currentPageNum.value,
+      keyword: '',
     })
     .then((res) => {
       if (res.code === 0) {
@@ -117,6 +107,12 @@ function getFavoriteResources(
     })
 }
 
+function refreshFavoriteResources() {
+  favoriteResources.length = 0
+  currentPageNum.value = 1
+  getFavoriteResources()
+}
+
 function changeCategory(categoryItem: FavoriteCategory) {
   activatedMediaId.value = categoryItem.id
   activatedFavoriteTitle.value = categoryItem.title