From 9a825f449d1fa2eec892c9cc6d6ac31ea0708c79 Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Wed, 28 Feb 2024 23:03:02 +0800
Subject: [PATCH] fix(ui): fix missing discussion link when preview is
 unavailable (#88)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(ui): fix missing discussion link when preview is unavailable

* fix: hide invalid link preview in Editor

* Update apps/ui/src/components/Ui/LinkPreview.vue

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>

* Update apps/ui/src/components/Ui/LinkPreview.vue

Co-authored-by: Less <bonustrack@users.noreply.github.com>

* chore: add more typing

* fix: prevent default link flashing while fetching preview

---------

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>
Co-authored-by: Less <bonustrack@users.noreply.github.com>
---
 apps/ui/src/components/Ui/LinkPreview.vue | 67 +++++++++++++++++------
 apps/ui/src/views/Proposal/Overview.vue   |  2 +-
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/apps/ui/src/components/Ui/LinkPreview.vue b/apps/ui/src/components/Ui/LinkPreview.vue
index 163868454..83e9cf413 100644
--- a/apps/ui/src/components/Ui/LinkPreview.vue
+++ b/apps/ui/src/components/Ui/LinkPreview.vue
@@ -1,13 +1,28 @@
-<script setup>
-const props = defineProps({ url: String });
-const preview = ref(false);
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ url: string; showDefault?: boolean }>(), {
+  showDefault: false
+});
+
+type Preview = {
+  meta: {
+    title: string;
+    description: string;
+  };
+  links: {
+    icon: { href: string }[];
+  };
+};
+
+const preview = ref<Preview | null>(null);
+const previewLoading = ref<boolean>(true);
 const IFRAMELY_API_KEY = 'd155718c86be7d5305ccb6';
 
 onMounted(async () => await update(props.url));
 
-async function update(val) {
+async function update(val: string) {
   try {
-    preview.value = false;
+    preview.value = null;
+    previewLoading.value = true;
     new URL(val);
     const url = `https://cdn.iframe.ly/api/iframely?url=${encodeURI(
       val
@@ -15,7 +30,8 @@ async function update(val) {
     const result = await fetch(url);
     preview.value = await result.json();
   } catch (e) {
-    // console.log(e);
+  } finally {
+    previewLoading.value = false;
   }
 }
 
@@ -27,19 +43,34 @@ debouncedWatch(
 </script>
 
 <template>
-  <div v-if="preview?.meta?.title" class="!flex items-center border rounded-lg">
-    <div v-if="preview?.links?.icon?.[0]?.href" class="px-4 pr-0">
-      <div class="w-[32px]">
-        <img :src="preview.links.icon[0].href" width="32" height="32" class="bg-white rounded" />
+  <div
+    v-if="preview?.meta || (showDefault && !previewLoading)"
+    class="!flex items-center border rounded-lg"
+  >
+    <template v-if="preview?.meta?.title">
+      <div v-if="preview?.links?.icon?.[0]?.href" class="px-4 pr-0">
+        <div class="w-[32px]">
+          <img
+            :src="preview.links.icon[0].href"
+            width="32"
+            height="32"
+            class="bg-white rounded"
+            :alt="preview.meta.title"
+          />
+        </div>
       </div>
-    </div>
-    <div class="px-4 py-3 overflow-hidden">
-      <div class="text-skin-link truncate" v-text="preview.meta.title" />
-      <div
-        v-if="preview.meta.description"
-        class="text-[17px] text-skin-text truncate"
-        v-text="preview.meta.description"
-      />
+      <div class="px-4 py-3 overflow-hidden">
+        <div class="text-skin-link truncate" v-text="preview.meta.title" />
+        <div
+          v-if="preview.meta.description"
+          class="text-[17px] text-skin-text truncate"
+          v-text="preview.meta.description"
+        />
+      </div>
+    </template>
+    <div v-else-if="showDefault" class="px-4 py-3 flex gap-2 items-center w-full">
+      <IH-link class="shrink-0" />
+      <div class="truncate">{{ props.url }}</div>
     </div>
   </div>
 </template>
diff --git a/apps/ui/src/views/Proposal/Overview.vue b/apps/ui/src/views/Proposal/Overview.vue
index 98f153cbc..118952a91 100644
--- a/apps/ui/src/views/Proposal/Overview.vue
+++ b/apps/ui/src/views/Proposal/Overview.vue
@@ -185,7 +185,7 @@ async function handleCancelClick() {
           <span>Discussion</span>
         </h4>
         <a :href="discussion" target="_blank" class="block mb-5">
-          <UiLinkPreview :url="discussion" />
+          <UiLinkPreview :url="discussion" :show-default="true" />
         </a>
       </div>
       <div v-if="proposal.execution && proposal.execution.length > 0">