From 0587f6a2667ff6e5aba6a72be745dc70976a634d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 14 Nov 2022 01:06:50 +0800
Subject: [PATCH] refator(MomentsDropdown): move to composition API

---
 src/components/Topbar/MomentsDropdown.vue | 556 ++++++++++++----------
 1 file changed, 306 insertions(+), 250 deletions(-)

diff --git a/src/components/Topbar/MomentsDropdown.vue b/src/components/Topbar/MomentsDropdown.vue
index 8d5366a8..590bd5e4 100644
--- a/src/components/Topbar/MomentsDropdown.vue
+++ b/src/components/Topbar/MomentsDropdown.vue
@@ -1,255 +1,268 @@
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { Ref, UnwrapNestedRefs } from 'vue'
+import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
 import { language } from '~/logic'
 import { calcTimeSince, getUserID } from '~/utils'
 import type { MomentItem } from '~/types'
 import { LanguageType, MomentType } from '~/types'
+const { t } = useI18n()
 
-export default defineComponent({
-  data() {
-    return {
-      moments: [] as MomentItem[],
-      calcTimeSince,
-      MomentType,
-      momentTabs: [
-        {
-          id: 0,
-          name: this.$t('topbar.moments_dropdown.tabs.videos'),
-          isSelected: true,
-        },
-        {
-          id: 1,
-          name: this.$t('topbar.moments_dropdown.tabs.live'),
-          isSelected: false,
-        },
-        {
-          id: 2,
-          name: this.$t('topbar.moments_dropdown.tabs.articles'),
-          isSelected: false,
-        },
-      ],
-      selectedTab: 0,
-      isLoading: false,
-      // when noMoreContent is true, the user can't scroll down to load more content
-      noMoreContent: false,
-      livePage: 1,
-      LanguageType,
-      language,
-    }
+const moments = reactive<Array<MomentItem>>([]) as UnwrapNestedRefs<
+  Array<MomentItem>
+>
+const momentTabs = reactive([
+  {
+    id: 0,
+    name: t('topbar.moments_dropdown.tabs.videos'),
+    isSelected: true,
   },
-  watch: {
-    selectedTab(newVal: number, oldVal: number) {
-      if (newVal === oldVal)
-        return
-
-      this.scrollToTop(this.$refs.momentsWrap as HTMLElement, 300)
-      this.moments = []
-      if (newVal === 0) {
-        this.getNewMoments([MomentType.Video, MomentType.Bangumi])
-      }
-      else if (newVal === 1) {
-        this.livePage = 1
-        this.getLiveMoments(this.livePage)
-      }
-      else if (newVal === 2) {
-        this.getNewMoments([MomentType.Article])
-      }
-    },
+  {
+    id: 1,
+    name: t('topbar.moments_dropdown.tabs.live'),
+    isSelected: false,
   },
-  mounted() {
-    this.getNewMoments([MomentType.Video, MomentType.Bangumi])
+  {
+    id: 2,
+    name: t('topbar.moments_dropdown.tabs.articles'),
+    isSelected: false,
+  },
+])
+const selectedTab = ref<number>(0)
+const isLoading = ref<boolean>(false)
+// when noMoreContent is true, the user can't scroll down to load more content
+const noMoreContent = ref<boolean>(false)
+const livePage = ref<number>(1)
+const momentsWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
-    const momentsWrap = this.$refs.momentsWrap as HTMLDivElement
-    momentsWrap.addEventListener('scroll', () => {
-      if (momentsWrap.clientHeight + momentsWrap.scrollTop >= momentsWrap.scrollHeight
-        && this.moments.length > 0 && !this.isLoading) {
-        if (this.selectedTab === 0 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Video, MomentType.Bangumi])
-        else if (this.selectedTab === 1 && !this.noMoreContent)
-          this.getLiveMoments(this.livePage)
-        else if (this.selectedTab === 2 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Article])
+watch(selectedTab, (newVal: number, oldVal: number) => {
+  if (newVal === oldVal)
+    return
+
+  if (momentsWrap.value)
+    scrollToTop(momentsWrap.value, 300)
+  moments.length = 0
+  if (newVal === 0) {
+    getNewMoments([MomentType.Video, MomentType.Bangumi])
+  }
+  else if (newVal === 1) {
+    livePage.value = 1
+    getLiveMoments(livePage.value)
+  }
+  else if (newVal === 2) {
+    getNewMoments([MomentType.Article])
+  }
+})
+
+onMounted(() => {
+  getNewMoments([MomentType.Video, MomentType.Bangumi])
+
+  if (momentsWrap.value) {
+    momentsWrap.value.addEventListener('scroll', () => {
+      if (
+        momentsWrap.value.clientHeight + momentsWrap.value.scrollTop
+          >= momentsWrap.value.scrollHeight - 20
+        && moments.length > 0
+        && !isLoading.value
+      ) {
+        if (selectedTab.value === 0 && !noMoreContent.value)
+          getHistoryMoments([MomentType.Video, MomentType.Bangumi])
+        else if (selectedTab.value === 1 && !noMoreContent.value)
+          getLiveMoments(livePage.value)
+        else if (selectedTab.value === 2 && !noMoreContent.value)
+          getHistoryMoments([MomentType.Article])
       }
     })
-  },
-  methods: {
-    onClickTab(tabId: number) {
-      // Prevent changing tab when loading, cuz it will cause a bug
-      if (this.isLoading)
-        return
-
-      this.selectedTab = tabId
-      this.momentTabs.forEach((tab) => {
-        tab.isSelected = tab.id === tabId
-      })
-    },
-    getNewMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getNewMoments',
-        uid: getUserID(),
-        typeList,
-      }).then((res) => {
-        if (res.code === 0) {
-          if (this.moments.length !== 0 && res.data.cards.length < 20) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
-
-          res.data.cards.forEach((item: any) => {
-            this.pushItemIntoMoments(item)
-          })
-
-          // set this lastest offset id, which will clear the new moment's marker point
-          // after you watch these moments.
-          if (this.selectedTab === 0)
-            setLastestOffsetID(MomentType.Video, this.moments[0].id)
-          else if (this.selectedTab === 2)
-            setLastestOffsetID(MomentType.Article, this.moments[0].id)
-
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
-    },
-    getHistoryMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getHistoryMoments',
-        uid: getUserID(),
-        typeList,
-        offsetDynamicID: this.moments[this.moments.length - 1].dynamic_id_str,
-      }).then((res) => {
-        if (res.code === 0) {
-          if (res.data.has_more === 0) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
-
-          res.data.cards.forEach((item: any) => {
-            this.pushItemIntoMoments(item)
-          })
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
-    },
-    getLiveMoments(page: number) {
-      this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getLiveMoments',
-        page,
-        pageSize: 10,
-      }).then((res) => {
-        if (res.code === 0) {
-          // if the length of this list is less then the pageSize, it means that it have no more contents
-          if (this.moments.length !== 0 && res.data.list.length < 10) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
-
-          // if the length of this list is equal to the pageSize, this means that it may have the next page.
-          if (res.data.list.length === 10)
-            this.livePage++
-          res.data.list.forEach((item: any) => {
-            this.moments.push({
-              id: item.roomid,
-              uid: item.uid,
-              name: item.uname,
-              face: item.face,
-              url: item.link,
-              title: item.title,
-              cover: item.pic,
-            } as MomentItem)
-          })
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
-    },
-    pushItemIntoMoments(item: any) {
-      const card = JSON.parse(item.card)
-
-      if (item.desc.type === MomentType.Video) {
-        // if this is a video moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          aid: card.aid,
-          bvid: item.desc.bvid,
-          url: card.short_link_v2,
-          ctime: card.ctime,
-          title: card.title,
-          cover: card.pic,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Bangumi) {
-        // bangumi moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          name: card.apiSeasonInfo.title,
-          face: card.apiSeasonInfo.cover,
-          episode_id: card.episode_id,
-          url: card.url,
-          title: card.new_desc,
-          cover: card.cover,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Article) {
-        // article moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          url: `https://www.bilibili.com/read/cv${card.id}`,
-          ctime: card.publish_time,
-          title: card.title,
-          cover: card.image_urls[0],
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewArticle(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-    },
-    /**
-     * smooth scroll to the top of the html element
-     */
-    scrollToTop(element: HTMLElement, duration: number) {
-    // cancel if already on top
-      if (element.scrollTop === 0)
-        return
-
-      const cosParameter = element.scrollTop / 2
-      let scrollCount = 0
-      let oldTimestamp = 0
-
-      function step(newTimestamp: number) {
-        if (oldTimestamp !== 0) {
-          // if duration is 0 scrollCount will be Infinity
-          scrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration
-          if (scrollCount >= Math.PI)
-            return element.scrollTop = 0
-          element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
-        }
-        oldTimestamp = newTimestamp
-        window.requestAnimationFrame(step)
-      }
-      window.requestAnimationFrame(step)
-    },
-  },
+  }
 })
+
+function onClickTab(tabId: number) {
+  // Prevent changing tab when loading, cuz it will cause a bug
+  if (isLoading.value)
+    return
+
+  selectedTab.value = tabId
+  momentTabs.forEach((tab) => {
+    tab.isSelected = tab.id === tabId
+  })
+}
+
+function getNewMoments(typeList: number[]) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getNewMoments',
+      uid: getUserID(),
+      typeList,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        if (moments.length !== 0 && res.data.cards.length < 20) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        res.data.cards.forEach((item: any) => {
+          pushItemIntoMoments(item)
+        })
+
+        // set this lastest offset id, which will clear the new moment's marker point
+        // after you watch these moments.
+        if (selectedTab.value === 0)
+          setLastestOffsetID(MomentType.Video, moments[0].id)
+        else if (selectedTab.value === 2)
+          setLastestOffsetID(MomentType.Article, moments[0].id)
+
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+function getHistoryMoments(typeList: number[]) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getHistoryMoments',
+      uid: getUserID(),
+      typeList,
+      offsetDynamicID: moments[moments.length - 1].dynamic_id_str,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        if (res.data.has_more === 0) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        res.data.cards.forEach((item: any) => {
+          pushItemIntoMoments(item)
+        })
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+function getLiveMoments(page: number) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getLiveMoments',
+      page,
+      pageSize: 10,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        // if the length of this list is less then the pageSize, it means that it have no more contents
+        if (moments.length !== 0 && res.data.list.length < 10) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        // if the length of this list is equal to the pageSize, this means that it may have the next page.
+        if (res.data.list.length === 10)
+          livePage.value++
+        res.data.list.forEach((item: any) => {
+          moments.push({
+            id: item.roomid,
+            uid: item.uid,
+            name: item.uname,
+            face: item.face,
+            url: item.link,
+            title: item.title,
+            cover: item.pic,
+          } as MomentItem)
+        })
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+function pushItemIntoMoments(item: any) {
+  const card = JSON.parse(item.card)
+
+  if (item.desc.type === MomentType.Video) {
+    // if this is a video moment
+    moments.push({
+      type: item.desc.type,
+      id: item.desc.dynamic_id,
+      uid: item.desc.uid,
+      name: item.desc.user_profile.info.uname,
+      face: item.desc.user_profile.info.face,
+      aid: card.aid,
+      bvid: item.desc.bvid,
+      url: card.short_link_v2,
+      ctime: card.ctime,
+      title: card.title,
+      cover: card.pic,
+      dynamic_id_str: item.desc.dynamic_id_str,
+      isNew: isNewVideo(item.desc.dynamic_id),
+    } as MomentItem)
+  }
+  else if (item.desc.type === MomentType.Bangumi) {
+    // bangumi moment
+    moments.push({
+      type: item.desc.type,
+      id: item.desc.dynamic_id,
+      name: card.apiSeasonInfo.title,
+      face: card.apiSeasonInfo.cover,
+      episode_id: card.episode_id,
+      url: card.url,
+      title: card.new_desc,
+      cover: card.cover,
+      dynamic_id_str: item.desc.dynamic_id_str,
+      isNew: isNewVideo(item.desc.dynamic_id),
+    } as MomentItem)
+  }
+  else if (item.desc.type === MomentType.Article) {
+    // article moment
+    moments.push({
+      type: item.desc.type,
+      id: item.desc.dynamic_id,
+      uid: item.desc.uid,
+      name: item.desc.user_profile.info.uname,
+      face: item.desc.user_profile.info.face,
+      url: `https://www.bilibili.com/read/cv${card.id}`,
+      ctime: card.publish_time,
+      title: card.title,
+      cover: card.image_urls[0],
+      dynamic_id_str: item.desc.dynamic_id_str,
+      isNew: isNewArticle(item.desc.dynamic_id),
+    } as MomentItem)
+  }
+}
+
+/**
+ * smooth scroll to the top of the html element
+ */
+function scrollToTop(element: HTMLElement, duration: number) {
+  // cancel if already on top
+  if (element.scrollTop === 0)
+    return
+
+  const cosParameter = element.scrollTop / 2
+  let scrollCount = 0
+  let oldTimestamp = 0
+
+  function step(newTimestamp: number) {
+    if (oldTimestamp !== 0) {
+      // if duration is 0 scrollCount will be Infinity
+      scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
+      if (scrollCount >= Math.PI)
+        return (element.scrollTop = 0)
+      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
+    }
+    oldTimestamp = newTimestamp
+    window.requestAnimationFrame(step)
+  }
+  window.requestAnimationFrame(step)
+}
 </script>
 
 <template>
@@ -294,7 +307,12 @@ export default defineComponent({
     <!-- moments wrapper -->
     <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
       <!-- loading -->
-      <loading v-if="isLoading && moments.length === 0" h="full" flex="~" items="center" />
+      <loading
+        v-if="isLoading && moments.length === 0"
+        h="full"
+        flex="~"
+        items="center"
+      />
 
       <!-- empty -->
       <empty v-if="!isLoading && moments.length === 0" w="full" h="full" />
@@ -330,28 +348,66 @@ export default defineComponent({
           />
 
           <a
-            :href="moment.type === MomentType.Video ? `https://space.bilibili.com/${moment.uid}` : moment.url"
+            :href="
+              moment.type === MomentType.Video
+                ? `https://space.bilibili.com/${moment.uid}`
+                : moment.url
+            "
             target="_blank"
           >
-            <img :src="`${moment.face}@60w_60h_1c`" rounded="$bew-radius" w="40px" h="40px" m="r-4">
+            <img
+              :src="`${moment.face}@60w_60h_1c`"
+              rounded="$bew-radius"
+              w="40px"
+              h="40px"
+              m="r-4"
+            >
           </a>
 
           <div flex="~" justify="between" w="full">
             <div>
-              <span>{{ moment.name }}</span> {{ $t('topbar.moments_dropdown.uploaded') }}{{ moment.title }}
-              <div v-if="moment.type !== MomentType.Bangumi" text="$bew-text-2 sm" m="y-2">
+              <span>{{ `${moment.name} ${t('topbar.moments_dropdown.uploaded')}` }}</span>
+              <div overflow="hidden" text="overflow-ellipsis">
+                {{ moment.title }}
+              </div>
+              <div
+                v-if="moment.type !== MomentType.Bangumi"
+                text="$bew-text-2 sm"
+                m="y-2"
+              >
                 <!-- Videos and articles -->
                 <div v-if="selectedTab === 0 || selectedTab === 2">
-                  {{ calcTimeSince(new Date(moment.ctime * 1000)) }}{{ language === LanguageType.English ? ` ${$t('common.ago')}` : $t('common.ago') }}
+                  {{
+                    moment.ctime
+                      ? calcTimeSince(new Date(moment.ctime * 1000))
+                      : moment.ctime
+                  }}{{
+                    language === LanguageType.English
+                      ? ` ${$t('common.ago')}`
+                      : $t('common.ago')
+                  }}
                 </div>
+
                 <!-- Live -->
-                <div v-else-if="selectedTab === 1" text="$bew-theme-color" font="bold" flex="~" items="center">
-                  <fluent:live-24-filled m="r-2" /> {{ $t('topbar.moments_dropdown.live_status') }}
+                <div
+                  v-else-if="selectedTab === 1"
+                  text="$bew-theme-color"
+                  font="bold"
+                  flex="~"
+                  items="center"
+                >
+                  <fluent:live-24-filled m="r-2" />
+                  {{ $t('topbar.moments_dropdown.live_status') }}
                 </div>
               </div>
-
             </div>
-            <img :src="`${moment.cover}@128w_72h_1c`" w="82px" h="46px" m="l-4" rounded="$bew-radius">
+            <img
+              :src="`${moment.cover}@128w_72h_1c`"
+              w="82px"
+              h="46px"
+              m="l-4"
+              rounded="$bew-radius"
+            >
           </div>
         </a>
       </transition-group>