Merge pull request #74 from linkwarden/dev

Dev

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";
@@ -31,8 +35,18 @@ export default function LinkCard({ link, count, className }: Props) {
 
   const { collections } = useCollectionStore();
 
+  const { links } = useLinkStore();
+
   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(
@@ -46,7 +60,7 @@ export default function LinkCard({ link, count, className }: Props) {
         (e) => e.id === link.collection.id
       ) as CollectionIncludingMembersAndLinkCount
     );
-  }, [collections]);
+  }, [collections, links]);
 
   const { removeLink, updateLink } = useLinkStore();
 
@@ -144,7 +158,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 +173,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,41 +118,29 @@ 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">
+      {method === "CREATE" ? (
         <div>
-          <p className="text-sm text-sky-700 mb-2">
+          <p className="text-sm text-sky-700 mb-2 font-bold">
-            Name
+            Address (URL)
             <RequiredBadge />
           </p>
           <input
-            value={link.name}
+            value={link.url}
-            onChange={(e) => setLink({ ...link, name: e.target.value })}
+            onChange={(e) => setLink({ ...link, url: e.target.value })}
             type="text"
-            placeholder="e.g. Example Link"
+            placeholder="e.g. http://example.com/"
             className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
-
+      ) : null}
-        {method === "CREATE" ? (
+      <hr />
-          <div>
+      <div className="grid sm:grid-cols-2 gap-3">
-            <p className="text-sm text-sky-700 mb-2">
-              URL
-              <RequiredBadge />
-            </p>
-            <input
-              value={link.url}
-              onChange={(e) => setLink({ ...link, url: e.target.value })}
-              type="text"
-              placeholder="e.g. http://example.com/"
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-            />
-          </div>
-        ) : null}
-
         <div>
           <p className="text-sm text-sky-700 mb-2">Collection</p>
           <CollectionSelection
@@ -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

components/Modal/Link/LinkDetails.tsx

@@ -150,7 +150,7 @@ export default function LinkDetails({ link }: Props) {
             }}
           />
         )}
-        <div className="flex flex-col gap- justify-end drop-shadow">
+        <div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
           <p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
             {link.name}
           </p>

lib/api/archive.ts

@@ -12,7 +12,7 @@ export default async function archive(
   const page = await context.newPage();
 
   try {
-    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 300000 });
+    await page.goto(url, { waitUntil: "domcontentloaded" });
 
     await autoScroll(page);
 
@@ -53,7 +53,13 @@ export default async function archive(
 
 const autoScroll = async (page: Page) => {
   await page.evaluate(async () => {
-    await new Promise<void>((resolve, reject) => {
+    const timeoutPromise = new Promise<void>((_, reject) => {
+      setTimeout(() => {
+        reject(new Error("Auto scroll took too long (more than 20 seconds)."));
+      }, 20000);
+    });
+
+    const scrollingPromise = new Promise<void>((resolve) => {
       let totalHeight = 0;
       let distance = 100;
       let scrollDown = setInterval(() => {
@@ -68,6 +74,6 @@ const autoScroll = async (page: Page) => {
       }, 100);
     });
 
-    await new Promise((r) => setTimeout(r, 2000));
+    await Promise.race([scrollingPromise, timeoutPromise]);
   });
 };

lib/api/controllers/collections/postCollection.ts

@@ -37,7 +37,7 @@ export default async function postCollection(
           id: userId,
         },
       },
-      name: collection.name,
+      name: collection.name.trim(),
       description: collection.description,
       color: collection.color,
       members: {

lib/api/controllers/collections/updateCollection.ts

@@ -37,7 +37,7 @@ export default async function updateCollection(
       },
 
       data: {
-        name: collection.name,
+        name: collection.name.trim(),
         description: collection.description,
         color: collection.color,
         isPublic: collection.isPublic,

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) {
+  if (!link.collection.name) {
-    return { response: "Please enter a valid name for the link.", status: 400 };
-  } else 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: {
@@ -57,7 +65,7 @@ export default async function postLink(
             },
           },
           create: {
-            name: link.collection.name,
+            name: link.collection.name.trim(),
             ownerId: userId,
           },
         },
@@ -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);

pages/collections/[id].tsx

@@ -236,7 +236,7 @@ export default function Index() {
           </div>
         </div>
         {links[0] ? (
-          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+          <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
             {links
               .filter((e) => e.collectionId === Number(router.query.id))
               .map((e, i) => {

pages/tags/[id].tsx

@@ -66,7 +66,7 @@ export default function Index() {
             ) : null}
           </div>
         </div>
-        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+        <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
           {links
             .filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
             .map((e, i) => {