feat: disable button on submit

src/components/LockedContent.tsx

@@ -59,8 +59,8 @@ const LocationButton = ({ imageUrl = "#" }: { imageUrl?: string }) => {
           <div className='flex flex-col justify-center items-center image-wrapper'>
             <img src={imageUrl} className='blur-lg h-[450px]' />
 
-            <div className='flex flex-col justify-center gap-2 overlay'>
-              <Button size={"lg"} onClick={() => setContentVisible(true)}>
+            <div className='flex flex-col justify-center gap-4 overlay'>
+              <Button size='lg' className='text-md' onClick={() => setContentVisible(true)}>
                 <LockOpen1Icon className='mr-2 h-4 w-4' />
                 İçeriğin Kilidi Açıldı
               </Button>
@@ -73,8 +73,8 @@ const LocationButton = ({ imageUrl = "#" }: { imageUrl?: string }) => {
         ) : (
           <div className='flex flex-col justify-center items-center image-wrapper'>
             <img src={imageUrl} className='blur-lg h-[450px]' />
-            <div className='flex flex-col justify-center gap-2 overlay'>
-              <Button size='lg'>
+            <div className='flex flex-col justify-center gap-4 overlay'>
+              <Button size='lg' className='text-md'>
                 <LockClosedIcon className='mr-2 h-4 w-4' /> İçerik Kilitli
               </Button>
               <Card className='p-2'>
@@ -87,8 +87,8 @@ const LocationButton = ({ imageUrl = "#" }: { imageUrl?: string }) => {
                     </CardContent>
 
                     <Button
-                      size={"sm"}
-                      className='bg-green-700 hover:bg-green-600'
+                      size='sm'
+                      className='bg-green-700 hover:bg-green-600 text-md'
                       onClick={() => startWatchingLocation()}
                     >
                       Konum İzni Ver

src/pages/[id].astro

@@ -9,20 +9,21 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-
 import { CalendarIcon } from '@radix-ui/react-icons';
 
-import '../styles/locked-page.css';
 import LockedContent from '@/components/LockedContent';
 import { Separator } from '@/components/ui/separator';
 
+import '../styles/locked-page.css';
+import type { ContentTable } from '@/lib/db';
+
+type Content = Omit<ContentTable, 'id' | 'url'>;
+
 const { id } = Astro.params;
 
 const res = await fetch(`http://localhost:4321/api/content?id=${id}`);
 
-const data = await res.json();
-
-console.log(data);
+const data: Content | null = res.status === 200 ? await res.json() : null;
 ---
 
 <Layout>
@@ -47,7 +48,7 @@ console.log(data);
         <CardTitle>Abdurrahman</CardTitle>
       </CardHeader>
       <CardContent>
-        <p>{data.description}</p>
+        <p>{data?.description}</p>
       </CardContent>
       <CardFooter className="gap-2">
         <CalendarIcon />
@@ -55,16 +56,16 @@ console.log(data);
       </CardFooter>
     </Card>
 
-    <LockedContent imageUrl={data.blob_url} client:load />
+    <LockedContent imageUrl={data?.blob_url} client:load />
 
     <div
       id="map"
       class="w-full h-[450px] rounded"
-      data-target-location={data.loc}
+      data-target-location={data?.loc}
     >
     </div>
 
-    <Button className="w-full">Paylaş</Button>
+    <Button className="w-full text-lg" size="lg">Paylaş</Button>
     <div class="flex justify-center">
       <p class="text-muted-foreground">
         Fotoğrafın kilidi şu ana dek <b>2</b> kez açıldı

src/pages/index.astro

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import '../styles/locked-page.css';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
+import { ReloadIcon } from '@radix-ui/react-icons';
 ---
 
 <Layout>
@@ -95,7 +96,16 @@ import { Textarea } from '@/components/ui/textarea';
         </div>
       </div>
 
-      <Button className="w-full" type="submit" id="submit-button">
+      <Button
+        className="w-full text-lg"
+        type="submit"
+        id="submit-button"
+        size="lg"
+      >
+        <ReloadIcon
+          className="mr-2 h-4 w-4 animate-spin hidden"
+          id="submit-button-reload"
+        />
         Bağlantıyı Oluştur
       </Button>
     </form>
@@ -104,21 +114,28 @@ import { Textarea } from '@/components/ui/textarea';
 </Layout>
 
 <script>
-  import type { PutBlobResult } from '@vercel/blob';
-
   const handleSubmit = async (e: SubmitEvent) => {
     e.preventDefault();
 
+    const submitButton = document.getElementById(
+      'submit-button'
+    ) as HTMLButtonElement;
+    const reloadIcon = document.getElementById(
+      'submit-button-reload'
+    ) as HTMLElement;
+
+    submitButton.disabled = true;
+    reloadIcon.classList.toggle('hidden');
+
     const formData = new FormData(e.target as HTMLFormElement);
 
-    const response = await fetch(`/api/content`, {
+    await fetch(`/api/content`, {
       method: 'POST',
       body: formData,
     });
 
-    const newBlob = (await response.json()) as PutBlobResult;
-
-    console.log(newBlob);
+    reloadIcon.classList.toggle('hidden');
+    submitButton.disabled = false;
   };
 
   document.getElementById('sample-form')!.onsubmit = handleSubmit;