"use client"; import type { Session } from "next-auth"; import React, { ReactNode } from "react"; import { useSearchParams, useRouter } from 'next/navigation'; import { Pagination, Spin } from 'antd'; import Filter from "@/app/(profile)/profile/products/_components/Filter"; import ProductIntegration from "@/app/(profile)/profile/products/_components/ProductIntegration"; import ProductRow from "../Product/ProductRow"; import Card from "@/core/components/Card"; import { ProductViewModel } from "@/core/types/dto"; import getOptions from "@/core/utils/helpers/getOptions"; function groupProductsByProductId(products: any[]): any[] { const groupedProducts: { [key: string]: any } = {}; const separateProducts: any[] = []; products.forEach((product) => { const productId = product.productId?.$oid; if (productId) { if (!groupedProducts[productId]) { // Clone the product and initialize variations array with itself groupedProducts[productId] = { ...product, variations: [product], }; } else { // Add subsequent variations to the existing product's variations field groupedProducts[productId].variations!.push(product); } } else { // Products without productId are treated separately separateProducts.push(product); } }); // Combine grouped products and separate products without productId console.log(separateProducts); console.log('-----------------------------------'); console.log(Object.values(groupedProducts)); return [...Object.values(groupedProducts), ...separateProducts]; } interface ProductsClientInterfaceProps { session: Session | null; } /** * NOTE: The `antd` library should be _ELIMINATED_ from any project's component! * It is going to a lot of browsers **errors** & **warnings**. * @return {ReactNode} – component * @constructor */ export default function ProductsClientInterface(props: Readonly): ReactNode { const session = props.session; const [products, setProducts] = React.useState([]); const [loading, setLoading] = React.useState(false); const [selectedProducts, setSelectedProducts] = React.useState([]); const [mode, setMode] = React.useState("add"); const [selectedProduct, setSelectedProduct] = React.useState(null); const [isModalOpen, setIsModalOpen] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(""); const [total, setTotal] = React.useState(0); const searchParams = useSearchParams(); const router = useRouter(); const page = Number(searchParams.get('page')) || 1; const limit = Number(searchParams.get('limit')) || 10; const sortPrice = searchParams.get('sortPrice') || "asc"; const sortDate = searchParams.get('sortDate') || "asc"; const params = new URLSearchParams({ page: page.toString() }); searchTerm !== "" ? params.set('limit', products.length.toString()) : params.set('limit', "10") sortPrice !== undefined && params.set('sortPrice', sortPrice); sortDate !== undefined && params.set('sortCreatedAt', sortDate); const handleChangePage = (newPage: number) => { const newParams = new URLSearchParams(searchParams.toString()); newParams.set('page', newPage.toString()); router.push(`${window.location.pathname}?${newParams.toString()}`); }; const handleSelectedProduct = (product: ProductViewModel, isChecked: boolean) => { setSelectedProducts(prevState => { if (isChecked) { return [...prevState, product]; } else { return prevState.filter(item => item._id !== product._id); } }); }; const handleAllSelectedProducts = (isChecked: boolean) => { if (isChecked) return setSelectedProducts(products); setSelectedProducts([]); }; React.useEffect(() => { const loadProducts = async () => { try { setLoading(true); const shopId = props.session?.user.shopId; if (props.session?.user?.role !== 'shop_admin' && !shopId) { setLoading(false); return false; } const options = await getOptions("GET"); const res = await fetch( `${process.env.NEXT_PUBLIC_BASE_API_URL}/shops/${shopId}/products?${params.toString()}&searchQuery=${searchTerm}`, options); const data = await res.json(); if (data) { setProducts(data.data); setTotal(data.total); console.log(groupProductsByProductId(data.data)); } } catch { console.error("Error fetched products"); } finally { setLoading(false); } }; session?.user.id && loadProducts(); }, [page, limit, sortPrice, sortDate, session, searchTerm]); return (

{`Selected products: ${selectedProducts?.length || 0}`}

<> {!loading && products.length === 0 ? (

The list is empty

) : (
{/* */} {products && products?.map?.((product: any, index: number) => ( p._id === product._id)} onCheckboxChange={handleSelectedProduct} productData={product} setSelectedProduct={setSelectedProduct} setMode={setMode} index={index} /> ))}
Product Name Page Name LeftBrandSize Edit
) }
handleChangePage(page)} />
); };