Syncing improvemetns
This commit is contained in:
Dominic Ferrando
+72
-40
@@ -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 }) => {
|
||||
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);
|
||||
store.job.printfulProductId = printfulProductId;
|
||||
|
||||
let webflowProduct = webflowProducts
|
||||
.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 "";
|
||||
}, {
|
||||
error({ error }) {
|
||||
console.error(error);
|
||||
return {
|
||||
message: "Failed to sync products",
|
||||
error
|
||||
}
|
||||
}
|
||||
})
|
||||
const printfulProduct = await Printful.Products.get(printfulProductId);
|
||||
await syncProduct(printfulProduct);
|
||||
}
|
||||
else {
|
||||
console.log("Syncing all products...");
|
||||
|
||||
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);
|
||||
const fullPrintfulProduct = await Printful.Products.get(printfulProduct.id);
|
||||
|
||||
let webflowProduct = webflowProducts
|
||||
.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);
|
||||
|
||||
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;
|
||||
|
||||
|
||||
@@ -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}
|
||||
<p>Syncing...</p>
|
||||
{:else}
|
||||
<button onclick={() => syncProducts()} class="btn btn-lg">sync</button>
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Synced</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each printfulProducts as printfulProduct}
|
||||
<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"}
|
||||
<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>Status</th>
|
||||
<th>Sync</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each printfulProducts as printfulProduct}
|
||||
<tr class="hover:bg-base-300">
|
||||
<td>{printfulProduct.name}</td>
|
||||
<td>
|
||||
{#await isProductSynced(printfulProduct) then isSynced}
|
||||
{#if synchronizer.printfulProductId === printfulProduct.id}
|
||||
<div class="badge badge-warning">
|
||||
Syncing...
|
||||
</div>
|
||||
{/await}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{: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>
|
||||
{:catch error}
|
||||
<p>Something went wrong: {error.message}</p>
|
||||
{/await}
|
||||
|
||||
Reference in New Issue
Block a user