Unify committing of info updates

MaddyGuthridge · Jan 13, 2025 · 1a02d96 · 1a02d96
1 parent f52b7ec
commit 1a02d96
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 24 deletions.
diff --git a/src/routes/[...item]/+page.svelte b/src/routes/[...item]/+page.svelte
@@ -6,6 +6,7 @@
   import EditableMarkdown from '$components/markdown';
   import api from '$endpoints';
   import consts from '$lib/consts';
+  import DelayedUpdater from '$lib/delayedUpdate';
   import { generateKeywords } from '$lib/seo';
   import type { ItemInfo } from '$lib/server/data/item';
   import { itemFileUrl } from '$lib/urls';
@@ -26,10 +27,9 @@
 
   let editing = $state(false);
 
-  async function commitInfoChanges(newInfo: ItemInfo) {
-    await api().item(data.itemId).info.put(newInfo);
-    thisItem.info = newInfo;
-  }
+  let infoUpdater = new DelayedUpdater(async (info: ItemInfo) => {
+    await api().item(data.itemId).info.put(info);
+  }, consts.EDIT_COMMIT_HESITATION);
 </script>
 
 <svelte:head>
@@ -67,13 +67,16 @@
       loggedIn={data.loggedIn}
       {editing}
       onbegin={() => (editing = true)}
-      onfinish={() => (editing = false)}
+      onfinish={() => {
+        editing = false;
+        infoUpdater.commit();
+      }}
     />
     {#if editing}
       <MainDataEdit
         itemId={data.itemId}
         bind:item={thisItem}
-        onchange={commitInfoChanges}
+        onchange={(newInfo) => infoUpdater.update(newInfo)}
       />
 
       <ItemFilesEdit itemId={data.itemId} bind:files={thisItem.ls} />
@@ -110,7 +113,7 @@
       <NewSection
         oncreate={(newSection) => {
           thisItem.info.sections.push(newSection);
-          void commitInfoChanges(thisItem.info);
+          infoUpdater.update(thisItem.info);
         }}
       />
     {/if}

diff --git a/src/routes/[...item]/ItemInfoEdit.svelte b/src/routes/[...item]/ItemInfoEdit.svelte
@@ -1,27 +1,19 @@
 <script lang="ts">
   import FilePicker from '$components/pickers/FilePicker.svelte';
   import consts from '$lib/consts';
-  import DelayedUpdater from '$lib/delayedUpdate';
   import type { ItemId } from '$lib/itemId';
   import type { ItemData, ItemInfo } from '$lib/server/data/item';
   import { itemFileUrl } from '$lib/urls';
 
   type Props = {
     itemId: ItemId;
     item: ItemData;
-    onchange: (info: ItemInfo) => Promise<any>;
+    onchange: (info: ItemInfo) => void;
   };
 
   let { item = $bindable(), itemId, onchange }: Props = $props();
 
   let isRootPage = $derived(itemId.length === 0);
-
-  let updater = new DelayedUpdater(async (info: ItemInfo) => {
-    if (info.shortName === '') {
-      info.shortName = null;
-    }
-    await onchange(info);
-  }, consts.EDIT_COMMIT_HESITATION);
 </script>
 
 <form onsubmit={(e) => e.preventDefault()}>
@@ -30,7 +22,7 @@
     type="text"
     placeholder={consts.APP_NAME}
     bind:value={item.info.name}
-    oninput={() => updater.update(item.info)}
+    oninput={() => onchange(item.info)}
     required
   />
   <p>
@@ -45,7 +37,7 @@
     type="text"
     placeholder={item.info.name}
     bind:value={item.info.shortName}
-    oninput={() => updater.update(item.info)}
+    oninput={() => onchange(item.info)}
   />
   <p>
     {#if isRootPage}
@@ -59,15 +51,15 @@
     type="text"
     placeholder="A concise description."
     bind:value={item.info.description}
-    oninput={() => updater.update(item.info)}
+    oninput={() => onchange(item.info)}
     required
   />
   <p>A concise description of the item, shown on links to this page.</p>
   <h2>Color</h2>
   <input
     type="color"
     bind:value={item.info.color}
-    oninput={() => updater.update(item.info)}
+    oninput={() => onchange(item.info)}
     required
   />
   <p>The theme color of the item is shown in the background of the page.</p>
@@ -76,7 +68,7 @@
   <FilePicker
     files={item.ls}
     bind:selected={item.info.banner}
-    onchange={() => updater.update(item.info)}
+    onchange={() => onchange(item.info)}
   />
   <!-- Banner image -->
   {#if item.info.banner}
@@ -93,7 +85,7 @@
   <FilePicker
     files={item.ls}
     bind:selected={item.info.icon}
-    onchange={() => updater.update(item.info)}
+    onchange={() => onchange(item.info)}
   />
   <!-- Banner image -->
   {#if item.info.icon}

diff --git a/src/routes/[...item]/sections/Package.svelte b/src/routes/[...item]/sections/Package.svelte
@@ -25,7 +25,7 @@
   });
 </script>
 
-<a href={url}>
+<a href={url} target="_blank">
   <i class={icon}></i>
   <b>{label ?? `Install using ${providerName}`}</b>
   <CopyButton text={command} hint="Copy install command">

diff --git a/src/routes/[...item]/sections/Repo.svelte b/src/routes/[...item]/sections/Repo.svelte
@@ -73,7 +73,7 @@
 </script>
 
 {#if !editing}
-  <a href={url}>
+  <a href={url} target="_blank">
     <i class={icon}></i>
     <b>{displayLabel}</b>
     {#await starCount}