From 1086e2245186fb8362100dff3a7b0ce05c48e4c7 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Mon, 24 Jul 2023 10:06:24 -0400
Subject: [PATCH] bug fix + ui improvements

---
 components/Modal/Link/AddOrEditLink.tsx | 32 ++++++++++++-------------
 components/Modal/Link/LinkDetails.tsx   |  2 +-
 lib/api/archive.ts                      | 14 +++++++----
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index 205513c8..e072abdc 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -124,23 +124,23 @@ export default function AddOrEditLink({
         </p>
       ) : null}
 
+      {method === "CREATE" ? (
+        <div>
+          <p className="text-sm text-sky-700 mb-2 font-bold">
+            Address (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}
+      <hr />
       <div className="grid sm:grid-cols-2 gap-3">
-        {method === "CREATE" ? (
-          <div className="sm:col-span-2">
-            <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
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 19904bda..0151c981 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/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>
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index 546c76e2..d03b1e96 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -7,12 +7,12 @@ export default async function archive(
   collectionId: number,
   linkId: number
 ) {
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({ headless: false });
   const context = await browser.newContext(devices["Desktop Chrome"]);
   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 10 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]);
   });
 };