Skip to content

Commit

Permalink
last v
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChiDaniel
ChiDaniel committed Feb 25, 2025
1 parent 17986bb commit 5810b16
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 714 deletions.
354 changes: 5 additions & 349 deletions pages/Privacy.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,18 @@
import React, {
useEffect,
useState,
useCallback,
ChangeEvent,
use,
} from "react";
import ProductFilters from "../app/components/product-filter";
import ProductSort from "../app/components/product-sort";
import ProductGrid from "../app/components/product-grid";
import React, { useEffect, useState } from "react";
import { client } from "@/sanity/lib/client";
import { SanityProduct } from "../app/config/inventory";
import { groq } from "next-sanity";
import { siteConfig } from "@/app/config/site";

import Link from "next/link";
import { shimmer, toBase64 } from "../app/lib/image";
import Image from "next/image";
import { urlForImage } from "@/sanity/lib/image";
import { formatCurrencyString } from "use-shopping-cart";
import { cn } from "@/app/lib/utils";

export default function Page() {
const [products, setProducts] = useState<SanityProduct[]>([]);
/* const [products, setProducts] = useState<SanityProduct[]>([]);
const [filteredProducts, setFilteredProducts] = useState<SanityProduct[]>([]);
const [sortedProducts, setSortedProducts] = useState<SanityProduct[]>([]);
const [sortType, setSortType] = useState<string>("newest");
const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
const [loading, setLoading] = useState<boolean>(true);

/* useEffect(() => {
const fetchData = async () => {
try {
const prods = await client.fetch<SanityProduct[]>(
groq`*[_type == "product"]{
_id,
"images": images[].asset->url,
name,
"slug": slug.current,
description,
"categories": categories[],
"sizes": sizes[]{
id,
size,
stripePriceId,
price
},
colors,
sku,
currency,
_createdAt
}`,
);
setProducts(prods);
setFilteredProducts(prods);
setSortedProducts(prods);
} catch (error) {
console.error("Error fetching products:", error);
} finally {
setLoading(false);
}
};
fetchData();
}, []); */

/* const sizeProducts = useCallback(
(sizes: string[]) => {
const sizedProducts = products.filter((product) => {
if (product.sizes) {
const filteredSizes = product.sizes.filter((s) =>
sizes.includes(s.size),
);
return filteredSizes.length > 0;
}
return false;
});
setFilteredProducts(sizedProducts);
console.log(sizedProducts);
},
[products],
);
const sortProducts = useCallback(
(productsToSort: SanityProduct[], type: string) => {
let sortedProducts = [...productsToSort];
const [loading, setLoading] = useState<boolean>(true); */

if (type === "sizeAsc") {
sortedProducts.sort((a, b) => {
const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
const [widthA, heightA] = sizeA.split("x").map(Number);
const [widthB, heightB] = sizeB.split("x").map(Number);
return widthA * heightA - widthB * heightB;
});
} else if (type === "sizeDesc") {
sortedProducts.sort((a, b) => {
const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
const [widthA, heightA] = sizeA.split("x").map(Number);
const [widthB, heightB] = sizeB.split("x").map(Number);
return widthB * heightB - widthA * heightA;
});
} else if (type === "priceDesc") {
sortedProducts.sort((a, b) => {
const priceA = a.sizes && a.sizes.length > 0 ? a.sizes[0].price : 0;
const priceB = b.sizes && b.sizes.length > 0 ? b.sizes[0].price : 0;
return priceB - priceA;
});
} else if (type === "newest") {
sortedProducts.sort(
(a, b) =>
new Date(b._createdAt).getTime() - new Date(a._createdAt).getTime(),
);
}
setSortedProducts(sortedProducts);
},
[],
);
useEffect(() => {
if (selectedSizes.length > 0) {
sizeProducts(selectedSizes);
} else {
setFilteredProducts(products);
}
}, [selectedSizes, sizeProducts, products]);
useEffect(() => {
sortProducts(filteredProducts, sortType);
}, [sortType, filteredProducts, sortProducts]);
const handleSortChange = (sortType: string) => {
setSortType(sortType);
};
const handleSizeChange = (size: string) => {
setSelectedSizes((prevSelectedSizes) =>
prevSelectedSizes.includes(size)
? prevSelectedSizes.filter((s) => s !== size)
: [...prevSelectedSizes, size],
);
};
if (loading) {
return <div>Loading...</div>;
} */

/* const prodss = await client.fetch<SanityProduct[]>(
groq`*[_type == "product"]{
_id,
"images": images[].asset->url,
name,
"slug": slug.current,
description,
"categories": categories[],
"sizes": sizes[]{
id,
size,
stripePriceId,
price
},
colors,
sku,
currency,
_createdAt
}`,
); */

