Implement session tracking product syncs

This commit is contained in:
Dominic Ferrando
2026-07-04 00:13:25 -04:00
parent 09667a0a0a
commit 87df874f75
3 changed files with 112 additions and 50 deletions
@@ -3,18 +3,23 @@
import { onMount } from "svelte";
import { api } from "$lib/api.js";
type SyncStatus = "queued" | "active" | "failed" | "succeeded" | "none";
const { data } = $props();
const synchronizer = $state({
isRunning: false,
status: "none" as SyncStatus,
syncingPrintfulProductIds: [] as number[],
get isInProgress() {
return this.status === "active" || this.status === "queued";
},
poll: async function () {
const res = await api.products.sync.get();
if (res.error) {
synchronizer.isRunning = false;
synchronizer.status = "none";
synchronizer.syncingPrintfulProductIds = [];
} else {
synchronizer.isRunning = true;
synchronizer.status = res.data.status;
synchronizer.syncingPrintfulProductIds =
res.data.syncingPrintfulProductIds;
}
@@ -22,7 +27,7 @@
startPolling: () => {
const intervalId = setInterval(async () => {
await synchronizer.poll();
if (!synchronizer.isRunning) clearInterval(intervalId);
if (!synchronizer.isInProgress) clearInterval(intervalId);
}, 100);
},
syncAll: async () => {
@@ -37,7 +42,7 @@
onMount(async () => {
await synchronizer.poll();
if (synchronizer.isRunning) {
if (synchronizer.isInProgress) {
synchronizer.startPolling();
}
});
@@ -56,11 +61,11 @@
<p>Loading...</p>
{:then printfulProducts}
<button
disabled={synchronizer.isRunning}
disabled={synchronizer.isInProgress}
onclick={() => synchronizer.syncAll()}
class="btn btn-xl mb-5"
>
{#if synchronizer.isRunning}
{#if synchronizer.isInProgress}
Syncing...
{:else}
Sync all
@@ -113,7 +118,7 @@
</td>
<td>
<button
disabled={synchronizer.isRunning}
disabled={synchronizer.status === "active"}
onclick={() =>
synchronizer.sync(printfulProduct.id)}
class="btn"