major bug fixed + error handling

components/Modal/Link/AddOrEditLink.tsx

@@ -24,7 +24,7 @@ type Props =
       activeLink: LinkIncludingShortenedCollectionAndTags;
     };
 
-export default function EditLink({
+export default function AddOrEditLink({
   toggleLinkModal,
   method,
   activeLink,
@@ -70,8 +70,7 @@ export default function EditLink({
     }
   }, []);
 
-  const shortendURL =
-    method === "UPDATE" ? new URL(link.url).host.toLowerCase() : undefined;
+  // const shortendURL = method === "UPDATE" ? new URL(link.url).host.toLowerCase() : undefined;
 
   const setTags = (e: any) => {
     const tagNames = e.map((e: any) => {

components/Modal/Link/LinkDetails.tsx

@@ -19,6 +19,7 @@ import {
   faFileImage,
   faFilePdf,
 } from "@fortawesome/free-regular-svg-icons";
+import isValidUrl from "@/lib/client/isValidUrl";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -56,7 +57,7 @@ export default function LinkDetails({ link }: Props) {
 
   const colorThief = new ColorThief();
 
-  const url = new URL(link.url);
+  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
 
   const rgbToHex = (r: number, g: number, b: number): string =>
     "#" +
@@ -123,7 +124,7 @@ export default function LinkDetails({ link }: Props) {
       <div
         className={`relative flex gap-5 items-start ${!imageError && "-mt-24"}`}
       >
-        {!imageError && (
+        {!imageError && url && (
           <Image
             src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
             width={42}
@@ -160,7 +161,7 @@ export default function LinkDetails({ link }: Props) {
             rel="noreferrer"
             className="text-sm text-gray-500 break-all hover:underline cursor-pointer w-fit"
           >
-            {url.host}
+            {url ? url.host : link.url}
           </Link>
         </div>
       </div>

components/Modal/Link/index.tsx

@@ -1,6 +1,6 @@
 import { Tab } from "@headlessui/react";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import EditLink from "./EditLink";
+import AddOrEditLink from "./AddOrEditLink";
 import LinkDetails from "./LinkDetails";
 
 type Props =
@@ -72,13 +72,16 @@ export default function LinkModal({
 
           <Tab.Panel>
             {activeLink && method === "UPDATE" ? (
-              <EditLink
+              <AddOrEditLink
                 toggleLinkModal={toggleLinkModal}
                 method="UPDATE"
                 activeLink={activeLink}
               />
             ) : (
-              <EditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
+              <AddOrEditLink
+                toggleLinkModal={toggleLinkModal}
+                method="CREATE"
+              />
             )}
           </Tab.Panel>
         </Tab.Panels>