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,35 +47,68 @@ 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;
 
-	.post("/products/sync", async ({ body, set }) => {
+						store.job.printfulProductId = printfulProductId;
-		console.log("Syncing...");
-		const printfulProducts = await Printful.Products.getAll();
-		const webflowProducts = await Webflow.Products.getAll();
-		for (const printfulProduct of printfulProducts) {
-			await sleep(2000);
-			console.log(printfulProduct.name, printfulProduct.id, printfulProduct.external_id);
-			const fullPrintfulProduct = await Printful.Products.get(printfulProduct.id);
 
-			let webflowProduct = webflowProducts
+						const printfulProduct = await Printful.Products.get(printfulProductId);
-				.find(webflowProduct => webflowProduct.product.id === printfulProduct.external_id);
+						await syncProduct(printfulProduct);
-			if (webflowProduct)
+					}
-				await Webflow.Products.updateUsingPrintful(fullPrintfulProduct);
+					else {
-			else
+						console.log("Syncing all products...");
-				webflowProduct = await Webflow.Products.createUsingPrintful(fullPrintfulProduct);
+
-			await Webflow.Products.syncImages(webflowProduct);
+						const printfulProducts = await Printful.Products.getAll();
-		}
+						const webflowProducts = await Webflow.Products.getAll();
-		console.log("Done");
+						for (const printfulProduct of printfulProducts) {
-		return "";
+							store.job.printfulProductId = printfulProduct.id;
-	}, {
+
-		error({ error }) {
+							await sleep(2000);
-			console.error(error);
+							const fullPrintfulProduct = await Printful.Products.get(printfulProduct.id);
-			return {
+
-				message: "Failed to sync products",
+							let webflowProduct = webflowProducts
-				error
+								.find(webflowProduct => webflowProduct.product.id === printfulProduct.external_id);
-			}
+							if (webflowProduct)
-		}
+								await Webflow.Products.updateUsingPrintful(fullPrintfulProduct);
-	})
+							else
+								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 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);
-
+				await syncProduct(printfulProduct);
-				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);
-
 				break;
 			}
 			case Printful.Webhook.Event.ProductDeleted: {
@@ -101,8 +136,5 @@ export const app = new Elysia({ prefix: "/api" })
 		}
 	});
 
-export type App = typeof app;
+export const api = treaty<typeof app>("localhost:5173").api;
-
-const apiWrapper = treaty<App>(app);
-export const api = apiWrapper.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,52 +48,63 @@
 			(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}
+	<button
-		<p>Syncing...</p>
+		disabled={synchronizer.isSyncing}
-	{:else}
+		onclick={() => synchronizer.syncAll()}
-		<button onclick={() => syncProducts()} class="btn btn-lg">sync</button>
+		class="btn btn-xl mb-5"
-		<div class="w-full overflow-x-auto">
+	>
-			<table class="table">
+		Sync all
-				<thead>
+	</button>
-					<tr>
+	<div class="w-full overflow-x-auto">
-						<th>Name</th>
+		<table class="table">
-						<th>Synced</th>
+			<thead>
-					</tr>
+				<tr>
-				</thead>
+					<th>Name</th>
-				<tbody>
+					<th>Status</th>
-					{#each printfulProducts as printfulProduct}
+					<th>Sync</th>
-						<tr class="hover:bg-base-300">
+				</tr>
-							<td>{printfulProduct.name}</td>
+			</thead>
-							<td>
+			<tbody>
-								{#await isPrintfulProductSynced(printfulProduct) then isSynced}
+				{#each printfulProducts as printfulProduct}
-									<div
+					<tr class="hover:bg-base-300">
-										class="badge {isSynced
+						<td>{printfulProduct.name}</td>
-											? 'badge-success'
+						<td>
-											: 'badge-error'}"
+							{#await isProductSynced(printfulProduct) then isSynced}
-									>
+								{#if synchronizer.printfulProductId === printfulProduct.id}
-										{isSynced ? "Synced" : "Desynced"}
+									<div class="badge badge-warning">
+										Syncing...
 									</div>
-								{/await}
+								{:else if isSynced}
-							</td>
+									<div class="badge badge-success">
-						</tr>
+										Synced
-					{/each}
+									</div>
-				</tbody>
+								{:else}
-			</table>
+									<div class="badge badge-error">
-		</div>
+										Desynced
-	{/if}
+									</div>
+								{/if}
+							{/await}
+						</td>
+						<td>
+							<button
+								disabled={synchronizer.isSyncing}
+								onclick={() =>
+									synchronizer.sync(printfulProduct.id)}
+								class="btn"
+							>
+								Sync
+							</button>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 {: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