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
Show whitespace changes
Inline Side-by-side
Showing with 72 additions and 6 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,6 +131,30 @@ export default function Home() { ...@@ -93,6 +131,30 @@ export default function Home() {
message={message.message} message={message.message}
/> />
<div> <div>
<Box className="flex justify-start mb-3 px-10 max-w-[1520px] mx-auto">
<Box className="flex items-center mx-3">หมวดหมู่</Box>
<FormControl>
<Select
variant="standard"
value={category}
onChange={(e) => {
router.push({
pathname: location.pathname,
query: { ...router.query, cat: e.target.value },
});
}}
>
<MenuItem value="-1">ทั้งหมด</MenuItem>
{categoryList.map((cat, idx) => (
<MenuItem key={idx} value={cat.id}>
{cat.name}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
{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]">
{productsFilter.map((prod, idx) => ( {productsFilter.map((prod, idx) => (
<ProductCard <ProductCard
...@@ -110,8 +172,9 @@ export default function Home() { ...@@ -110,8 +172,9 @@ export default function Home() {
cartHandler={() => cartHandler={() =>
onCart( onCart(
prod.id, prod.id,
!!cart.value.filter((ct) => ct.product_id === Number(prod.id)) !!cart.value.filter(
.length (ct) => ct.product_id === Number(prod.id)
).length
) )
} }
favHandler={() => favHandler={() =>
...@@ -125,6 +188,9 @@ export default function Home() { ...@@ -125,6 +188,9 @@ export default function Home() {
/> />
))} ))}
</div> </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