Replace writable with $state

sillsdev · Jan 31, 2025 · 938d6e8 · 938d6e8
1 parent 2e7ab48
commit 938d6e8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 20 deletions.
diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/directory/+page.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/directory/+page.svelte
@@ -7,7 +7,6 @@
   import type { PrunedProject } from '$lib/projects';
   import ProjectCard from '$lib/projects/components/ProjectCard.svelte';
   import 'flatpickr/dist/flatpickr.css';
-  import { writable } from 'svelte/store';
   import type { FormResult } from 'sveltekit-superforms';
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
@@ -17,8 +16,8 @@
 
   let { data }: Props = $props();
 
-  const projects = writable(data.projects);
-  const count = writable(data.count);
+  let projects = $state(data.projects);
+  let count = $state(data.count);
 
   const { form, enhance, submit } = superForm(data.form, {
     dataType: 'json',
@@ -33,8 +32,8 @@
         query: { data: PrunedProject[]; count: number };
       }>;
       if (event.form.valid && data.query) {
-        projects.set(data.query.data);
-        count.set(data.query.count);
+        projects = data.query.data;
+        count = data.query.count;
       }
     }
   });
@@ -92,9 +91,9 @@
       />
     </div>
   </form>
-  {#if $projects.length > 0}
+  {#if projects.length > 0}
     <div class="w-full relative p-4">
-      {#each $projects as project}
+      {#each projects as project}
         <ProjectCard {project} />
       {/each}
     </div>
@@ -111,7 +110,7 @@
     }}
   >
     <div class="w-full flex flex-row place-content-start p-4 space-between-4 flex-wrap gap-1">
-      <Pagination bind:size={$form.page.size} total={$count} bind:page={$form.page.page} />
+      <Pagination bind:size={$form.page.size} total={count} bind:page={$form.page.page} />
     </div>
   </form>
 </div>

diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/products/[id]/files/+page.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/products/[id]/files/+page.svelte
@@ -3,7 +3,6 @@
   import Pagination from '$lib/components/Pagination.svelte';
   import { getIcon } from '$lib/icons/productDefinitionIcon';
   import * as m from '$lib/paraglide/messages';
-  import { writable } from 'svelte/store';
   import { superForm, type FormResult } from 'sveltekit-superforms';
   import type { PageData } from './$types';
   import BuildArtifacts from './components/BuildArtifacts.svelte';
@@ -14,7 +13,7 @@
 
   let { data }: Props = $props();
 
-  const builds = writable(data.builds);
+  let builds = $state(data.builds);
 
   const { form, enhance, submit } = superForm(data.form, {
     resetForm: false,
@@ -26,7 +25,7 @@
         query: { data: any[] };
       }>;
       if (event.form.valid && data.query) {
-        builds.set(data.query.data);
+        builds = data.query.data;
       }
     }
   });
@@ -52,7 +51,7 @@
     <h1 class="pl-4">{m.products_files_title()}</h1>
   </div>
   <div id="files" class="overflow-y-auto grow">
-    {#each $builds as build}
+    {#each builds as build}
       <BuildArtifacts
         {build}
         latestBuildId={data.product?.WorkflowBuildId}

diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/users/+page.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/users/+page.svelte
@@ -5,7 +5,6 @@
   import SearchBar from '$lib/components/SearchBar.svelte';
   import * as m from '$lib/paraglide/messages';
   import { isAdmin } from '$lib/utils';
-  import { writable } from 'svelte/store';
   import { superForm, type FormResult } from 'sveltekit-superforms';
   import type { PageData } from './$types';
   import type { MinifiedUser } from './common';
@@ -16,8 +15,8 @@
 
   let { data }: Props = $props();
 
-  const users = writable(data.users);
-  const count = writable(data.userCount);
+  let users = $state(data.users);
+  let count = $state(data.userCount);
 
   const { form, enhance, submit } = superForm(data.form, {
     dataType: 'json',
@@ -32,8 +31,8 @@
         query: { data: MinifiedUser[]; count: number };
       }>;
       if (event.form.valid && data.query) {
-        users.set(data.query.data);
-        count.set(data.query.count);
+        users = data.query.data;
+        count = data.query.count;
       }
     }
   });
@@ -81,7 +80,7 @@
         </tr>
       </thead>
       <tbody>
-        {#each $users as user}
+        {#each users as user}
           <tr class="align-top">
             <td class="p-2">
               <p>
@@ -167,7 +166,7 @@
     use:enhance
     class="m-4 pb-4 flex flex-row flex-wrap gap-2 place-content-center"
   >
-    <Pagination bind:size={$form.page.size} total={$count} bind:page={$form.page.page} />
+    <Pagination bind:size={$form.page.size} total={count} bind:page={$form.page.page} />
   </form>
 </div>
 

diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/workflow-instances/+page.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/workflow-instances/+page.svelte
@@ -5,7 +5,6 @@
   import SortTable from '$lib/components/SortTable.svelte';
   import * as m from '$lib/paraglide/messages';
   import { getRelativeTime } from '$lib/timeUtils';
-  import { writable } from 'svelte/store';
   import type { FormResult } from 'sveltekit-superforms';
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';