useEffect(() => {
/* useEffect(() => {
const fetchData = async () => {
try {
const prods = await client.fetch<SanityProduct[]>(
Expand All @@ -195,7 +35,6 @@ export default function Page() {
_createdAt
}`,
);
//must set after fecth the products to be displayed
console.log("Fetched Products:", prods);
setProducts(prods);
setFilteredProducts(prods);
Expand All @@ -208,94 +47,7 @@ export default function Page() {
};
fetchData();
}, []);

/* const sizeProducts = useCallback(
(sizes: string[]) => {
console.log("Selected Sizes:", sizes);
const sizedProducts = products.filter((product) => {
if (product.sizes) {
const filteredSizes = product.sizes.filter((s) =>
sizes.includes(s.size),
);
console.log(
`Product: ${product.name}, Sizes: ${product.sizes.map((s) => s.size).join(", ")}, Filtered Sizes: ${filteredSizes.map((s) => s.size).join(", ")}`,
);
return filteredSizes.length > 0;
}
return false;
});
setFilteredProducts(sizedProducts);
console.log("Sized Products:", sizedProducts);
},
[products],
); */

/* const sortProducts = useCallback(
(productsToSort: SanityProduct[], type: string) => {
let sortedProducts = [...productsToSort];
if (type === "sizeAsc") {
sortedProducts.sort((a, b) => {
const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
const [widthA, heightA] = sizeA.split("x").map(Number);
const [widthB, heightB] = sizeB.split("x").map(Number);
return widthA * heightA - widthB * heightB;
});
} else if (type === "sizeDesc") {
sortedProducts.sort((a, b) => {
const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
const [widthA, heightA] = sizeA.split("x").map(Number);
const [widthB, heightB] = sizeB.split("x").map(Number);
return widthB * heightB - widthA * heightA;
});
} else if (type === "priceDesc") {
sortedProducts.sort((a, b) => {
const priceA = a.sizes && a.sizes.length > 0 ? a.sizes[0].price : 0;
const priceB = b.sizes && b.sizes.length > 0 ? b.sizes[0].price : 0;
return priceB - priceA;
});
} else if (type === "newest") {
sortedProducts.sort(
(a, b) =>
new Date(b._createdAt).getTime() - new Date(a._createdAt).getTime(),
);
}
setSortedProducts(sortedProducts);
},
[],
); */

/* useEffect(() => {
if (selectedSizes.length > 0) {
sizeProducts(selectedSizes);
} else {
setFilteredProducts(products);
}
}, [selectedSizes, sizeProducts, products]); */

/* useEffect(() => {
sortProducts(filteredProducts, sortType);
}, [sortType, filteredProducts, sortProducts]);
const handleSortChange = (event: ChangeEvent<HTMLSelectElement>) => {
setSortType(event.target.value);
};
const handleSizeChange = (size: string) => {
setSelectedSizes((prevSelectedSizes) =>
prevSelectedSizes.includes(size)
? prevSelectedSizes.filter((s) => s !== size)
: [...prevSelectedSizes, size],
);
}; */
}, []); */

return (
<div>
Expand All @@ -310,102 +62,6 @@ export default function Page() {
{siteConfig.description}
</p>
</div>

<div>
<main className="mx-auto max-w-6xl px-6">
<div className="flex items-center justify-between border-b border-gray-200 pb-4 pt-24 dark:border-gray-800">
<h1 className="text-xl font-bold tracking-tight sm:text-2xl">
{products.length} Product{products.length === 1 ? "" : "s"}
</h1>
{/* Product Sort */}
<ProductSort
products={sortedProducts}
sortedProducts={sortedProducts}

/* sortType={sortType}
onSortChange={(sortType: string) =>
handleSortChange({
target: { value: sortType },
} as ChangeEvent<HTMLSelectElement>)
} */
/>
</div>

<section aria-labelledby="products-heading" className="pb-24 pt-6">
<h2 id="products-heading" className="sr-only">
Products
</h2>

<div
className={cn(
"grid grid-cols-1 gap-x-8 gap-y-10",
products.length > 0
? "lg:grid-cols-4"
: "lg:grid-cols-[1fr_3-fr]",
)}
>
<div className="hidden lg:block">
{/* Product filters */}
<ProductFilters
products={products}
setFilteredProducts={setFilteredProducts}
/>
</div>
{/* Product grid */}
</div>

<div className="grid grid-cols-3 gap-4">
{products.map((product) => (
<Link
key={product._id}
href={`/products/${product.slug.current}`}
className="group text-sm"
>
<div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg border-1 border-gray-200 bg-gray-100 group-hover:opacity-75 dark:border-gray-800">
{product.images && product.images[0] && (
<Image
placeholder="blur"
blurDataURL={`data:image/svg+xml;base64,${toBase64(
shimmer(225, 280),
)}`}
src={urlForImage(product.images[0])}
alt={product.name}
width={225}
height={280}
className="h-full w-full object-cover object-center"
/>
)}
</div>
<h3 className="mt-4 font-bold">{product.name}</h3>
<div>
<p className="mt-2 font-medium">
Price:{" "}
{formatCurrencyString({
currency: product.currency || "EUR",
value:
product.sizes && product.sizes.length > 0
? product.sizes[0].price
: 0,
})}
</p>
</div>
</Link>
))}
</div>
</section>
</main>
</div>
</div>
);

/* return (
<div>
<ProductFilters
selectedSizes={selectedSizes}
onSizeChange={(size) => handleSizeChange(size)}
/>
<ProductSort sortType={sortType} onSortChange={handleSortChange} />
<ProductGrid products={sortedProducts} />
</div>
); */
}
Loading

0 comments on commit 5810b16

Please sign in to comment.