make short link optional, useDebouncedCallback

decagonhq · May 6, 2024 · 03e41da · 03e41da
1 parent d3441f2
commit 03e41da
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
@@ -18,6 +18,8 @@ const config: Pick<Config, "presets"> = {
             ...sharedConfig?.theme?.extend?.animation,
             // Infinite scroll animation
             "infinite-scroll": "infinite-scroll 22s linear infinite",
+            // Text appear animation
+            "text-appear": "text-appear 0.15s ease",
           },
           keyframes: {
             ...sharedConfig?.theme?.extend?.keyframes,
@@ -26,6 +28,17 @@ const config: Pick<Config, "presets"> = {
               "0%": { transform: "translateX(0)" },
               "100%": { transform: "translateX(-150%)" },
             },
+            // Text appear animation
+            "text-appear": {
+              "0%": {
+                opacity: "0",
+                transform: "rotateX(45deg) scale(0.95)",
+              },
+              "100%": {
+                opacity: "1",
+                transform: "rotateX(0deg) scale(1)",
+              },
+            },
           },
         },
       },

diff --git a/apps/web/ui/modals/add-edit-link-modal/index.tsx b/apps/web/ui/modals/add-edit-link-modal/index.tsx
@@ -24,7 +24,6 @@ import {
   cn,
   deepEqual,
   getApexDomain,
-  getDomainWithoutWWW,
   getUrlWithoutUTMParams,
   isValidUrl,
   linkConstructor,
@@ -53,7 +52,7 @@ import {
 } from "react";
 import { toast } from "sonner";
 import { mutate } from "swr";
-import { useDebounce } from "use-debounce";
+import { useDebounce, useDebouncedCallback } from "use-debounce";
 import AndroidSection from "./android-section";
 import CloakingSection from "./cloaking-section";
 import CommentsSection from "./comments-section";
@@ -117,8 +116,9 @@ function AddEditLinkModal({
 
   const { domain, key, url, password, proxy } = data;
 
-  const generateRandomKey = useCallback(async () => {
+  const generateRandomKey = useDebouncedCallback(async () => {
     if (generatingRandomKey) return;
+
     if (domain && workspaceId) {
       setKeyError(null);
       setGeneratingRandomKey(true);
@@ -129,26 +129,12 @@ function AddEditLinkModal({
       setData((prev) => ({ ...prev, key }));
       setGeneratingRandomKey(false);
     }
-  }, [domain, workspaceId]);
+  }, 500);
 
   useEffect(() => {
-    // when someone pastes a URL
-    if (showAddEditLinkModal && url.length > 0) {
-      // if it's a new link and there are matching default domains, set it as the domain
-      if (!props && activeDefaultDomains) {
-        const urlDomain = getDomainWithoutWWW(url) || "";
-        const defaultDomain = activeDefaultDomains.find(
-          ({ allowedHostnames }) => allowedHostnames?.includes(urlDomain),
-        );
-        if (defaultDomain) {
-          setData((prev) => ({ ...prev, domain: defaultDomain.slug }));
-        }
-      }
-
-      // if there's no key, generate a random key
-      if (!key) {
-        generateRandomKey();
-      }
+    // if there's no key, generate a random key
+    if (showAddEditLinkModal && url.length > 0 && !key) {
+      generateRandomKey();
     }
   }, [showAddEditLinkModal, url]);
 
@@ -408,6 +394,7 @@ function AddEditLinkModal({
             onSubmit={async (e) => {
               e.preventDefault();
               setSaving(true);
+              generateRandomKey.cancel();
               // @ts-ignore – exclude extra attributes from `data` object before sending to API
               const { user, tags, tagId, ...rest } = data;
               const bodyData = {
@@ -487,11 +474,15 @@ function AddEditLinkModal({
                   >
                     Destination URL
                   </label>
-                  {urlError && (
+                  {urlError ? (
                     <p className="text-sm text-red-600" id="key-error">
                       Invalid URL
                     </p>
-                  )}
+                  ) : url ? (
+                    <div className="animate-text-appear text-xs font-normal text-gray-500">
+                      press <strong>Enter</strong> ↵ to submit
+                    </div>
+                  ) : null}
                 </div>
                 <div className="relative mt-1 flex rounded-md shadow-sm">
                   <input
@@ -605,7 +596,6 @@ function AddEditLinkModal({
                     type="text"
                     name="key"
                     id={`key-${randomIdx}`}
-                    required
                     // allow letters, numbers, '-', '/' and emojis
                     pattern="[\p{L}\p{N}\p{Pd}\/\p{Emoji}]+"
                     onInvalid={(e) => {
@@ -629,7 +619,7 @@ function AddEditLinkModal({
                           props && lockKey,
                       },
                     )}
-                    placeholder="github"
+                    placeholder="(optional)"
                     value={punycode(key)}
                     onChange={(e) => {
                       setKeyError(null);