use new API

packages/app/src/Element/LinkPreview.tsx

@@ -1,45 +1,51 @@
 import { useEffect, useState } from "react";
 
+import { ApiHost } from "Const";
+import Spinner from "Icons/Spinner";
+import { ProxyImg } from "Element/ProxyImg";
+
+interface LinkPreviewData {
+  title?: string;
+  description?: string;
+  image?: string;
+}
+
 async function fetchUrlPreviewInfo(url: string) {
-  // Hardcoded the dufflepud url here only for initial testing by Snort devs,
+  const res = await fetch(`${ApiHost}/api/v1/preview?url=${encodeURIComponent(url)}`);
-  // will be more ideal for Snort to deploy its own instance of Dufflepud
+  if (res.ok) {
-  // and link to it in an .env to not bombard dufflepud.onrender.com , which is
+    return (await res.json()) as LinkPreviewData;
-  // Coracle's instance. Repo: https://github.com/staab/dufflepud
-  const res = await fetch("http://dufflepud.onrender.com/link/preview", {
-    method: "POST",
-    body: JSON.stringify({ url }),
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
-  const json = await res.json();
-  if (json.title || json.image) {
-    const preview = json;
-    return preview;
-  } else {
-    return null;
   }
 }
 
 const LinkPreview = ({ url }: { url: string }) => {
-  const [previewImage, setImage] = useState<string>();
+  const [preview, setPreview] = useState<LinkPreviewData>();
-  const [previewtitle, setTitle] = useState<string>();
+
   useEffect(() => {
-    fetchUrlPreviewInfo(url)
+    (async () => {
-      .then(data => {
+      const data = await fetchUrlPreviewInfo(url);
       if (data) {
-          setImage(data.image || undefined);
+        setPreview(data);
-          setTitle(data.title || undefined);
       }
-      })
+    })().catch(console.error);
-      .catch(console.error);
   }, [url]);
+
   return (
     <div className="link-preview-container">
-      <a href={url}>
+      {preview && (
-        <img src={previewImage} className="link-preview-image"></img>
+        <a href={url} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
-        <p className="link-preview-title">{previewtitle}</p>
+          {preview?.image && <ProxyImg src={preview?.image} className="link-preview-image" />}
+          <p className="link-preview-title">
+            {preview?.title}
+            {preview?.description && (
+              <>
+                <br />
+                <small>{preview?.description}</small>
+              </>
+            )}
+          </p>
         </a>
+      )}
+      {!preview && <Spinner className="f-center" />}
     </div>
   );
 };

packages/app/src/Element/Note.css

@@ -233,14 +233,22 @@
 }
 
 .link-preview-container {
-  border: 1px solid #282828;
+  border: 1px solid var(--gray);
   border-radius: 10px;
+  text-align: center;
+}
+
+.link-preview-container:hover {
+  cursor: pointer;
 }
 
 .link-preview-title {
-  padding-left: 10px;
+  padding: 0 10px 10px 10px;
-  padding-right: 10px;
+}
-  padding-bottom: 10px;
+
+.link-preview-title > small {
+  color: var(--font-secondary-color);
+  font-size: small;
 }
 
 .link-preview-image {