Improve error handling for open cloud dialog with no saved wheels

src/lib/components/OpenCloudDialog.svelte

@@ -29,9 +29,12 @@
       }
       const response = await getWheels(user.uid)
       if (!response.success) {
-        throw new Error('Failed to fetch wheels')
+        throw new Error(response.error.message)
       }
       wheels = response.data.wheels
+      if (!wheels.length) {
+        throw new Error('No saved wheels')
+      }
     } catch (error) {
       if (error instanceof Error) {
         toastStore.trigger({
@@ -58,7 +61,7 @@
       }
       const response = await getWheel(path, user.uid)
       if (!response.success) {
-        throw new Error('Error opening wheel')
+        throw new Error(response.error.message)
       }
       const { config, entries } = response.data.wheel
       wheelStore.setConfig(config)

src/lib/components/SaveCloudDialog.svelte

@@ -64,7 +64,7 @@
           uid: user.uid
         }, user.uid)
         if (!response.success) {
-          throw new Error('Failed to save wheel')
+          throw new Error(response.error.message)
         }
       }
       if (saveMode === 'overwrite' && $wheelStore.path) {
@@ -76,7 +76,7 @@
           uid: user.uid
         }, user.uid)
         if (!response.success) {
-          throw new Error('Failed to save wheel')
+          throw new Error(response.error.message)
         }
       }
       modalStore.close()

src/lib/components/ShareDialog.svelte

@@ -42,7 +42,7 @@
         uid: user.uid
       }, user.uid)
       if (!response.success) {
-        throw new Error('Failed to share wheel')
+        throw new Error(response.error.message)
       }
       modalStore.close()
       toastStore.trigger({

src/lib/server/FirebaseAdmin.ts

@@ -49,6 +49,9 @@ export const getUserWheelsMeta = async (uid: string) => {
     return []
   }
   const user = userSnap.data() as ApiUser
+  if (!user.wheels.length) {
+    return []
+  }
   return await getWheelMetaForPaths(user.wheels)
 }
 

src/routes/[path=path]/+page.svelte

@@ -6,6 +6,7 @@
   import type { OnStoppedData } from '$lib/utils/Wheel'
 
   export let data
+  const { wheel } = data
 
   const modalStore = getModalStore()
 
@@ -23,27 +24,31 @@
 		modalStore.trigger(createWinnerModal(e.detail))
 	}
 
-  wheelStore.setConfig(data.wheel.config)
-  wheelStore.setEntries(data.wheel.entries)
+  wheelStore.setConfig(wheel.config)
+  wheelStore.setEntries(wheel.entries)
 </script>
 
 <svelte:head>
-  <title>{data.wheel.config.title} - Svelte Wheel</title>
-  <meta property="og:title" content={data.wheel.config.title} />
-  <meta property="og:description" content={data.wheel.config.description} />
+  <title>{wheel.config.title} - Svelte Wheel</title>
+  <meta name="title" content={wheel.config.title} />
+  <meta property="og:title" content={wheel.config.title} />
+  {#if wheel.config.description}
+    <meta name="description" content={wheel.config.description} />
+    <meta property="og:description" content={wheel.config.description} />
+  {/if}
   <!-- <meta
     property="og:image"
-    content="https://sveltewheel.com/thumbnails/{data.wheel.path}"
+    content="https://sveltewheel.com/thumbnails/{wheel.path}"
   /> -->
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="theme-color" content="{data.wheel.config.colors.at(0)}">
+  <meta name="theme-color" content="{wheel.config.colors.at(0)}">
 </svelte:head>
 
 <div class="min-h-screen flex flex-col">
   <main class="flex-grow flex flex-col xl:grid grid-cols-6">
     <div class="col-span-1 pb-0 p-4 xl:pb-4 xl:pr-0 flex flex-col">
-      <h2 class="text-3xl">{data.wheel.config.title}</h2>
-      <p class="text-lg">{data.wheel.config.description}</p>
+      <h2 class="text-3xl">{wheel.config.title}</h2>
+      <p class="text-lg">{wheel.config.description}</p>
     </div>
 
     <div class="col-span-4 flex-1 flex flex-col justify-center items-center">

tests/playwright/index.test.ts

@@ -154,3 +154,14 @@ test('Wheel can be spun and a result is generated', async ({ page }) => {
     expect(resultsTextbox).toHaveValue(result as string)
   ])
 })
+
+test('Login dialog opens when user who is not logged in clicks on open button', async ({ page }) => {
+  await page.goto('/')
+  const openButton = page.getByRole('button', { name: 'Open' })
+  const openFromCloudButton = page.getByRole('button', { name: 'Open from the cloud' })
+  const logInHeading = page.getByRole('heading', { name: 'Log in' })
+  await openButton.click()
+  await openFromCloudButton.isVisible()
+  await openFromCloudButton.click()
+  await logInHeading.isVisible()
+})