Support arguments and take in urlKey for Dub.co link shortener (rayca…

…st#10644) Co-authored-by: Per Nielsen Tikær <per@raycast.com> Co-authored-by: raycastbot <bot@raycast.com>
fuksman · Feb 8, 2024 · 109f3f6 · 109f3f6
1 parent 90a545d
commit 109f3f6
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 42 deletions.
diff --git a/extensions/dub-link-shortener/CHANGELOG.md b/extensions/dub-link-shortener/CHANGELOG.md
@@ -1,12 +1,17 @@
 # Dub Link Shortener Changelog
 
-## [Enhancement] Remove long URL in the list view for clarity (2023-12-21)
+
+## [Enhancement: Remove long URL in the list view for clarity] - 2024-02-07
+- Take in urlKey that sets a custom short URL
+- Support arguments inline to the shorten link command
+
+## [Enhancement: Remove long URL in the list view for clarity] - 2023-12-21
 - Showing both the shortened & long URL was cluttering the list view, so removing the long URL for now
 
-## [Enhancement] Show the shortened and long URL in the list view (2023-12-14)
+## [Enhancement: Show the shortened and long URL in the list view] - 2023-12-14
 - Be consistent with the web app and show both the short and long URL for each item in the list view
 
-## [Enhancement] Better feedback and UX (2023-12-06)
+## [Enhancement: Better feedback and UX] - 2023-12-06
 - More specific language around copying to clipboard
 - Showing the shortened link as pop up text after successfully shortening
 

diff --git a/extensions/dub-link-shortener/package.json b/extensions/dub-link-shortener/package.json
@@ -19,7 +19,19 @@
       "title": "Shorten Link",
       "subtitle": "Shorten a link with dub.co",
       "description": "Shorten links with dub.co",
-      "mode": "view"
+      "mode": "view",
+      "arguments": [
+        {
+          "name": "url",
+          "placeholder": "URL",
+          "type": "text"
+        },
+        {
+          "name": "key",
+          "placeholder": "Key",
+          "type": "text"
+        }
+      ]
     },
     {
       "name": "search-links",

diff --git a/extensions/dub-link-shortener/src/shorten-link.tsx b/extensions/dub-link-shortener/src/shorten-link.tsx
@@ -1,50 +1,56 @@
-import { Action, ActionPanel, Clipboard, Form, Icon, showToast, Toast } from "@raycast/api";
+import { Action, ActionPanel, Clipboard, Form, Icon, LaunchProps, LaunchType, showToast, Toast } from "@raycast/api";
 import { useEffect, useState } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { useCreateShortLink } from "./utils/api";
 import { fetchLink } from "./utils/clipboard";
 
-type Values = {
-  url: string;
-};
-
 const queryClient = new QueryClient();
-export default function ShortenLinkWrapper() {
+export default function ShortenLinkWrapper(props: LaunchProps<{ arguments: { url: string; key?: string } }>) {
   return (
     <QueryClientProvider client={queryClient}>
-      <ShortenLink />
+      <ShortenLink arguments={props.arguments} launchType={LaunchType.UserInitiated} />
     </QueryClientProvider>
   );
 }
-function ShortenLink() {
-  const [originalLink, setOriginalLink] = useState<string>("");
+function ShortenLink(props: LaunchProps<{ arguments: { url?: string; key?: string } }>) {
+  const { url: argumentUrl, key: argumentKey } = props.arguments;
+  const [originalLink, setOriginalLink] = useState<string>(argumentUrl ?? "");
+  const [urlKey, setUrlKey] = useState<string | undefined>(argumentKey);
   const [lastShortenedUrl, setLastShortenedUrl] = useState<string>("");
   const { mutate: createShortLink, isLoading } = useCreateShortLink();
 
-  async function handleSubmit(values: Values) {
-    const url = values.url;
-    createShortLink(url, {
-      onSuccess: async (shortenedLinkData) => {
-        const { domain, key } = shortenedLinkData;
-        const shortenedUrl = `https://${domain}/${key}`;
-        await Clipboard.copy(shortenedUrl);
-        setLastShortenedUrl(shortenedUrl);
-        setOriginalLink("");
-        showToast({
-          title: "Shortened link and copied to clipboard",
-          message: "See logs for submitted values",
-        });
-      },
-      onError: () => {
-        setOriginalLink("");
-        setLastShortenedUrl("");
-        showToast({
-          title: "Failed to shorten link",
-          message: "See logs for submitted values",
-          style: Toast.Style.Failure,
-        });
+  async function handleSubmit() {
+    /**
+     * This uses controlled values for originalLink and urlKey because
+     * we want to be able to programmatically set the originalLink
+     * on extension load by checking the clipboard value
+     *
+     */
+    createShortLink(
+      { originalUrl: originalLink, urlKey },
+      {
+        onSuccess: async (shortenedLinkData) => {
+          const { domain, key } = shortenedLinkData;
+          const shortenedUrl = `https://${domain}/${key}`;
+          await Clipboard.copy(shortenedUrl);
+          setLastShortenedUrl(shortenedUrl);
+          setOriginalLink("");
+          showToast({
+            title: "Shortened link and copied to clipboard",
+            message: "See logs for submitted values",
+          });
+        },
+        onError: () => {
+          setOriginalLink("");
+          setLastShortenedUrl("");
+          showToast({
+            title: "Failed to shorten link",
+            message: "See logs for submitted values",
+            style: Toast.Style.Failure,
+          });
+        },
       },
-    });
+    );
   }
 
   // TODO move this into a useQuery call
@@ -53,11 +59,11 @@ function ShortenLink() {
       const selectedOrClipboardValue = await fetchLink();
       setOriginalLink(selectedOrClipboardValue);
     }
-    getSelectedOrClipboardValue();
+    if (argumentUrl == null) {
+      getSelectedOrClipboardValue();
+    }
   }, []);
 
-  console.log({ originalLink });
-
   return (
     <Form
       isLoading={isLoading}
@@ -75,6 +81,13 @@ function ShortenLink() {
         value={originalLink}
         onChange={(newValue) => setOriginalLink(newValue)}
       />
+      <Form.TextField
+        id="shortUrl"
+        title="URL Key"
+        placeholder="(Optional)"
+        value={urlKey}
+        onChange={(urlKey) => setUrlKey(urlKey)}
+      />
       {lastShortenedUrl !== "" && originalLink === "" && (
         <>
           <Form.Description text={`Shortened link (copied to clipboard):`} />

diff --git a/extensions/dub-link-shortener/src/utils/api.ts b/extensions/dub-link-shortener/src/utils/api.ts
@@ -11,8 +11,8 @@ function hasHttps(url: string) {
 
 export const useCreateShortLink = () => {
   return useMutation({
-    mutationFn: async (originalUrl: string) => {
-      const response = await createShortLink(originalUrl);
+    mutationFn: async ({ originalUrl, urlKey }: { originalUrl: string; urlKey?: string }) => {
+      const response = await createShortLink(originalUrl, urlKey);
       return response.data as DomainResponse;
     },
   });
@@ -39,7 +39,7 @@ export const useDeleteShortLink = () => {
   });
 };
 
-const createShortLink = async (originalURL: string) => {
+const createShortLink = async (originalURL: string, urlKey?: string) => {
   const urlToShorten = hasHttps(originalURL) ? originalURL : `https://${originalURL}`;
 
   return axios({
@@ -52,6 +52,7 @@ const createShortLink = async (originalURL: string) => {
     data: {
       domain: projectDomain,
       url: urlToShorten,
+      key: urlKey,
     },
   });
 };