fix(ceremony): save progress

ceremony/src/lib/components/Ceremony.svelte

@@ -34,6 +34,8 @@ let addressValidState: ValidState = $state("PENDING")
   {#if contributor.state === 'inQueue'}
     <H1>Your position: <span class="text-union-accent-500">{contributor.queueState.position}</span></H1>
     <H2>Queue length: <span class="text-union-accent-500">{contributor.queueState.count}</span></H2>
+
+    <!--Todo format time correctly-->
     <H3>Waiting time: <span class="text-union-accent-500">{contributor.queueState.estimatedTime} minutes</span> (est.).
     </H3>
 

ceremony/src/lib/components/Join.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+import H1 from "$lib/components/typography/H1.svelte"
+import Button from "$lib/components/Button.svelte"
+import Text from "$lib/components/typography/Text.svelte"
+import { callJoinQueue } from "$lib/supabase"
+
+let code = $state("")
+
+async function handleCode() {
+  //Maybe check format etc
+  const codeValid = await callJoinQueue(code)
+  if (codeValid) {
+    console.log("valid")
+  }
+}
+
+async function handleWaitlist() {}
+</script>
+
+<!--Todo handle invite code and update contributor-->
+<!--if no code, add to waitlist and update contributor-->
+
+<div>
+  <H1>Join the ceremony</H1>
+
+  <form class="flex flex-col gap-2 min-w-[355px]">
+    <input
+            type="text"
+            autocorrect="off"
+            autocomplete="off"
+            spellcheck="false"
+            autocapitalize="none"
+            bind:value={code}
+            placeholder="Secret code"
+            class="text-md font-supermolot h-9 px-2 outline-none border-2"
+    />
+    <Button
+            type="button"
+            onclick={handleCode}
+            disabled={code.length === 0}
+    >
+      ENTER
+    </Button>
+  </form>
+
+</div>
+
+<Text>Or</Text>
+
+<Button>Join the waitlist</Button>

ceremony/src/lib/stores/state.svelte.ts

@@ -56,7 +56,7 @@ export class ContributorState {
   userId = $state<string | undefined>(undefined)
   loggedIn = $state<boolean>(false)
 
-  inQueue = $state<boolean>(false)
+  invited = $state<boolean>(false)
   onWaitlist = $state<boolean>(false)
 
   pollingState = $state<"stopped" | "polling">("stopped")

ceremony/src/lib/supabase/index.ts

@@ -9,7 +9,7 @@ import {
 import { supabase } from "$lib/supabase/client.ts"
 import type { ContributionState } from "$lib/stores/state.svelte.ts"
 
-export const callJoinQueue = async (codeId: string) => {
+export const callJoinQueue = async (codeId: string): Promise<boolean> => {
   const userId = user.session?.user.id
   if (!userId) {
     throw new Error("User is not logged in")
@@ -20,12 +20,19 @@ export const callJoinQueue = async (codeId: string) => {
 
     if (error) {
       console.error("Error calling join_queue:", error)
-      return
+      return false
+    }
+
+    if (!data) {
+      console.error("No data returned from join_queue")
+      return false
     }
 
     console.log("Successfully joined queue:", data)
-  } catch (error) {
-    console.error("Unexpected error:", error)
+    return true
+  } catch (err) {
+    console.error("Unexpected error:", err)
+    return false // Ensure false is returned on error
   }
 }
 

ceremony/src/routes/+page.svelte

@@ -3,6 +3,7 @@ import { user } from "$lib/stores/user.svelte.ts"
 import H1 from "$lib/components/typography/H1.svelte"
 import { ContributorState } from "$lib/stores/state.svelte.ts"
 import Ceremony from "$lib/components/Ceremony.svelte"
+import Join from "$lib/components/Join.svelte"
 
 let contributor: ContributorState = new ContributorState()
 
@@ -12,18 +13,17 @@ $effect(() => {
 })
 </script>
 
+<!--Todo handle when to not show ceremony component-->
 
-{#if contributor.loggedIn}
-
-  {#if contributor.inQueue}
+{#if contributor}
+  {#if contributor.loggedIn}
     <Ceremony {contributor}/>
   {:else if contributor.onWaitlist}
     <H1>Your on the list</H1>
   {:else}
-    <!--ENTER CODE -->
-    <!--OR WAITLIST -->
+    <!--Do this if no code and no waitlist?-->
+    <Join />
   {/if}
-
 {:else}
   <H1>Welcome to union ceremony</H1>
 {/if}