Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
F
final-exam
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Nawasan Wisitsingkhon
final-exam
Commits
3c4db1d5
Commit
3c4db1d5
authored
Oct 19, 2023
by
Nawasan Wisitsingkhon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
optimize search products;
change cat_id in url to cat_name because id in mongodb is too long for url
parent
5afb5a92
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
16 additions
and
12 deletions
+16
-12
Navbar.js
src/components/Navbar.js
+2
-1
index.js
src/pages/index.js
+14
-11
No files found.
src/components/Navbar.js
View file @
3c4db1d5
...
...
@@ -83,6 +83,8 @@ function Navbar(props) {
const
isMobileMenuOpen
=
Boolean
(
mobileMoreAnchorEl
);
function
onUpdateSearch
(
value
)
{
setSearch
(
value
);
// return
let
query
=
router
.
query
;
if
(
value
)
{
query
.
q
=
value
;
...
...
@@ -97,7 +99,6 @@ function Navbar(props) {
React
.
useEffect
(()
=>
{
setSearch
(
router
.
query
?.
q
??
""
);
console
.
log
(
router
.
query
);
},
[
router
]);
const
handleMobileMenuClose
=
()
=>
{
...
...
src/pages/index.js
View file @
3c4db1d5
...
...
@@ -26,7 +26,7 @@ export default function Home() {
const
[
message
,
setMessage
]
=
useState
({
message
:
""
,
error
:
false
});
const
wishlist
=
useContext
(
WishlistContext
);
const
cart
=
useContext
(
CartContext
);
const
[
category
,
setCategory
]
=
useState
(
-
1
);
const
[
category
,
setCategory
]
=
useState
(
""
);
const
[
categoryList
,
setCategoryList
]
=
useState
([]);
const
[
productsFilter
,
setProductsFilter
]
=
useState
([]);
const
[
algorithm
,
setAlgorithm
]
=
useState
([]);
...
...
@@ -47,11 +47,14 @@ export default function Home() {
useEffect
(()
=>
{
// products filter for search and category
let
cat_id
=
category
.
length
?
categoryList
.
filter
((
c
)
=>
c
.
name
==
category
)[
0
]?.
id
??
""
:
""
;
let
product_cache
=
!!
router
.
query
?.
q
&&
router
.
query
?.
q
?.
length
?
algorithm
.
filter
(
(
pid
)
=>
(
category
===
-
1
||
category
===
products
[
pid
].
cateId
)
&&
(
category
.
length
===
0
||
cat_id
===
products
[
pid
].
cateId
)
&&
String
(
products
[
pid
].
name
)
.
toLocaleLowerCase
()
.
includes
(
String
(
router
.
query
.
q
).
toLocaleLowerCase
())
&&
...
...
@@ -59,7 +62,7 @@ export default function Home() {
)
:
algorithm
.
filter
(
(
pid
)
=>
(
category
===
-
1
||
category
===
products
[
pid
]?.
cateId
)
&&
(
category
.
length
===
0
||
cat_id
===
products
[
pid
]?.
cateId
)
&&
Number
(
products
[
pid
].
stock
)
>
0
);
setProductsFilter
(
product_cache
);
...
...
@@ -144,7 +147,7 @@ export default function Home() {
if
(
router
.
query
?.
cat
)
{
setCategory
(
router
.
query
.
cat
);
}
else
if
(
category
!==
-
1
)
{
setCategory
(
-
1
);
setCategory
(
""
);
}
},
[
router
]);
...
...
@@ -162,8 +165,8 @@ export default function Home() {
<
Box
className
=
"flex justify-start mb-3 sm:px-10 max-w-[1520px] mx-auto"
>
<
Box
sx
=
{{
display
:
"flex"
,
overflowX
:
"scroll"
}}
>
<
Button
variant
=
{
category
===
-
1
?
"contained"
:
"text"
}
className
=
{
`
${
category
===
-
1
?
""
:
"bg-white"
}
mx-1`
}
variant
=
{
category
.
length
===
0
?
"contained"
:
"text"
}
className
=
{
`
${
category
.
length
===
0
?
""
:
"bg-white"
}
mx-1`
}
onClick
=
{()
=>
{
let
que
=
router
.
query
;
delete
que
.
cat
;
...
...
@@ -173,15 +176,15 @@ export default function Home() {
});
}}
>
ทั้งหมด
{
category
===
-
1
?
`(
${
productsFilter
.
length
}
)`
:
""
}
ทั้งหมด
{
category
.
length
===
0
?
`(
${
productsFilter
.
length
}
)`
:
""
}
<
/Button
>
{
categoryList
.
map
((
cat
,
idx
)
=>
(
<
Button
className
=
{
`
${
cat
.
id
===
category
?
""
:
"bg-white"
}
mx-1`
}
variant
=
{
cat
.
id
===
category
?
"contained"
:
"text"
}
className
=
{
`
${
cat
.
name
===
category
?
""
:
"bg-white"
}
mx-1`
}
variant
=
{
cat
.
name
===
category
?
"contained"
:
"text"
}
key
=
{
idx
}
onClick
=
{()
=>
{
if
(
cat
.
id
===
category
)
{
if
(
cat
.
name
===
category
)
{
let
que
=
router
.
query
;
delete
que
.
cat
;
router
.
push
({
...
...
@@ -191,7 +194,7 @@ export default function Home() {
}
else
{
router
.
push
({
pathname
:
location
.
pathname
,
query
:
{
...
router
.
query
,
cat
:
cat
.
id
},
query
:
{
...
router
.
query
,
cat
:
cat
.
name
},
});
}
}}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment