From 26ac3824cc2c582cb6ff4d245949fa07c56b2e4e Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Fri, 19 Apr 2024 19:32:38 +1000
Subject: [PATCH] better error handling

---
 .../Modals/CardModals/LinkPreview.tsx         | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Modals/CardModals/LinkPreview.tsx b/client/src/components/Modals/CardModals/LinkPreview.tsx
index 14803cc..f644022 100644
--- a/client/src/components/Modals/CardModals/LinkPreview.tsx
+++ b/client/src/components/Modals/CardModals/LinkPreview.tsx
@@ -4,20 +4,32 @@ import { useState, useEffect } from 'react';
 
 const LinkModal = ({ url }: { url: string }) => {
   const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchWithProxy = (url: string) => {
+    const proxyUrl = 'https://api.allorigins.win/raw?url=';
+    return getLinkPreview(proxyUrl + url)
+      .then((preview) => setLinkPreview(preview as LinkPreview))
+      .catch((error) => {
+        console.error("Error fetching URL with proxy:", error);
+        setError('Unable to fetch URL with proxy.');
+      });
+  };
 
   useEffect(() => {
-    const proxyUrl = 'https://api.allorigins.win/raw?url=';
     getLinkPreview(url)
       .then((preview) => setLinkPreview(preview as LinkPreview))
       .catch(error => {
         console.error("Error fetching original URL, trying with proxy:", error);
-        return getLinkPreview(proxyUrl + url);
-      })
-      .then((preview) => setLinkPreview(preview as LinkPreview))
-      .catch((error) => console.error("Error fetching URL with proxy:", error));
-      
+        setError('Error fetching original URL. Trying with proxy...');
+        return fetchWithProxy(url);
+      });
   }, [url]);
 
+  if (error) {
+    return <div>Error: {error}</div>; // Display a user-friendly error message
+  }
+
   if (!linkPreview) {
     return <a className='hover:underline text-xs text-neutral-500' href={url}>{url}</a>; // or some loading state
   }