Skip to content

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

search product in home page

parent 2415f035
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 33 deletions
src/pages/index.js
View file @ 4065c60f
...@@ -6,6 +6,14 @@ import ProductCard from "@/components/ProductCard"; ...@@ -6,6 +6,14 @@ import ProductCard from "@/components/ProductCard";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { CartContext, UserContext, WishlistContext } from "./_app"; import { CartContext, UserContext, WishlistContext } from "./_app";
import PopupAlert from "@/components/PopupAlert"; import PopupAlert from "@/components/PopupAlert";
import {
Box,
FormControl,
FormLabel,
MenuItem,
Paper,
Select,
} from "@mui/material";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
...@@ -16,10 +24,24 @@ export default function Home() { ...@@ -16,10 +24,24 @@ export default function Home() {
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);
const [category, setCategory] = useState(-1);
const [categoryList, setCategoryList] = useState([]);
const productsFilter = !!router.query?.q const productsFilter =
? products.filter((prod) => String(prod.name).includes(router.query.q)) !!router.query?.q && router.query?.q?.length
: products.filter((prod) => Number(prod.stock) > 0); ? 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
);
async function onCart(id, isRemove = false) { async function onCart(id, isRemove = false) {
if (!user.value?.token) { if (!user.value?.token) {
...@@ -39,7 +61,6 @@ export default function Home() { ...@@ -39,7 +61,6 @@ export default function Home() {
{ id }, { id },
{ headers: { token: user.value.token } } { headers: { token: user.value.token } }
); );
} }
cart.fetch(); cart.fetch();
} }
...@@ -66,6 +87,15 @@ export default function Home() { ...@@ -66,6 +87,15 @@ export default function Home() {
FetchWishlist(); FetchWishlist();
} }
const fetchCategory = async () => {
try {
let response = await axios.get("/api/category");
setCategoryList(response.data);
} catch (err) {
console.error(err);
}
};
const FetchProduct = async () => { const FetchProduct = async () => {
let response = await axios.get("/api/product"); let response = await axios.get("/api/product");
setProducts(response.data); setProducts(response.data);
...@@ -80,8 +110,16 @@ export default function Home() { ...@@ -80,8 +110,16 @@ export default function Home() {
}; };
useEffect(() => { useEffect(() => {
fetchCategory();
FetchProduct(); FetchProduct();
}, [user]); }, [user]);
useEffect(() => {
if (router.query?.cat) {
setCategory(Number(router.query.cat));
} else {
setCategory(-1);
}
}, [router]);
return ( return (
<> <>
<Head> <Head>
...@@ -93,38 +131,66 @@ export default function Home() { ...@@ -93,38 +131,66 @@ export default function Home() {
message={message.message} message={message.message}
/> />
<div> <div>
<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]"> <Box className="flex justify-start mb-3 px-10 max-w-[1520px] mx-auto">
{productsFilter.map((prod, idx) => ( <Box className="flex items-center mx-3">หมวดหมู่</Box>
<ProductCard <FormControl>
key={idx} <Select
isFav={ variant="standard"
!!wishlist.value.filter( value={category}
(wish) => wish.product_id === Number(prod.id) onChange={(e) => {
).length router.push({
} pathname: location.pathname,
isCart={ query: { ...router.query, cat: e.target.value },
!!cart.value.filter((ct) => ct.product_id === Number(prod.id)) });
.length }}
} >
product={prod} <MenuItem value="-1">ทั้งหมด</MenuItem>
cartHandler={() => {categoryList.map((cat, idx) => (
onCart( <MenuItem key={idx} value={cat.id}>
prod.id, {cat.name}
!!cart.value.filter((ct) => ct.product_id === Number(prod.id)) </MenuItem>
.length ))}
) </Select>
} </FormControl>
favHandler={() => </Box>
onWishlist(
prod.id, {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( !!wishlist.value.filter(
(wish) => wish.product_id === Number(prod.id) (wish) => wish.product_id === Number(prod.id)
).length ).length
) }
} isCart={
/> !!cart.value.filter((ct) => ct.product_id === Number(prod.id))
))} .length
</div> }
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
)
}
/>
))}
</div>
) : (
<Paper sx={{ p: 2, textAlign: "center" }}>ไม่พบรายการ</Paper>
)}
</div> </div>
</> </>
); );
......
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