app -> room code assignment

frontend/package.json

@@ -21,6 +21,7 @@
     "astro": "^4.12.2",
     "lucide-astro": "^0.414.0",
     "lucide-svelte": "^0.427.0",
+    "nanostores": "^0.11.2",
     "stripe": "^16.6.0",
     "svelte": "^4.2.18",
     "tailwindcss": "^3.4.6",

frontend/src/components/QrButton.svelte

@@ -2,7 +2,7 @@
     import {qr} from "@svelte-put/qr/svg"
     import {QrCode} from "lucide-svelte";
 
-    let roomCode: string = "TEST"
+    export let code: string;
 
     function showModal() {
         let qr = document.getElementById("qr") as HTMLDialogElement
@@ -20,13 +20,13 @@
         <form method="dialog">
             <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
         </form>
-        <p class="text-2xl font-semibold">Room code: <span class="font-black">{roomCode}</span></p>
+        <p class="text-2xl font-semibold">Room code: <span class="font-black">{code}</span></p>
         <div>
             <div>
                 <svg
                         class="h-56 w-56"
                         use:qr={{
-                                data: `${window.location.href}/r/${roomCode}`,
+                                data: `${window.location.href}`
                             }}
                 >
                 </svg>

frontend/src/components/Room.svelte

@@ -1,25 +1,55 @@
 <script lang="ts">
     import {onMount} from "svelte";
-    let user: any
+    import WebsocketManager from "../lib/socket.ts";
+    import {roomCode} from "../lib/socket.ts";
+    import FileButton from "./FileButton.svelte";
+    import LinkButton from "./LinkButton.svelte";
+    import QrButton from "./QrButton.svelte";
+    import {Loader2} from "lucide-svelte";
+
+    export let code: string;
+
+    let manager: WebsocketManager
 
     onMount(() => {
-        let socket = new WebSocket("ws://127.0.0.1:7331/api/websocket")
-        socket.onmessage = (event) => {
-            let data = JSON.parse(event.data)
-            switch (data.type) {
-                case "IDENTITY":
-                    console.log(data.user)
-                    user = data.user
-                    RequestRoom(socket)
-            }
+        if (code != null) {
+            console.log("Setting room code to", code)
+            roomCode.set(code)
+            console.log("Room code set to", roomCode.get())
         }
-    })
-
-    function RequestRoom(socket: WebSocket) {
-        socket.send(JSON.stringify({
-            type: "REQUEST_ROOM",
-        }))
-    }
 
+        manager = new WebsocketManager("ws://localhost:7331/api/websocket")
+        manager.connect()
+        roomCode.subscribe(value => {
+            if (value == null) return
+            history.pushState({}, "", `/app/${value}`)
+            code = value
+        })
+    })
 </script>
-<p>{user?.display_name}</p>
+{#if code}
+    <div class="relative z-10 max-w-5xl mx-auto flex flex-col items-center justify-center gap-16 lg:gap-20 px-8 py-12 lg:py-32 min-h-screen">
+        <div class="relative flex flex-col gap-3 max-w-md items-center justify-center text-center">
+            <p class="text-2xl font-semibold">Room code: <span class="font-black">{code}</span></p>
+            <p class="text-base-content/70">
+                This space is a bit empty. Invite your other device using your unique
+                link or code!
+            </p>
+            <div class="flex justify-center gap-3">
+                <FileButton/>
+                <LinkButton/>
+                <QrButton code={code}/>
+            </div>
+        </div>
+    </div>
+{:else}
+    <div class="relative z-10 max-w-5xl mx-auto flex flex-col items-center justify-center gap-16 lg:gap-20 px-8 py-12 lg:py-32 min-h-screen">
+        <div class="relative flex gap-3 max-w-md items-center justify-center text-center">
+            <p class="text-base-content/70">
+                Creating a room...
+            </p>
+            <Loader2 class="animate-spin"/>
+        </div>
+    </div>
+{/if}
+

frontend/src/lib/socket.ts

@@ -0,0 +1,58 @@
+import {atom} from "nanostores";
+
+export const roomCode = atom<string | null>(null);
+
+class WebsocketManager {
+    private socket: WebSocket | null = null;
+    private readonly url: string;
+
+    constructor(url: string) {
+        this.url = url;
+    }
+
+    connect() {
+        this.socket = new WebSocket(this.url);
+        this.socket.onopen = () => {
+            console.log("Connected to websocket server");
+        }
+
+        this.socket.onclose = () => {
+            console.log("Disconnected from websocket server");
+            this.socket = null;
+        }
+
+        this.socket.onerror = (error) => {
+            console.error("Websocket error", error);
+        }
+
+        this.socket.onmessage = (event) => {
+            let data = JSON.parse(event.data);
+            this.handleMessages(data);
+        }
+    }
+
+    handleMessages(data: any) {
+        console.log("message type:", data.type);
+        switch (data.type) {
+            case "IDENTITY": {
+                console.log("Identity", data.user);
+                if (!this.socket) break;
+                if (roomCode.get() === null) {
+                    this.socket.send(JSON.stringify({
+                        type: "REQUEST_ROOM",
+                    }));
+                }
+                break;
+            }
+            case "ROOM_CREATED": {
+                console.log("Room created", data.room);
+                let room = data.room;
+                roomCode.set(room.code);
+                break;
+            }
+        }
+    }
+}
+
+
+export default WebsocketManager;

frontend/src/pages/app/[code].astro

@@ -0,0 +1,13 @@
+---
+export const prerender = false
+import Layout from "../../layouts/Layout.astro";
+import GradientBackdrop from "../../components/GradientBackdrop.astro";
+import Room from "../../components/Room.svelte";
+const {code} = Astro.params
+---
+<Layout title="Sendfa.st">
+    <section id="app" class="min-h-[100vh] bg-base-100 relative overflow-hidden">
+        <GradientBackdrop/>
+        <Room code={code} client:load/>
+    </section>
+</Layout>

frontend/src/pages/app/index.astro

@@ -1,27 +1,11 @@
 ---
-import Layout from "../../layouts/Layout.astro";
-import QrButton from "../../components/QrButton.svelte";
-import LinkButton from "../../components/LinkButton.svelte";
-import FileButton from "../../components/FileButton.svelte";
 import GradientBackdrop from "../../components/GradientBackdrop.astro";
+import Layout from "../../layouts/Layout.astro";
+import Room from "../../components/Room.svelte"
 ---
-<Layout title="Sendfa.st App">
+<Layout title="Sendfa.st">
     <section id="app" class="min-h-[100vh] bg-base-100 relative overflow-hidden">
-        <!--<Navbar/>-->
         <GradientBackdrop/>
-        <div class="relative z-10 max-w-5xl mx-auto flex flex-col items-center justify-center gap-16 lg:gap-20 px-8 py-12 lg:py-32 min-h-screen">
-            <div class="relative flex flex-col gap-3 max-w-md items-center justify-center text-center">
-                <p class="text-base-content/70">
-                    This space is a bit empty. Invite your other device using your unique
-                    link or code!
-                </p>
-                <div class="flex justify-center gap-3">
-                    <FileButton client:load/>
-                    <LinkButton client:load/>
-                    <QrButton client:load/>
-                </div>
-            </div>
-        </div>
+        <Room client:load/>
     </section>
-    <!--<Room client:load/>-->
 </Layout>