Update src/hooks/useProduct.ts
This commit is contained in:
@@ -1,45 +1,48 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getProductById } from '@/lib/api/product';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Product, fetchProduct } from "@/lib/api/product";
|
||||
|
||||
export function useProduct(productId: string) {
|
||||
const [product, setProduct] = useState<Product | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
async function loadProduct() {
|
||||
if (!productId) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await fetchProduct(productId);
|
||||
if (isMounted) {
|
||||
setProduct(data);
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted) {
|
||||
setError(err instanceof Error ? err : new Error("Failed to fetch product"));
|
||||
}
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadProduct();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [productId]);
|
||||
|
||||
return { product, isLoading, error };
|
||||
interface ProductState {
|
||||
product: unknown | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const useProduct = (productId: string) => {
|
||||
const [state, setState] = useState<ProductState>({
|
||||
product: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!productId) return;
|
||||
|
||||
const fetchProduct = async () => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isLoading: true,
|
||||
}));
|
||||
|
||||
try {
|
||||
const product = await getProductById(productId);
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isLoading: false,
|
||||
product,
|
||||
}));
|
||||
} catch (err) {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isLoading: false,
|
||||
error: 'Failed to fetch product',
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
fetchProduct();
|
||||
}, [productId]);
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
export default useProduct;
|
||||
|
||||
Reference in New Issue
Block a user