refactor: convert comment plugin helper functions into hook

src/components/Footer.vue

@@ -121,37 +121,23 @@ import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import SvgIcon, { SvgTypes } from '@/components/SvgIcon/index.vue'
 import beianImg from '@/assets/gongan-beian-40-40.png'
-import { walinePageViewInit } from '@/utils/comments/waline-api'
-import {
-  enabledCommentPlugin,
-  intiCommentPluginPageView
-} from '@/utils/comments/helpers'
 import { getDaysTillNow } from '@/utils'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'ObFooter',
   components: { SvgIcon },
   setup() {
     const appStore = useAppStore()
     const { t } = useI18n()
-
-    const enabledPlugin = computed(
-      () => enabledCommentPlugin(appStore.themeConfig.plugins).plugin
-    )
+    const { enabledCommentPlugin, intiCommentPluginPageView } =
+      useCommentPlugin()
 
     watch(
-      () => enabledPlugin.value,
+      () => enabledCommentPlugin.value.plugin,
       (newValue, oldValue) => {
         if (oldValue === '' && newValue) {
-          window.setTimeout(
-            () =>
-              intiCommentPluginPageView(
-                newValue,
-                '/',
-                appStore.themeConfig.plugins
-              ),
-            50
-          )
+          window.setTimeout(() => intiCommentPluginPageView('/'), 50)
         }
       }
     )
@@ -179,7 +165,7 @@ export default defineComponent({
         return getDaysTillNow(`${appStore.themeConfig.site.started_date}`)
       }),
       intiCommentPluginPageView,
-      enabledPlugin,
+      enabledPlugin: computed(() => enabledCommentPlugin.value.plugin),
       t
     }
   }

src/components/Post/PostStats.vue

@@ -173,14 +173,10 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref, defineExpose } from 'vue'
+import { PropType, computed, defineComponent, ref } from 'vue'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import {
-  enabledCommentPlugin,
-  initCommentPluginCommentCount,
-  intiCommentPluginPageView
-} from '@/utils/comments/helpers'
 import { PluginsData, ThemeConfig } from '@/models/ThemeConfig.class'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'ObPostStats',
@@ -208,24 +204,20 @@ export default defineComponent({
   },
   setup(props, { expose }) {
     const commentCount = ref<number | undefined>(undefined)
-    const enabledPlugin = computed(
-      () => enabledCommentPlugin(props.pluginConfigs).plugin
-    )
+    const {
+      enabledCommentPlugin,
+      initCommentPluginCommentCount,
+      intiCommentPluginPageView
+    } = useCommentPlugin()
 
     const getCommentCount = async () => {
       commentCount.value = await initCommentPluginCommentCount(
-        enabledPlugin.value,
-        props.currentPath,
-        props.pluginConfigs
+        props.currentPath
       )
     }
 
     const getPostView = () => {
-      intiCommentPluginPageView(
-        enabledPlugin.value,
-        props.currentPath,
-        props.pluginConfigs
-      )
+      intiCommentPluginPageView(props.currentPath)
     }
 
     expose({
@@ -235,7 +227,7 @@ export default defineComponent({
 
     return {
       commentCount,
-      plugin: enabledPlugin
+      plugin: computed(() => enabledCommentPlugin.value.plugin)
     }
   }
 })

src/components/Sidebar/src/RecentComment.vue

@@ -98,127 +98,49 @@
 import { computed, defineComponent, ref, watch } from 'vue'
 import { SubTitle } from '@/components/Title'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import { RecentComment } from '@/utils'
-import { GithubComments } from '@/utils/comments/github-api'
-import { LeanCloudComments } from '@/utils/comments/leancloud-api'
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
-import { TwikooComments } from '@/utils/comments/twikoo-api'
-import { WalineComments } from '@/utils/comments/waline-api'
 import { SvgTypes } from '@/components/SvgIcon/index.vue'
-import { enabledCommentPlugin } from '@/utils/comments/helpers'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'ObRecentComment',
   components: { SubTitle, SvgIcon },
   setup() {
     const appStore = useAppStore()
     const { t } = useI18n()
-    let recentComments = ref<RecentComment[]>([])
-    let loading = ref<boolean>(true)
-
-    const enabledPlugin = computed<string | undefined>(() => {
-      const result = enabledCommentPlugin(appStore.themeConfig.plugins)
-      return result.plugin !== '' && !!result.recentComment
-        ? result.plugin
-        : undefined
-    })
-
-    const initRecentComment = () => {
-      if (!appStore.configReady || enabledPlugin.value === undefined) {
-        loading.value = false
-        return
-      }
-
-      switch (enabledPlugin.value) {
-        case 'gitalk':
-          const githubComments = new GithubComments({
-            repo: appStore.themeConfig.plugins.gitalk.repo,
-            clientId: appStore.themeConfig.plugins.gitalk.clientID,
-            clientSecret: appStore.themeConfig.plugins.gitalk.clientSecret,
-            owner: appStore.themeConfig.plugins.gitalk.owner,
-            admin: appStore.themeConfig.plugins.gitalk.admin[0]
-          })
-
-          githubComments.getComments().then(response => {
-            recentComments.value = response
-          })
-
-          break
-
-        case 'valine':
-          const leadCloudComments = new LeanCloudComments({
-            appId: appStore.themeConfig.plugins.valine.app_id,
-            appKey: appStore.themeConfig.plugins.valine.app_key,
-            avatar: appStore.themeConfig.plugins.valine.avatar,
-            admin: appStore.themeConfig.plugins.valine.admin,
-            lang: appStore.themeConfig.plugins.valine.lang
-          })
-
-          leadCloudComments.getRecentComments(7).then(res => {
-            recentComments.value = res
-            loading.value = false
-          })
-
-          break
-
-        case 'twikoo':
-          const twikooComments = new TwikooComments({
-            envId: appStore.themeConfig.plugins.twikoo.envId,
-            lang: appStore.themeConfig.plugins.twikoo.lang
-          })
-
-          twikooComments.getRecentComments(7).then(res => {
-            recentComments.value = res
-            loading.value = false
-          })
-
-          break
-
-        case 'waline':
-          const walineComments = new WalineComments({
-            serverURL:
-              'https://' + appStore.themeConfig.plugins.waline.serverURL,
-            lang: appStore.locale ?? 'en'
-          })
-
-          walineComments.getRecentComments(7).then(res => {
-            recentComments.value = res
-            loading.value = false
-          })
-
-          break
-
-        default:
-          loading.value = false
-      }
-    }
+    const {
+      enabledCommentPlugin,
+      recentComments,
+      fetchRecentComment,
+      commentPluginLoading
+    } = useCommentPlugin()
 
     /** Wait for config is ready */
     watch(
       () => appStore.configReady,
       (newValue, oldValue) => {
         if (!oldValue && newValue) {
-          initRecentComment()
+          fetchRecentComment()
         }
       }
     )
 
     return {
       SvgTypes,
-      isLoading: computed(() => loading.value),
+      isLoading: computed(() => commentPluginLoading.value),
       comments: computed(() => {
         return recentComments.value
       }),
       isConfigReady: computed(() => appStore.configReady),
-      initRecentComment,
+      fetchRecentComment,
       enabledCommentPlugin,
       t
     }
   },
   mounted() {
     if (this.isConfigReady) {
-      this.initRecentComment()
+      this.fetchRecentComment()
     }
   }
 })