improvements + better error handling

components/LinkCard.tsx

@@ -2,7 +2,11 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { faFolder, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import {
+  faFolder,
+  faEllipsis,
+  faLink,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import Image from "next/image";
@@ -33,6 +37,14 @@ export default function LinkCard({ link, count, className }: Props) {
 
   const { account } = useAccountStore();
 
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url).host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(
       collections.find(
@@ -144,7 +156,7 @@ export default function LinkCard({ link, count, className }: Props) {
             <div className="flex items-baseline gap-1">
               <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
               <p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
-                {link.name}
+                {link.name || link.description}
               </p>
             </div>
             <div className="flex gap-3 items-center my-3">
@@ -159,6 +171,10 @@ export default function LinkCard({ link, count, className }: Props) {
                 </p>
               </div>
             </div>
+            <div className="flex items-center gap-1 w-full pr-20 text-gray-500">
+              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+              <p className="truncate w-full">{shortendURL}</p>
+            </div>
             <div className="flex items-center gap-1 text-gray-500">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p>{formattedDate}</p>

components/Modal/Link/AddOrEditLink.tsx

@@ -11,6 +11,7 @@ import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import SubmitButton from "../../SubmitButton";
 import { toast } from "react-hot-toast";
+import Link from "next/link";
 
 type Props =
   | {
@@ -70,8 +71,6 @@ export default function AddOrEditLink({
     }
   }, []);
 
-  // const shortendURL = method === "UPDATE" ? new URL(link.url).host.toLowerCase() : undefined;
-
   const setTags = (e: any) => {
     const tagNames = e.map((e: any) => {
       return { name: e.label };
@@ -119,27 +118,15 @@ export default function AddOrEditLink({
           className="text-gray-500 my-2 text-center truncate w-full"
           title={link.url}
         >
-          Edit <span className="underline">{link.url}</span>
+          <Link href={link.url} target="_blank" className=" font-bold">
+            {link.url}
+          </Link>
         </p>
       ) : null}
 
       <div className="grid sm:grid-cols-2 gap-3">
-        <div>
-          <p className="text-sm text-sky-700 mb-2">
-            Name
-            <RequiredBadge />
-          </p>
-          <input
-            value={link.name}
-            onChange={(e) => setLink({ ...link, name: e.target.value })}
-            type="text"
-            placeholder="e.g. Example Link"
-            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-          />
-        </div>
-
         {method === "CREATE" ? (
-          <div>
+          <div className="sm:col-span-2">
             <p className="text-sm text-sky-700 mb-2">
               URL
               <RequiredBadge />
@@ -173,7 +160,7 @@ export default function AddOrEditLink({
           />
         </div>
 
-        <div className={method === "UPDATE" ? "sm:col-span-2" : ""}>
+        <div>
           <p className="text-sm text-sky-700 mb-2">Tags</p>
           <TagSelection
             onChange={setTags}
@@ -182,6 +169,18 @@ export default function AddOrEditLink({
             })}
           />
         </div>
+
+        <div className="sm:col-span-2">
+          <p className="text-sm text-sky-700 mb-2">Name</p>
+          <input
+            value={link.name}
+            onChange={(e) => setLink({ ...link, name: e.target.value })}
+            type="text"
+            placeholder="e.g. Example Link"
+            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+          />
+        </div>
+
         <div className="sm:col-span-2">
           <p className="text-sm text-sky-700 mb-2">Description</p>
           <textarea