From c01b8479837a34a1b0c8e5d4ae57cc4889acca13 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Mon, 13 Feb 2023 22:11:45 +0800
Subject: [PATCH] fix: make network prop reactive, close #62 (#65)

* fix: make network prop reactive, close #62

* fix: miss ref value

---------

Co-authored-by: ntnyq <ntnyq13@gmail.com>
---
 src/client/components/SocialShare.ts | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/client/components/SocialShare.ts b/src/client/components/SocialShare.ts
index 897ff2f..2d3d22d 100644
--- a/src/client/components/SocialShare.ts
+++ b/src/client/components/SocialShare.ts
@@ -66,11 +66,18 @@ export const SocialShare = defineComponent({
 
   // eslint-disable-next-line max-lines-per-function
   setup(props) {
-    const networks = [...new Set(props.networks)]
-    const networkList = Object.keys(props.networksData)
-      .map(name => ({ name, ...props.networksData[name] }))
-      .filter(network => networks.includes(network.name))
-      .sort((prev, next) => networks.indexOf(prev.name) - networks.indexOf(next.name))
+    const networks = computed(() => [...new Set(props.networks)])
+
+    const networkList = computed(() =>
+      Object.keys(props.networksData)
+        .map(name => ({ name, ...props.networksData[name] }))
+        .filter(network => networks.value.includes(network.name))
+        .sort(
+          (prev, next) =>
+            networks.value.indexOf(prev.name) - networks.value.indexOf(next.name),
+        ),
+    )
+
     const frontmatter = usePageFrontmatter<SocialShareFrontmatter>()
     const timer = ref<MayBe<number>>(null)
     const popup = reactive({
@@ -114,7 +121,7 @@ export const SocialShare = defineComponent({
 
     // Computed
     const visible = computed(
-      () => Boolean(networks.length) && !frontmatter.value.noSocialShare,
+      () => Boolean(networks.value.length) && !frontmatter.value.noSocialShare,
     )
     const url = computed(() => frontmatter.value.$shareUrl
       ?? frontmatter.value.shareUrl
@@ -279,7 +286,7 @@ export const SocialShare = defineComponent({
 
     return () => {
       return visible.value
-        ? h('div', { class: 'social-share' }, [renderNetworkList(networkList)])
+        ? h('div', { class: 'social-share' }, [renderNetworkList(networkList.value)])
         : null
     }
   },