Commit 9d289af2 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

create algorithm for show products in home page

parent 43419890
......@@ -27,22 +27,38 @@ export default function Home() {
const cart = useContext(CartContext);
const [category, setCategory] = useState(-1);
const [categoryList, setCategoryList] = useState([]);
const [productsFilter, setProductsFilter] = useState([]);
const [algorithm, setAlgorithm] = useState([]);
const productsFilter =
!!router.query?.q && router.query?.q?.length
? products.filter(
(prod) =>
(category === -1 || category === prod.cateId) &&
String(prod.name)
.toLocaleLowerCase()
.includes(String(router.query.q).toLocaleLowerCase()) &&
Number(prod.stock) > 0
)
: products.filter(
(prod) =>
(category === -1 || category === prod.cateId) &&
Number(prod.stock) > 0
);
useEffect(() => {
let product_cache =
!!router.query?.q && router.query?.q?.length
? products.filter(
(prod) =>
(category === -1 || category === prod.cateId) &&
String(prod.name)
.toLocaleLowerCase()
.includes(String(router.query.q).toLocaleLowerCase()) &&
Number(prod.stock) > 0
)
: products.filter(
(prod) =>
(category === -1 || category === prod.cateId) &&
Number(prod.stock) > 0
);
setProductsFilter(product_cache);
if (!algorithm.length) {
let seed = [...Array(products.length).keys()];
let productRandom = [];
for (let i = 0; i < seed.length; i++) {
let point = Math.floor(Math.random() * seed.length);
productRandom.push(seed[point]);
seed.slice(point, 1);
}
setAlgorithm(productRandom);
}
}, [products, category]);
async function onCart(id, isRemove = false) {
if (!user.value?.token) {
......@@ -111,13 +127,15 @@ export default function Home() {
};
useEffect(() => {
if (!user.value?.token) return;
fetchCategory();
FetchProduct();
}, [user]);
useEffect(() => {
if (router.query?.cat) {
setCategory(Number(router.query.cat));
} else {
} else if (category !== -1) {
setCategory(-1);
}
}, [router]);
......@@ -133,7 +151,7 @@ export default function Home() {
/>
<div>
<Box className="flex justify-start mb-3 px-10 max-w-[1520px] mx-auto">
<Box sx={{ display: "flex", overflowX: "scroll", maxWidth: "100vw" }}>
<Box sx={{ display: "flex", overflowX: "scroll", maxWidth: "100vw" }}>
<Button
variant={category === -1 ? "contained" : "text"}
className={`${category === -1 ? "" : "bg-white"} mx-1`}
......@@ -177,37 +195,45 @@ export default function Home() {
{productsFilter.length ? (
<div className="mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 max-w-[1520px]">
{productsFilter.map((prod, idx) => (
<ProductCard
key={idx}
isFav={
!!wishlist.value.filter(
(wish) => wish.product_id === Number(prod.id)
).length
}
isCart={
!!cart.value.filter((ct) => ct.product_id === Number(prod.id))
.length
}
product={prod}
cartHandler={() =>
onCart(
prod.id,
!!cart.value.filter(
(ct) => ct.product_id === Number(prod.id)
).length
)
}
favHandler={() =>
onWishlist(
prod.id,
!!wishlist.value.filter(
(wish) => wish.product_id === Number(prod.id)
).length
)
}
/>
))}
{algorithm.map(
(algor, idx) =>
!!productsFilter[algor]?.id && (
<ProductCard
key={idx}
isFav={
!!wishlist.value.filter(
(wish) =>
wish.product_id === Number(productsFilter[algor].id)
).length
}
isCart={
!!cart.value.filter(
(ct) =>
ct.product_id === Number(productsFilter[algor].id)
).length
}
product={productsFilter[algor]}
cartHandler={() =>
onCart(
prod.id,
!!cart.value.filter(
(ct) =>
ct.product_id === Number(productsFilter[algor].id)
).length
)
}
favHandler={() =>
onWishlist(
productsFilter[algor].id,
!!wishlist.value.filter(
(wish) =>
wish.product_id === Number(productsFilter[algor].id)
).length
)
}
/>
)
)}
</div>
) : (
<Paper sx={{ p: 2, textAlign: "center" }}>ไม่พบรายการ</Paper>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment