added empty pages
This commit is contained in:
Jelaletdin12
@@ -1,32 +1,30 @@
|
||||
import { ShoppingCart } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ShoppingCart } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface EmptyCartProps {
|
||||
locale?: string
|
||||
message?: string
|
||||
actionText?: string
|
||||
actionHref?: string
|
||||
}
|
||||
|
||||
export default function EmptyCart({
|
||||
locale = "ru",
|
||||
message = "Your cart is empty",
|
||||
actionText = "Start Shopping",
|
||||
actionHref = "/",
|
||||
}: EmptyCartProps) {
|
||||
export default function EmptyCart() {
|
||||
const t=useTranslations();
|
||||
const router=useRouter();
|
||||
return (
|
||||
<div className="min-h-[400px] flex flex-col items-center justify-center p-4">
|
||||
<ShoppingCart className="h-16 w-16 text-gray-300 mb-4" />
|
||||
<h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
|
||||
<p className="text-gray-500 mb-6 text-center max-w-sm">
|
||||
{locale === "ru"
|
||||
? "Добавьте товары в корзину, чтобы начать покупки"
|
||||
: "Add items to your cart to start shopping"}
|
||||
</p>
|
||||
<Link href={actionHref}>
|
||||
<Button className="rounded-xl">{actionText}</Button>
|
||||
</Link>
|
||||
<div className="flex min-h-[60vh] items-center justify-center px-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-gradient-to-br from-blue-50 to-white p-8 text-center shadow-lg">
|
||||
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
|
||||
<ShoppingCart className="h-10 w-10 text-blue-600" />
|
||||
</div>
|
||||
|
||||
<h2 className="mb-2 text-2xl font-semibold text-gray-900">
|
||||
{t("cart_empty")}
|
||||
</h2>
|
||||
|
||||
<p className="mb-6 text-sm text-gray-500">
|
||||
{t("cart_empty_message")}
|
||||
</p>
|
||||
|
||||
<Button onClick={()=>router.push("/")} className="w-full rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
|
||||
{t("start_shopping")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -1,148 +1,277 @@
|
||||
import { useQuery, useMutation, useQueryClient, UseQueryOptions } from "@tanstack/react-query"
|
||||
import { apiClient } from "@/lib/api"
|
||||
import type { CartItem } from "@/lib/types/api"
|
||||
import {
|
||||
useQuery,
|
||||
useMutation,
|
||||
useQueryClient,
|
||||
UseQueryOptions,
|
||||
} from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api";
|
||||
import type { CartItem } from "@/lib/types/api";
|
||||
import { useEffect } from "react";
|
||||
|
||||
interface CartResponse {
|
||||
message: string
|
||||
data: CartItem[]
|
||||
errorDetails?: string
|
||||
message: string;
|
||||
data: CartItem[];
|
||||
errorDetails?: string;
|
||||
}
|
||||
|
||||
// Transform response to handle HTML/malformed responses
|
||||
// Event emitter for cross-component cart updates
|
||||
class CartEventEmitter {
|
||||
private listeners: Set<() => void> = new Set();
|
||||
|
||||
subscribe(callback: () => void) {
|
||||
this.listeners.add(callback);
|
||||
return () => this.listeners.delete(callback);
|
||||
}
|
||||
|
||||
emit() {
|
||||
this.listeners.forEach((cb) => cb());
|
||||
}
|
||||
}
|
||||
|
||||
export const cartEvents = new CartEventEmitter();
|
||||
|
||||
function transformCartResponse(response: any): CartResponse {
|
||||
if (
|
||||
typeof response === "string" &&
|
||||
(response.trim().startsWith("<!DOCTYPE") || response.trim().startsWith("<html"))
|
||||
(response.trim().startsWith("<!DOCTYPE") ||
|
||||
response.trim().startsWith("<html"))
|
||||
) {
|
||||
console.error("Received HTML response instead of JSON:", response.substring(0, 100))
|
||||
console.error(
|
||||
"Received HTML response instead of JSON:",
|
||||
response.substring(0, 100)
|
||||
);
|
||||
return {
|
||||
message: "error",
|
||||
data: [],
|
||||
errorDetails: "Server returned HTML instead of JSON. The server might be down or experiencing issues.",
|
||||
}
|
||||
errorDetails:
|
||||
"Server returned HTML instead of JSON. The server might be down or experiencing issues.",
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof response === "object") {
|
||||
if (response.data) {
|
||||
return response
|
||||
return response;
|
||||
}
|
||||
return { message: "success", data: [] }
|
||||
return { message: "success", data: [] };
|
||||
}
|
||||
|
||||
if (typeof response === "string") {
|
||||
try {
|
||||
const parsed = JSON.parse(response)
|
||||
return parsed
|
||||
const parsed = JSON.parse(response);
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
console.error("Failed to parse response:", error)
|
||||
return { message: "error", data: [] }
|
||||
console.error("Failed to parse response:", error);
|
||||
return { message: "error", data: [] };
|
||||
}
|
||||
}
|
||||
|
||||
return { message: "unknown", data: [] }
|
||||
return { message: "unknown", data: [] };
|
||||
}
|
||||
|
||||
export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
|
||||
return useQuery({
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const query = useQuery({
|
||||
queryKey: ["cart"],
|
||||
queryFn: async () => {
|
||||
const response = await apiClient.get("/carts")
|
||||
return transformCartResponse(response.data)
|
||||
const response = await apiClient.get("/carts");
|
||||
return transformCartResponse(response.data);
|
||||
},
|
||||
refetchInterval: 10000, // Increased to 10 seconds (less aggressive)
|
||||
refetchOnMount: true,
|
||||
refetchOnWindowFocus: true, // Enable to catch updates on tab focus
|
||||
refetchOnReconnect: true,
|
||||
staleTime: 5000, // Data considered fresh for 5 seconds
|
||||
// REMOVED: Aggressive polling
|
||||
// ADDED: Smart refetching only when needed
|
||||
refetchOnMount: false, // Don't refetch on every mount
|
||||
refetchOnWindowFocus: false, // Don't refetch on tab focus
|
||||
refetchOnReconnect: true, // Only refetch on reconnect
|
||||
staleTime: Infinity, // Data never goes stale automatically
|
||||
gcTime: 1000 * 60 * 5, // Cache for 5 minutes
|
||||
retry: 2,
|
||||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
|
||||
...options,
|
||||
})
|
||||
});
|
||||
|
||||
// Subscribe to cart events for cross-component updates
|
||||
useEffect(() => {
|
||||
const unsubscribe = cartEvents.subscribe(() => {
|
||||
// Only update cache, don't refetch
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["cart"],
|
||||
refetchType: "none",
|
||||
});
|
||||
});
|
||||
return unsubscribe;
|
||||
}, [queryClient]);
|
||||
|
||||
return query;
|
||||
}
|
||||
|
||||
export function useAddToCart() {
|
||||
const queryClient = useQueryClient()
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ productId, quantity = 1 }: { productId: number; quantity?: number }) => {
|
||||
mutationFn: async ({
|
||||
productId,
|
||||
quantity = 1,
|
||||
}: {
|
||||
productId: number;
|
||||
quantity?: number;
|
||||
}) => {
|
||||
const params = new URLSearchParams({
|
||||
product_id: String(productId),
|
||||
product_quantity: String(quantity),
|
||||
})
|
||||
});
|
||||
|
||||
const response = await apiClient.post("/carts", params.toString(), {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
if (typeof response.data === "object" && response.data.data) {
|
||||
return response.data
|
||||
return response.data;
|
||||
}
|
||||
|
||||
if (typeof response.data === "string") {
|
||||
try {
|
||||
const parsed = JSON.parse(response.data)
|
||||
return parsed
|
||||
const parsed = JSON.parse(response.data);
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
console.error("Failed to parse add to cart response:", error)
|
||||
return { message: "success", data: "Added to cart" }
|
||||
console.error("Failed to parse add to cart response:", error);
|
||||
return { message: "success", data: "Added to cart" };
|
||||
}
|
||||
}
|
||||
|
||||
return { message: "success", data: "Added to cart" }
|
||||
return { message: "success", data: "Added to cart" };
|
||||
},
|
||||
onMutate: async ({ productId, quantity }) => {
|
||||
// Cancel outgoing refetches
|
||||
await queryClient.cancelQueries({ queryKey: ["cart"] });
|
||||
|
||||
// Snapshot previous value
|
||||
const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
|
||||
|
||||
// Optimistically update cart
|
||||
queryClient.setQueryData<CartResponse>(["cart"], (old) => {
|
||||
if (!old) return old;
|
||||
|
||||
const existingItem = old.data.find(
|
||||
(item: any) => item.product?.id === productId
|
||||
);
|
||||
|
||||
if (existingItem) {
|
||||
// Update existing item quantity
|
||||
return {
|
||||
...old,
|
||||
data: old.data.map((item: any) =>
|
||||
item.product?.id === productId
|
||||
? {
|
||||
...item,
|
||||
product_quantity: item.product_quantity + quantity,
|
||||
}
|
||||
: item
|
||||
),
|
||||
};
|
||||
} else {
|
||||
// Add new item (we don't have full product data, so we add placeholder)
|
||||
return {
|
||||
...old,
|
||||
data: [
|
||||
...old.data,
|
||||
{
|
||||
product: { id: productId },
|
||||
product_quantity: quantity,
|
||||
} as any,
|
||||
],
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Notify other components
|
||||
cartEvents.emit();
|
||||
|
||||
return { previousCart };
|
||||
},
|
||||
onError: (error, variables, context) => {
|
||||
// Rollback on error
|
||||
if (context?.previousCart) {
|
||||
queryClient.setQueryData(["cart"], context.previousCart);
|
||||
cartEvents.emit();
|
||||
}
|
||||
console.error("Add to cart error:", error);
|
||||
},
|
||||
onSuccess: () => {
|
||||
// Invalidate but don't refetch immediately (let polling handle it)
|
||||
queryClient.invalidateQueries({ queryKey: ["cart"], refetchType: 'none' })
|
||||
// Silently refetch in background to sync with server
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["cart"],
|
||||
refetchType: "active", // Only refetch if actively being watched
|
||||
});
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("Add to cart error:", error.response?.data?.message || error.message)
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export function useRemoveFromCart() {
|
||||
const queryClient = useQueryClient()
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (productId: number) => {
|
||||
const params = new URLSearchParams({ product_id: String(productId) })
|
||||
const params = new URLSearchParams({ product_id: String(productId) });
|
||||
|
||||
const response = await apiClient.patch("/carts", params.toString(), {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
if (typeof response.data === "object" && response.data.data) {
|
||||
return response.data.data
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
if (typeof response.data === "string") {
|
||||
try {
|
||||
const parsed = JSON.parse(response.data)
|
||||
return parsed.data || []
|
||||
const parsed = JSON.parse(response.data);
|
||||
return parsed.data || [];
|
||||
} catch (error) {
|
||||
console.error("Failed to parse cart response:", error)
|
||||
return []
|
||||
console.error("Failed to parse cart response:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
return []
|
||||
return [];
|
||||
},
|
||||
onMutate: async (productId) => {
|
||||
await queryClient.cancelQueries({ queryKey: ["cart"] });
|
||||
|
||||
const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
|
||||
|
||||
queryClient.setQueryData<CartResponse>(["cart"], (old) => {
|
||||
if (!old) return old;
|
||||
return {
|
||||
...old,
|
||||
data: old.data.filter((item: any) => item.product?.id !== productId),
|
||||
};
|
||||
});
|
||||
|
||||
cartEvents.emit();
|
||||
|
||||
return { previousCart };
|
||||
},
|
||||
onError: (error, variables, context) => {
|
||||
if (context?.previousCart) {
|
||||
queryClient.setQueryData(["cart"], context.previousCart);
|
||||
cartEvents.emit();
|
||||
}
|
||||
console.error("Remove from cart error:", error);
|
||||
},
|
||||
onSuccess: () => {
|
||||
// Immediate refetch after removal
|
||||
queryClient.invalidateQueries({ queryKey: ["cart"] })
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["cart"],
|
||||
refetchType: "active",
|
||||
});
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("Remove from cart error:", error.response?.data?.message || error.message)
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export function useCleanCart() {
|
||||
const queryClient = useQueryClient()
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async () => {
|
||||
@@ -150,98 +279,171 @@ export function useCleanCart() {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
if (typeof response.data === "object" && response.data.data) {
|
||||
return response.data.data
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
if (typeof response.data === "string") {
|
||||
try {
|
||||
const parsed = JSON.parse(response.data)
|
||||
return parsed.data || []
|
||||
const parsed = JSON.parse(response.data);
|
||||
return parsed.data || [];
|
||||
} catch (error) {
|
||||
console.error("Failed to parse cart response:", error)
|
||||
return []
|
||||
console.error("Failed to parse cart response:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
return []
|
||||
return [];
|
||||
},
|
||||
onMutate: async () => {
|
||||
await queryClient.cancelQueries({ queryKey: ["cart"] });
|
||||
|
||||
const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
|
||||
|
||||
queryClient.setQueryData<CartResponse>(["cart"], (old) => {
|
||||
if (!old) return old;
|
||||
return { ...old, data: [] };
|
||||
});
|
||||
|
||||
cartEvents.emit();
|
||||
|
||||
return { previousCart };
|
||||
},
|
||||
onError: (error, variables, context) => {
|
||||
if (context?.previousCart) {
|
||||
queryClient.setQueryData(["cart"], context.previousCart);
|
||||
cartEvents.emit();
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["cart"] })
|
||||
queryClient.invalidateQueries({ queryKey: ["cart"] });
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateCartItemQuantity() {
|
||||
const queryClient = useQueryClient()
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ productId, quantity }: { productId: number; quantity: number }) => {
|
||||
mutationFn: async ({
|
||||
productId,
|
||||
quantity,
|
||||
}: {
|
||||
productId: number;
|
||||
quantity: number;
|
||||
}) => {
|
||||
const params = new URLSearchParams({
|
||||
product_id: String(productId),
|
||||
product_quantity: String(quantity),
|
||||
})
|
||||
});
|
||||
|
||||
const response = await apiClient.post("/carts", params.toString(), {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
timeout: 15000, // 15 second timeout
|
||||
})
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
if (typeof response.data === "object" && response.data.data) {
|
||||
return response.data
|
||||
return response.data;
|
||||
}
|
||||
|
||||
if (typeof response.data === "string") {
|
||||
try {
|
||||
const parsed = JSON.parse(response.data)
|
||||
return parsed
|
||||
const parsed = JSON.parse(response.data);
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
console.error("Failed to parse update cart response:", error)
|
||||
return { message: "success", data: "Updated cart" }
|
||||
console.error("Failed to parse update cart response:", error);
|
||||
return { message: "success", data: "Updated cart" };
|
||||
}
|
||||
}
|
||||
|
||||
return { message: "success", data: "Updated cart" }
|
||||
return { message: "success", data: "Updated cart" };
|
||||
},
|
||||
onMutate: async ({ productId, quantity }) => {
|
||||
await queryClient.cancelQueries({ queryKey: ["cart"] });
|
||||
|
||||
const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
|
||||
|
||||
queryClient.setQueryData<CartResponse>(["cart"], (old) => {
|
||||
if (!old) return old;
|
||||
return {
|
||||
...old,
|
||||
data: old.data.map((item: any) =>
|
||||
item.product?.id === productId
|
||||
? { ...item, product_quantity: quantity }
|
||||
: item
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
cartEvents.emit();
|
||||
|
||||
return { previousCart };
|
||||
},
|
||||
onError: (error, variables, context) => {
|
||||
if (context?.previousCart) {
|
||||
queryClient.setQueryData(["cart"], context.previousCart);
|
||||
cartEvents.emit();
|
||||
}
|
||||
console.error("API update failed:", error);
|
||||
throw error;
|
||||
},
|
||||
onSuccess: () => {
|
||||
// Invalidate but don't refetch immediately (let optimistic update handle it)
|
||||
queryClient.invalidateQueries({ queryKey: ["cart"], refetchType: 'none' })
|
||||
// Background sync
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["cart"],
|
||||
refetchType: "none", // Don't refetch, trust optimistic update
|
||||
});
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("API update failed:", error.response?.data?.message || error.message)
|
||||
throw error // Re-throw to trigger retry mechanism
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateOrder() {
|
||||
const queryClient = useQueryClient()
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload: {
|
||||
customer_name?: string
|
||||
customer_phone: string
|
||||
customer_address: string
|
||||
shipping_method: string
|
||||
payment_type_id: number
|
||||
delivery_time?: string
|
||||
delivery_at?: string
|
||||
region: string
|
||||
note?: string
|
||||
customer_name?: string;
|
||||
customer_phone: string;
|
||||
customer_address: string;
|
||||
shipping_method: string;
|
||||
payment_type_id: number;
|
||||
delivery_time?: string;
|
||||
delivery_at?: string;
|
||||
region: string;
|
||||
note?: string;
|
||||
}) => {
|
||||
const response = await apiClient.post("/orders", payload)
|
||||
return response.data
|
||||
const response = await apiClient.post("/orders", payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["cart"] })
|
||||
queryClient.invalidateQueries({ queryKey: ["orders"] })
|
||||
// Clear cart after successful order
|
||||
queryClient.setQueryData<CartResponse>(["cart"], (old) => {
|
||||
if (!old) return old;
|
||||
return { ...old, data: [] };
|
||||
});
|
||||
cartEvents.emit();
|
||||
queryClient.invalidateQueries({ queryKey: ["orders"] });
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("Create order error:", error.response?.data?.message || error.message)
|
||||
console.error(
|
||||
"Create order error:",
|
||||
error.response?.data?.message || error.message
|
||||
);
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hook to get cart count for badges
|
||||
export function useCartCount() {
|
||||
const { data } = useCart();
|
||||
return (
|
||||
data?.data?.reduce(
|
||||
(sum: number, item: any) => sum + (item.product_quantity || 0),
|
||||
0
|
||||
) || 0
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user