feat: improve listing short urls

masl · Apr 12, 2024 · 8f8f6cb · 8f8f6cb
1 parent d609f03
commit 8f8f6cb
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 18 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -5,12 +5,10 @@ import Header from "@/components/Header";
 export default function App() {
   return (
     <>
-      <div className="hidden space-y-6 p-10 pb-16 md:block">
+      <div className="space-y-6 p-10 pb-16">
         <Header />
         <Separator className="my-6" />
-        <div className="flex justify-center">
-          <ShortenForm />
-        </div>
+        <ShortenForm />
       </div>
     </>
   )

diff --git a/web/src/components/ShortenForm.tsx b/web/src/components/ShortenForm.tsx
@@ -1,11 +1,17 @@
 import { Button } from "@/components/ui/button"
+import { CopyIcon } from "lucide-react"
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { useForm } from "react-hook-form"
 import { useState } from "react"
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 
+type TShortUrl = {
+  longUrl: string
+  shortUrl: string
+}
+
 export default function ShortenForm() {
   const formSchema = z.object({
     longUrl: z.string().url({
@@ -20,7 +26,25 @@ export default function ShortenForm() {
     },
   })
 
-  const [shortUrls, setShortUrls] = useState<string[]>([])
+  const [shortUrls, setShortUrls] = useState<TShortUrl[]>([])
+
+  async function copyUrl(event: React.MouseEvent<HTMLButtonElement>) {
+    const index = Number(event.currentTarget.dataset.index)
+    const short = shortUrls[index]
+
+    if (isNaN(index) || !short) {
+      console.error("Could not get the specified element")
+      return
+    }
+
+    try {
+      const url = new URL(short.shortUrl, location.origin)
+      await navigator.clipboard.writeText(url.toString())
+    } catch (err: unknown) {
+      console.error("Could not copy the URL to the clipboard")
+      return
+    }
+  }
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     const data = {
@@ -36,16 +60,15 @@ export default function ShortenForm() {
     })
 
 
-    const responseBody = await response.json()
-    const shortUrl = responseBody.shortUrl
-    console.log(shortUrl)
-    setShortUrls([...shortUrls, shortUrl])
+    const responseBody: TShortUrl = await response.json()
+    console.log(responseBody)
+    setShortUrls([...shortUrls, responseBody])
   }
 
   return (
-    <>
+    <div className="grid grid-cols-1 gap-4 justify-items-center">
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 flex gap-4">
           <FormField
             control={form.control}
             name="longUrl"
@@ -63,13 +86,19 @@ export default function ShortenForm() {
           <Button type="submit">Shorten</Button>
         </form>
       </Form>
-      <ul>
-        {shortUrls.map((url, index) =>
-          <li key={index}>
-            {url}
-          </li>
+      <div className="grid gap-4">
+        {shortUrls.map((short, index) =>
+          <div className="flex items-center justify-between p-4 bg-gray-100 rounded-lg" key={index}>
+            <div>
+              <p className="text-sm">{short.shortUrl}</p>
+              <p className="text-xs text-gray-500 tracking-tighter">{short.longUrl}</p>
+            </div>
+            <Button variant="ghost" size="icon" onClick={copyUrl} data-index={index}>
+              <CopyIcon className="h-4 w-4" />
+            </Button>
+          </div>
         )}
-      </ul>
-    </>
+      </div>
+    </div>
   )
 }