Syncing improvemetns

src/lib/api.ts

@@ -9,6 +9,15 @@ import rawStandards from "$lib/data/standards.json" assert { type: "json" }
 
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
+const syncProduct = async (printfulProduct: Printful.Products.Product) => {
+	let webflowProduct = await Webflow.Products.get(printfulProduct.sync_product.external_id);
+	if (webflowProduct)
+		await Webflow.Products.updateUsingPrintful(printfulProduct);
+	else
+		webflowProduct = await Webflow.Products.createUsingPrintful(printfulProduct);
+	await Webflow.Products.syncImages(webflowProduct);
+};
+
 export const app = new Elysia({ prefix: "/api" })
 	.use(cors({
 		origin: '*'
@@ -18,7 +27,7 @@ export const app = new Elysia({ prefix: "/api" })
 
 	// CALCULATOR
 
-	.post("/calculate", async ({ body }) => {
+	.post("/calculate", async ({ body, store }) => {
 		const MAIN_STANDARDS = new Standards(rawStandards as ActivityStandards);
 		interface CalcRequest {
 			player: Player;
@@ -38,14 +47,36 @@ export const app = new Elysia({ prefix: "/api" })
 	})
 
 	// COMMERCE
+	.group("/products", app => app
+		.group("/sync", app => app
+			.state("job", {
+				isSyncing: false,
+				printfulProductId: undefined as undefined | number
+			})
+			.get("/", async ({ store }) => {
+				return store.job;
+			})
+			.post("/:printfulProductId?", async ({ params, store }) => {
+				if (store.job.isSyncing) return "";
+				store.job.isSyncing = true;
+				try {
+					if (params.printfulProductId) {
+						const printfulProductId = +params.printfulProductId;
+
+						store.job.printfulProductId = printfulProductId;
+
+						const printfulProduct = await Printful.Products.get(printfulProductId);
+						await syncProduct(printfulProduct);
+					}
+					else {
+						console.log("Syncing all products...");
 
-	.post("/products/sync", async ({ body, set }) => {
-		console.log("Syncing...");
 						const printfulProducts = await Printful.Products.getAll();
 						const webflowProducts = await Webflow.Products.getAll();
 						for (const printfulProduct of printfulProducts) {
+							store.job.printfulProductId = printfulProduct.id;
+
 							await sleep(2000);
-			console.log(printfulProduct.name, printfulProduct.id, printfulProduct.external_id);
 							const fullPrintfulProduct = await Printful.Products.get(printfulProduct.id);
 
 							let webflowProduct = webflowProducts
@@ -56,17 +87,28 @@ export const app = new Elysia({ prefix: "/api" })
 								webflowProduct = await Webflow.Products.createUsingPrintful(fullPrintfulProduct);
 							await Webflow.Products.syncImages(webflowProduct);
 						}
+					}
 					console.log("Done");
 					return "";
+				}
+				catch (error) {
+					throw error;
+				}
+				finally {
+					store.job.isSyncing = false;
+					store.job.printfulProductId = undefined;
+				}
 			}, {
 				error({ error }) {
 					console.error(error);
 					return {
-				message: "Failed to sync products",
+						message: "Failed to sync product(s)",
 						error
 					}
 				}
 			})
+		)
+	)
 
 	// WEBHOOKS
 
@@ -75,14 +117,7 @@ export const app = new Elysia({ prefix: "/api" })
 		switch (payload.type) {
 			case Printful.Webhook.Event.ProductUpdated: {
 				const printfulProduct = await Printful.Products.get(payload.data.sync_product.id);
-
-				let webflowProduct = await Webflow.Products.get(printfulProduct.sync_product.external_id);
-				if (webflowProduct)
-					await Webflow.Products.updateUsingPrintful(printfulProduct);
-				else
-					webflowProduct = await Webflow.Products.createUsingPrintful(printfulProduct);
-				await Webflow.Products.syncImages(webflowProduct);
-
+				await syncProduct(printfulProduct);
 				break;
 			}
 			case Printful.Webhook.Event.ProductDeleted: {
@@ -101,8 +136,5 @@ export const app = new Elysia({ prefix: "/api" })
 		}
 	});
 
-export type App = typeof app;
-
-const apiWrapper = treaty<App>(app);
-export const api = apiWrapper.api;
+export const api = treaty<typeof app>("localhost:5173").api;
 

src/routes/commerce/+page.svelte

@@ -1,11 +1,46 @@
 <script lang="ts">
-	import { Printful } from "$lib/services/commerce/printful";
+	import { api } from "$lib/api.js";
+	import type { Printful } from "$lib/services/commerce/printful";
+	import { onMount } from "svelte";
 
 	const { data } = $props();
 
-	let isSyncing = $state(false);
+	const synchronizer = $state({
+		isSyncing: false,
+		printfulProductId: undefined as undefined | number,
+		poll: async function () {
+			const res = await api.products.sync.get();
+			if (res.data) {
+				synchronizer.isSyncing = res.data.isSyncing;
+				synchronizer.printfulProductId = res.data.printfulProductId;
+			}
+		},
+		startPolling: () => {
+			const intervalId = setInterval(async () => {
+				await synchronizer.poll();
+				if (!synchronizer.isSyncing) clearInterval(intervalId);
+			}, 100);
+		},
+		syncAll: async () => {
+			synchronizer.startPolling();
+			await api.products.sync.post();
+		},
+		sync: async (printfulProductId: number) => {
+			synchronizer.startPolling();
+			await api.products
+				.sync({ printfulProductId: String(printfulProductId) })
+				.post();
+		},
+	});
 
-	const isPrintfulProductSynced = async (
+	onMount(async () => {
+		await synchronizer.poll();
+		if (synchronizer.isSyncing) {
+			synchronizer.startPolling();
+		}
+	});
+
+	const isProductSynced = async (
 		printfulProduct: Printful.Products.SyncProduct,
 	) => {
 		const webflowProducts = await data.products.webflow;
@@ -13,29 +48,25 @@
 			(p) => p.product.id === printfulProduct.external_id,
 		);
 	};
-
-	const syncProducts = async () => {
-		isSyncing = true;
-		await fetch(`http://localhost:5173/api/products/sync`, {
-			method: "POST",
-		});
-		isSyncing = false;
-	};
 </script>
 
 {#await data.products.printful}
 	<p>Loading...</p>
 {:then printfulProducts}
-	{#if isSyncing}
-		<p>Syncing...</p>
-	{:else}
-		<button onclick={() => syncProducts()} class="btn btn-lg">sync</button>
+	<button
+		disabled={synchronizer.isSyncing}
+		onclick={() => synchronizer.syncAll()}
+		class="btn btn-xl mb-5"
+	>
+		Sync all
+	</button>
 	<div class="w-full overflow-x-auto">
 		<table class="table">
 			<thead>
 				<tr>
 					<th>Name</th>
-						<th>Synced</th>
+					<th>Status</th>
+					<th>Sync</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -43,22 +74,37 @@
 					<tr class="hover:bg-base-300">
 						<td>{printfulProduct.name}</td>
 						<td>
-								{#await isPrintfulProductSynced(printfulProduct) then isSynced}
-									<div
-										class="badge {isSynced
-											? 'badge-success'
-											: 'badge-error'}"
-									>
-										{isSynced ? "Synced" : "Desynced"}
+							{#await isProductSynced(printfulProduct) then isSynced}
+								{#if synchronizer.printfulProductId === printfulProduct.id}
+									<div class="badge badge-warning">
+										Syncing...
 									</div>
+								{:else if isSynced}
+									<div class="badge badge-success">
+										Synced
+									</div>
+								{:else}
+									<div class="badge badge-error">
+										Desynced
+									</div>
+								{/if}
 							{/await}
 						</td>
+						<td>
+							<button
+								disabled={synchronizer.isSyncing}
+								onclick={() =>
+									synchronizer.sync(printfulProduct.id)}
+								class="btn"
+							>
+								Sync
+							</button>
+						</td>
 					</tr>
 				{/each}
 			</tbody>
 		</table>
 	</div>
-	{/if}
 {:catch error}
 	<p>Something went wrong: {error.message}</p>
 {/await}

tsconfig.json

@@ -10,7 +10,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"importsNotUsedAsValue": true
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files