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

* 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 <[email protected]> * Update apps/ui/src/components/Ui/LinkPreview.vue Co-authored-by: Less <[email protected]> * chore: add more typing * fix: prevent default link flashing while fetching preview --------- Co-authored-by: Wiktor Tkaczyński <[email protected]> Co-authored-by: Less <[email protected]>
snapshot-labs · Feb 28, 2024 · 9a825f4 · 9a825f4
1 parent e1d1477
commit 9a825f4
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 19 deletions.
diff --git a/apps/ui/src/components/Ui/LinkPreview.vue b/apps/ui/src/components/Ui/LinkPreview.vue
@@ -1,21 +1,37 @@
-<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
     )}&api_key=${IFRAMELY_API_KEY}`;
     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
@@ -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">