Skip to content

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

add and remove cart in wishlist page

parent 3fa6ee5e
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 81 deletions
src/pages/cart.js
View file @ 95d9b776
...@@ -74,7 +74,7 @@ export default function Cart() { ...@@ -74,7 +74,7 @@ export default function Cart() {
message={message.message} message={message.message}
/> />
<Paper sx={{ p: 1, overflowX: "scroll" }}> <Paper sx={{ p: 1, overflowX: "scroll" }}>
{wishlist.value.length > 0 ? ( {cart.value.length > 0 ? (
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
......
src/pages/wishlist.js
View file @ 95d9b776
...@@ -9,22 +9,58 @@ import { ...@@ -9,22 +9,58 @@ import {
TableRow, TableRow,
} from "@mui/material"; } from "@mui/material";
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import { UserContext, WishlistContext } from "./_app"; import { CartContext, UserContext, WishlistContext } from "./_app";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import axios from "axios"; import axios from "axios";
import { Delete } from "@mui/icons-material"; import { Delete } from "@mui/icons-material";
import { ShoppingCart } from "@mui/icons-material"; import { ShoppingCart } from "@mui/icons-material";
import PopupAlert from "@/components/PopupAlert"; import PopupAlert from "@/components/PopupAlert";
import Head from "next/head"; import Head from "next/head";
import { RemoveShoppingCart } from "@mui/icons-material";
export default function Wishlist() { export default function Wishlist() {
const user = useContext(UserContext); const user = useContext(UserContext);
const wishlist = useContext(WishlistContext); const wishlist = useContext(WishlistContext);
const cart = useContext(CartContext);
const [products, setProducts] = useState([]); const [products, setProducts] = useState([]);
const [message, setMessage] = useState({ error: false, message: "" }); const [message, setMessage] = useState({ error: false, message: "" });
const router = useRouter(); const router = useRouter();
const [wishlistProduct, setWishlistProduct] = useState([]); const [wishlistProduct, setWishlistProduct] = useState([]);
const isInCart = (id) => {
return !!cart.value.filter((ct) => ct.product_id === Number(id)).length;
};
async function onCart(id, isRemove = false) {
if (!user.value?.token) {
setMessage({ message: "คุณยังไม่ได้เข้าสู่ระบบ", error: true });
setTimeout(() => {
setMessage({ message: "", error: true });
}, 2000);
return;
}
if (isRemove) {
let response = await axios.delete(`/api/u/cart?id=${id}`, {
headers: { token: user.value.token },
});
setMessage({ message: "นำออกจากตระกร้าสำเร็จ", error: false });
setTimeout(() => {
setMessage({ message: "", error: false });
}, 2000);
} else {
let response = await axios.post(
"/api/u/cart",
{ id },
{ headers: { token: user.value.token } }
);
setMessage({ message: "เพิ่มลงในตระกร้าสำเร็จ", error: false });
setTimeout(() => {
setMessage({ message: "", error: false });
}, 2000);
}
cart.fetch();
}
const removeFromWishlist = async (id) => { const removeFromWishlist = async (id) => {
try { try {
let response = await axios.delete(`/api/u/wishlist?id=${id}`, { let response = await axios.delete(`/api/u/wishlist?id=${id}`, {
...@@ -62,7 +98,6 @@ export default function Wishlist() { ...@@ -62,7 +98,6 @@ export default function Wishlist() {
}, []); }, []);
useEffect(() => { useEffect(() => {
console.log(wishlist.value);
setWishlistProduct( setWishlistProduct(
wishlist.value.map( wishlist.value.map(
(wish) => products.filter((pd) => pd.id === wish.product_id)[0] (wish) => products.filter((pd) => pd.id === wish.product_id)[0]
...@@ -72,85 +107,92 @@ export default function Wishlist() { ...@@ -72,85 +107,92 @@ export default function Wishlist() {
return ( return (
<> <>
<Head> <Head>
<title>รายการชื่นชอบ | OpenShop</title> <title>รายการชื่นชอบ | OpenShop</title>
</Head> </Head>
<Box> <Box>
<PopupAlert <PopupAlert
open={!!message.message.length} open={!!message.message.length}
isError={message.error} isError={message.error}
message={message.message} message={message.message}
/> />
<Paper sx={{ p: 1, overflowX: "scroll" }}> <Paper sx={{ p: 1, overflowX: "scroll" }}>
{wishlist.value.length > 0 ? ( {wishlist.value.length > 0 ? (
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
{[ {[
"ลำดับ", "ลำดับ",
"รูปภาพ", "รูปภาพ",
"ชื่อสินค้า", "ชื่อสินค้า",
"รายละเอียด", "รายละเอียด",
"ราคา", "ราคา",
"เพิ่มลงตระกร้า", "เพิ่มลงตระกร้า",
"นำออกจากรายการ", "นำออกจากรายการ",
].map((label, idx) => ( ].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell> <TableCell key={idx}>{label}</TableCell>
))} ))}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{wishlistProduct.map( {wishlistProduct.map(
(pdt, idx) => (pdt, idx) =>
pdt && ( pdt && (
<TableRow key={idx}> <TableRow key={idx}>
<TableCell>{idx + 1}</TableCell> <TableCell>{idx + 1}</TableCell>
<TableCell> <TableCell>
<img <img
width={100} width={100}
src={pdt.image?.length ? pdt.image : "/empty.jpg"} src={pdt.image?.length ? pdt.image : "/empty.jpg"}
alt="รูปสินค้า" alt="รูปสินค้า"
/> />
</TableCell> </TableCell>
<TableCell>{pdt.name}</TableCell> <TableCell>{pdt.name}</TableCell>
<TableCell> <TableCell>
<div className="max-h-10 overflow-scroll"> <div className="max-h-10 overflow-scroll">
{pdt.detail} {pdt.detail}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
{pdt.discount > 0 ? ( {pdt.discount > 0 ? (
<Box color={"orangered"}> <Box color={"orangered"}>
<del>${pdt.price}</del> $ <del>${pdt.price}</del> $
{pdt.price - pdt.price * (pdt.discount / 100)} {pdt.price - pdt.price * (pdt.discount / 100)}
</Box> </Box>
) : ( ) : (
<Box color="orangered">${pdt.price}</Box> <Box color="orangered">${pdt.price}</Box>
)} )}
</TableCell> </TableCell>
<TableCell> <TableCell>
<Button color="warning"> <Button
<ShoppingCart /> onClick={() => onCart(pdt.id, isInCart(pdt.id))}
</Button> color="warning"
</TableCell> >
<TableCell> {isInCart(pdt.id) ? (
<Button <RemoveShoppingCart />
color="error" ) : (
onClick={() => removeFromWishlist(pdt.id)} <ShoppingCart />
> )}
<Delete /> </Button>
</Button> </TableCell>
</TableCell> <TableCell>
</TableRow> <Button
) color="error"
)} onClick={() => removeFromWishlist(pdt.id)}
</TableBody> >
</Table> <Delete />
) : ( </Button>
<div className="text-center">รายการว่างเปล่า</div> </TableCell>
)} </TableRow>
</Paper> )
</Box> )}
</TableBody>
</Table>
) : (
<div className="text-center">รายการว่างเปล่า</div>
)}
</Paper>
</Box>
</> </>
); );
} }
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