Skip to content

F
final-exam
Commit c1d781cb authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon
Browse files
Options

fix algorithm sort products

parent 9d289af2
Show whitespace changes
Inline Side-by-side
Showing with 39 additions and 38 deletions
src/pages/index.js
View file @ c1d781cb
...@@ -21,7 +21,7 @@ const inter = Inter({ subsets: ["latin"] }); ...@@ -21,7 +21,7 @@ const inter = Inter({ subsets: ["latin"] });
export default function Home() { export default function Home() {
const user = useContext(UserContext); const user = useContext(UserContext);
const router = useRouter(); const router = useRouter();
const [products, setProducts] = useState([]); const [products, setProducts] = useState({});
const [message, setMessage] = useState({ message: "", error: false }); const [message, setMessage] = useState({ message: "", error: false });
const wishlist = useContext(WishlistContext); const wishlist = useContext(WishlistContext);
const cart = useContext(CartContext); const cart = useContext(CartContext);
...@@ -31,35 +31,38 @@ export default function Home() { ...@@ -31,35 +31,38 @@ export default function Home() {
const [algorithm, setAlgorithm] = useState([]); const [algorithm, setAlgorithm] = useState([]);
useEffect(() => { 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) { if (!algorithm.length) {
let seed = [...Array(products.length).keys()]; // sort positions with keys of product
let seed = [...Object.keys(products)];
let productRandom = []; let productRandom = [];
for (let i = 0; i < seed.length; i++) { while (seed.length) {
let point = Math.floor(Math.random() * seed.length); let point = Math.floor(Math.random() * seed.length);
productRandom.push(seed[point]); productRandom.push(seed[point]);
seed.slice(point, 1); seed.splice(point, 1);
} }
setAlgorithm(productRandom); setAlgorithm(productRandom);
} }
// products filter for search and category
let product_cache =
!!router.query?.q && router.query?.q?.length
? algorithm.filter(
(pid) =>
(category === -1 || category === products[pid].cateId) &&
String(products[pid].name)
.toLocaleLowerCase()
.includes(String(router.query.q).toLocaleLowerCase()) &&
Number(products[pid].stock) > 0
)
: algorithm.filter(
(pid) =>
(category === -1 || category === products[pid]?.cateId) &&
Number(products[pid].stock) > 0
);
setProductsFilter(product_cache);
}, [products, category]); }, [products, category]);
// for user click cart button
async function onCart(id, isRemove = false) { async function onCart(id, isRemove = false) {
if (!user.value?.token) { if (!user.value?.token) {
setMessage({ message: "คุณยังไม่ได้เข้าสู่ระบบ", error: true }); setMessage({ message: "คุณยังไม่ได้เข้าสู่ระบบ", error: true });
...@@ -82,6 +85,7 @@ export default function Home() { ...@@ -82,6 +85,7 @@ export default function Home() {
cart.fetch(); cart.fetch();
} }
// for user click wishlist button
async function onWishlist(id, isRemove = false) { async function onWishlist(id, isRemove = false) {
if (!user.value?.token) { if (!user.value?.token) {
setMessage({ message: "คุณยังไม่ได้เข้าสู่ระบบ", error: true }); setMessage({ message: "คุณยังไม่ได้เข้าสู่ระบบ", error: true });
...@@ -115,7 +119,10 @@ export default function Home() { ...@@ -115,7 +119,10 @@ export default function Home() {
const FetchProduct = async () => { const FetchProduct = async () => {
let response = await axios.get("/api/product"); let response = await axios.get("/api/product");
setProducts(response.data); let pd = {};
response.data.map((e) => (pd[e.id] = e));
setProducts(pd);
}; };
const FetchWishlist = async () => { const FetchWishlist = async () => {
...@@ -139,6 +146,7 @@ export default function Home() { ...@@ -139,6 +146,7 @@ export default function Home() {
setCategory(-1); setCategory(-1);
} }
}, [router]); }, [router]);
return ( return (
<> <>
<Head> <Head>
...@@ -195,45 +203,38 @@ export default function Home() { ...@@ -195,45 +203,38 @@ export default function Home() {
{productsFilter.length ? ( {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]"> <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]">
{algorithm.map( {productsFilter.map((pid, idx) => (
(algor, idx) =>
!!productsFilter[algor]?.id && (
<ProductCard <ProductCard
key={idx} key={idx}
isFav={ isFav={
!!wishlist.value.filter( !!wishlist.value.filter(
(wish) => (wish) => wish.product_id === Number(products[pid].id)
wish.product_id === Number(productsFilter[algor].id)
).length ).length
} }
isCart={ isCart={
!!cart.value.filter( !!cart.value.filter(
(ct) => (ct) => ct.product_id === Number(products[pid].id)
ct.product_id === Number(productsFilter[algor].id)
).length ).length
} }
product={productsFilter[algor]} product={products[pid]}
cartHandler={() => cartHandler={() =>
onCart( onCart(
prod.id, products[pid].id,
!!cart.value.filter( !!cart.value.filter(
(ct) => (ct) => ct.product_id === Number(products[pid].id)
ct.product_id === Number(productsFilter[algor].id)
).length ).length
) )
} }
favHandler={() => favHandler={() =>
onWishlist( onWishlist(
productsFilter[algor].id, products[pid].id,
!!wishlist.value.filter( !!wishlist.value.filter(
(wish) => (wish) => wish.product_id === Number(products[pid].id)
wish.product_id === Number(productsFilter[algor].id)
).length ).length
) )
} }
/> />
) ))}
)}
</div> </div>
) : ( ) : (
<Paper sx={{ p: 2, textAlign: "center" }}>ไม่พบรายการ</Paper> <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