From ec715a77e61fe56c827e83bfb210eaa194fb65bc Mon Sep 17 00:00:00 2001
From: Charlie Drage <charlie@charliedrage.com>
Date: Wed, 23 Oct 2024 14:50:55 -0400
Subject: [PATCH] use svelte5, update to code review

Signed-off-by: Charlie Drage <charlie@charliedrage.com>
---
 packages/frontend/src/Examples.spec.ts        |  4 ++--
 packages/frontend/src/lib/Card.svelte         | 10 ++++++----
 packages/frontend/src/lib/ExampleCard.svelte  | 17 +++++++----------
 packages/frontend/src/lib/ExamplesCard.svelte | 19 +++++++++++--------
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/Examples.spec.ts b/packages/frontend/src/Examples.spec.ts
index 1fec8c83..c7fd8197 100644
--- a/packages/frontend/src/Examples.spec.ts
+++ b/packages/frontend/src/Examples.spec.ts
@@ -128,12 +128,12 @@ test('Test examples correctly marks examples either Pull image or Build image de
 
   // Wait until example1 says Build image as it updates reactively
   // same for example 2 but Pull image
-  waitFor(() => {
+  await waitFor(() => {
     const buildImage1 = example1.querySelector('[aria-label="Build image"]');
     expect(buildImage1).toBeInTheDocument();
   });
 
-  waitFor(() => {
+  await waitFor(() => {
     const pullImage2 = example2.querySelector('[aria-label="Pull image"]');
     expect(pullImage2).toBeInTheDocument();
   });
diff --git a/packages/frontend/src/lib/Card.svelte b/packages/frontend/src/lib/Card.svelte
index a4dfe0a5..288acdb5 100644
--- a/packages/frontend/src/lib/Card.svelte
+++ b/packages/frontend/src/lib/Card.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-export let title: string | undefined = undefined;
-export let description: string | undefined = undefined;
-
-export let href: string | undefined = undefined;
+interface Props {
+  title: string;
+  description?: string;
+  href?: string;
+}
+let { title, description, href }: Props = $props();
 </script>
 
 <a class="no-underline" href={href}>
diff --git a/packages/frontend/src/lib/ExampleCard.svelte b/packages/frontend/src/lib/ExampleCard.svelte
index 0af25e4f..751b9f33 100644
--- a/packages/frontend/src/lib/ExampleCard.svelte
+++ b/packages/frontend/src/lib/ExampleCard.svelte
@@ -6,9 +6,13 @@ import { Button } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
 import DiskImageIcon from './DiskImageIcon.svelte';
 
-export let example: Example;
+interface Props {
+  example: Example;
+}
+
+let { example }: Props = $props();
 
-let pullInProgress = false;
+let pullInProgress = $state(false);
 
 async function openURL(): Promise<void> {
   await bootcClient.openLink(example.repository);
@@ -35,11 +39,6 @@ function formatStringSize(size: number): string {
   }
   return `${size} MB`;
 }
-
-// Make sure if example.pulled is updated, we force a re-render
-$: {
-  example.state;
-}
 </script>
 
 <div class="no-underline">
@@ -99,12 +98,10 @@ $: {
           icon={faArrowDown}
           aria-label="Pull image"
           title="Pull image"
-          class="w-28"
           inProgress={pullInProgress}>Pull image</Button>
       {:else}
         <!-- Show a spinner / in progress for querying button instead if we are still loading information-->
-        <Button icon={faArrowDown} aria-label="Querying" title="Querying" class="w-28" inProgress={true}
-          >Querying</Button>
+        <Button icon={faArrowDown} aria-label="Querying" title="Querying" inProgress={true}>Querying</Button>
       {/if}
     </div>
   </div>
diff --git a/packages/frontend/src/lib/ExamplesCard.svelte b/packages/frontend/src/lib/ExamplesCard.svelte
index 6608f09a..7ae35880 100644
--- a/packages/frontend/src/lib/ExamplesCard.svelte
+++ b/packages/frontend/src/lib/ExamplesCard.svelte
@@ -7,9 +7,13 @@ import { bootcClient, rpcBrowser } from '../api/client';
 import type { ImageInfo } from '@podman-desktop/api';
 import { Messages } from '/@shared/src/messages/Messages';
 
-export let category: Category;
-export let examples: Example[];
-let bootcAvailableImages: ImageInfo[] = [];
+interface Props {
+  category: Category;
+  examples: Example[];
+}
+let { category, examples = $bindable() }: Props = $props();
+
+let bootcAvailableImages = $state<ImageInfo[]>([]);
 
 onMount(async () => {
   bootcAvailableImages = await bootcClient.listBootcImages();
@@ -32,6 +36,7 @@ onMount(async () => {
 // Function to update examples based on available images
 function updateExamplesWithPulledImages() {
   if (bootcAvailableImages) {
+    console.log('updateExamplesWithPulledImages');
     // Set each state to 'unpulled' by default before updating, as this prevents 'flickering'
     // and unsure states when images are being updated
     for (const example of examples) {
@@ -54,16 +59,14 @@ function updateExamplesWithPulledImages() {
 }
 
 // Reactive statement to call the function each time bootcAvailableImages updates
-$: if (bootcAvailableImages) {
+$effect(() => {
   updateExamplesWithPulledImages();
-}
+});
 </script>
 
 <Card title={category.name}>
   <div slot="content" class="w-full">
-    {#if examples.length === 0}
-      <div class="text-gray-400 mt-2">There is no example in this category.</div>
-    {/if}
+    <div class="text-gray-400 mt-2">There is no example in this category.</div>
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4">
       {#each examples as example}
         <ExampleCard example={example} />