refactor: cleanup skeleton, setup supabase properly

src/routes/+page.svelte

@@ -1,35 +1,56 @@
 <script lang="ts">
     import SpaceCard from "$lib/components/SpaceCard.svelte";
     import defaultImg from "$lib/assets/study_space.png";
-    import { createClient } from "@supabase/supabase-js";
-    import type { Database } from "$lib/database";
-    import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from "$env/static/public";
     import { invalidate } from "$app/navigation";
+    import type { Table } from "$lib";
 
-    const supabase = createClient<Database>(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY);
     const { data } = $props();
-    const { studySpaces } = $derived(data);
+    const { studySpaces, supabase } = $derived(data);
 
-    let title = $state("");
-    let fileInput = $state<HTMLInputElement | null>(null);
+    const blankStudySpace = {
+        description: "",
+        building_address: "",
+        location: ""
+    };
+
+    let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
+        ...blankStudySpace
+    });
+    let fileInput = $state<HTMLInputElement>();
 
     async function uploadStudySpace() {
         const imageFile = fileInput?.files?.[0];
-        if (!imageFile) {
-            alert("Please select an image file.");
-            return;
-        }
-        const params = new URLSearchParams({ title, imgTitle: imageFile.name });
-        const res = await fetch(`/api/study_spaces?${params.toString()}`, {
-            method: "POST",
-            body: imageFile
-        });
-        if (res.ok) {
-            alert("Study space uploaded successfully!");
-            await invalidate("db:study_spaces");
-        } else {
-            alert("Failed to upload study space.");
-        }
+        if (!imageFile) return alert("Please select an image file.");
+
+        const { data: studySpaceInsert, error: studySpaceError } = await supabase
+            .from("study_spaces")
+            .insert(studySpaceData)
+            .select()
+            .single();
+        if (studySpaceError)
+            return alert(`Error uploading study space: ${studySpaceError.message}`);
+
+        const { data: imgUpload, error: imageError } = await supabase.storage
+            .from("files_bucket")
+            .upload(`public/${studySpaceInsert.id}-${imageFile.name}`, imageFile, {
+                contentType: imageFile.type
+            });
+        if (imageError) return alert(`Error uploading image: ${imageError.message}`);
+
+        const { error: imageInsertError } = await supabase
+            .from("study_space_images")
+            .insert({
+                study_space_id: studySpaceInsert.id,
+                image_path: imgUpload.path
+            })
+            .select()
+            .single();
+        if (imageInsertError) return alert(`Error creating image: ${imageInsertError.message}`);
+
+        if (fileInput) fileInput.value = ""; // Clear the file input
+        studySpaceData = { ...blankStudySpace }; // Reset the form data
+        alert("Thank you for your contribution!");
+        invalidate("db:study_spaces"); // Invalidate page data so that it refreshes
     }
 </script>
 
@@ -41,9 +62,9 @@
                       .from("files_bucket")
                       .getPublicUrl(studySpace.study_space_images[0].image_path).data.publicUrl
                 : defaultImg}
-        <SpaceCard alt="Photo of {studySpace.title}" imgSrc={imgUrl}>
+        <SpaceCard alt="Photo of {studySpace.description}" imgSrc={imgUrl}>
             {#snippet description()}
-                <p>{studySpace.title}</p>
+                <p>{studySpace.description}</p>
             {/snippet}
         </SpaceCard>
     {/each}
@@ -55,7 +76,27 @@
         uploadStudySpace();
     }}
 >
-    <input type="text" name="title" bind:value={title} placeholder="Study Space Title" required />
+    <input
+        type="text"
+        name="description"
+        bind:value={studySpaceData.description}
+        placeholder="Study Space Description"
+        required
+    />
+    <input
+        type="text"
+        name="location"
+        bind:value={studySpaceData.location}
+        placeholder="Study Space Location within building"
+        required
+    />
+    <input
+        type="text"
+        name="building_address"
+        bind:value={studySpaceData.building_address}
+        placeholder="Building Address"
+        required
+    />
     <input type="file" name="image" accept=".png, image/png" required bind:this={fileInput} />
     <button type="submit">Upload some Study Space!</button>
 </form>
@@ -70,5 +111,8 @@
     }
     form {
         max-width: 600px;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
     }
 </style>