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

lib/api/controllers/links/postLink.ts

@@ -10,11 +10,19 @@ export default async function postLink(
   link: LinkIncludingShortenedCollectionAndTags,
   userId: number
 ) {
+  try {
+    new URL(link.url);
+  } catch (error) {
+    return {
+      response:
+        "Please enter a valid Address for the Link. (It should start with http/https)",
+      status: 400,
+    };
+  }
+
   link.collection.name = link.collection.name.trim();
 
-  if (!link.name) {
-    return { response: "Please enter a valid name for the link.", status: 400 };
-  } else if (!link.collection.name) {
+  if (!link.collection.name) {
     link.collection.name = "Unnamed Collection";
   }
 
@@ -45,8 +53,8 @@ export default async function postLink(
 
   const newLink: Link = await prisma.link.create({
     data: {
-      name: link.name,
       url: link.url,
+      name: link.name,
       description,
       collection: {
         connectOrCreate: {
@@ -66,12 +74,12 @@ export default async function postLink(
         connectOrCreate: link.tags.map((tag) => ({
           where: {
             name_ownerId: {
-              name: tag.name,
+              name: tag.name.trim(),
               ownerId: link.collection.ownerId,
             },
           },
           create: {
-            name: tag.name,
+            name: tag.name.trim(),
             owner: {
               connect: {
                 id: link.collection.ownerId,

lib/api/getTitle.ts

@@ -5,7 +5,7 @@ export default async function getTitle(url: string) {
 
     // regular expression to find the <title> tag
     let match = text.match(/<title.*>([^<]*)<\/title>/);
-    if (match) return match[1] + " [AUTO GENERATED]";
+    if (match) return match[1];
     else return "";
   } catch (err) {
     console.log(err);