33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
|
// Adapted from legacy singleProduct.vue's own fetch (GET /product/:id).
|
||
|
|
// The new API has no single-product-detail endpoint (only GET
|
||
|
|
// /catalog/products, the flat list) — apps/api is out of scope for this port,
|
||
|
|
// so this fetches the full list and finds the matching product client-side.
|
||
|
|
// Wasteful for a large catalog, but honest: no fabricated endpoint, no silent
|
||
|
|
// behavior change.
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { api, type ProductSummary } from '../api/client'
|
||
|
|
|
||
|
|
export function useProductDetail(id: string) {
|
||
|
|
const loading = ref(false)
|
||
|
|
const flag = ref(false)
|
||
|
|
const notFound = ref(false)
|
||
|
|
const productRef = ref<ProductSummary | null>(null)
|
||
|
|
|
||
|
|
const load = async () => {
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const products = await api.listProducts()
|
||
|
|
const found = products.find((p) => p.id === id) ?? null
|
||
|
|
productRef.value = found
|
||
|
|
notFound.value = !found
|
||
|
|
flag.value = true
|
||
|
|
} catch (e) {
|
||
|
|
console.log(e)
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return { loading, flag, notFound, productRef, load }
|
||
|
|
}
|