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
f17ca80f
Commit
f17ca80f
authored
Oct 05, 2023
by
Nawasan Wisitsingkhon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
make order -> context;
order count show on navbar;
parent
813a2ebd
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
54 additions
and
46 deletions
+54
-46
Navbar.js
src/components/Navbar.js
+13
-2
_app.js
src/pages/_app.js
+33
-17
order.js
src/pages/order.js
+8
-27
No files found.
src/components/Navbar.js
View file @
f17ca80f
...
...
@@ -14,7 +14,12 @@ import MenuIcon from "@mui/icons-material/Menu";
import
SearchIcon
from
"@mui/icons-material/Search"
;
import
AccountCircle
from
"@mui/icons-material/AccountCircle"
;
import
ShoppingCart
from
"@mui/icons-material/ShoppingCart"
;
import
{
CartContext
,
UserContext
,
WishlistContext
}
from
"@/pages/_app"
;
import
{
CartContext
,
OrderContext
,
UserContext
,
WishlistContext
,
}
from
"@/pages/_app"
;
import
Link
from
"next/link"
;
import
{
Favorite
}
from
"@mui/icons-material"
;
import
{
Logout
,
SupervisedUserCircle
}
from
"@mui/icons-material"
;
...
...
@@ -70,6 +75,7 @@ function Navbar(props) {
const
cart
=
useContext
(
CartContext
);
const
user
=
useContext
(
UserContext
);
const
order
=
useContext
(
OrderContext
);
const
{
window
}
=
props
;
const
[
anchorEl
,
setAnchorEl
]
=
React
.
useState
(
null
);
const
[
mobileMoreAnchorEl
,
setMobileMoreAnchorEl
]
=
React
.
useState
(
null
);
...
...
@@ -178,7 +184,12 @@ function Navbar(props) {
aria
-
label
=
"show 4 new mails"
color
=
"inherit"
>
<
Badge
color
=
"error"
>
<
Badge
badgeContent
=
{
[...
order
.
value
.
filter
((
od
)
=>
od
.
pay_status
===
0
)].
length
}
color
=
"error"
>
<
ShoppingBag
/>
<
/Badge
>
<
/IconButton
>
...
...
src/pages/_app.js
View file @
f17ca80f
...
...
@@ -15,11 +15,13 @@ import axios from "axios";
export
const
UserContext
=
createContext
(
null
);
export
const
WishlistContext
=
createContext
(
null
);
export
const
CartContext
=
createContext
(
null
);
export
const
OrderContext
=
createContext
(
null
);
export
default
function
App
({
Component
,
pageProps
})
{
const
[
user
,
setUser
]
=
useState
({});
const
[
wishlist
,
setWishlist
]
=
useState
([]);
const
[
cart
,
setCart
]
=
useState
([]);
const
[
order
,
setOrder
]
=
useState
([]);
const
pathname
=
usePathname
();
const
fetchCart
=
async
()
=>
{
...
...
@@ -31,6 +33,15 @@ export default function App({ Component, pageProps }) {
setCart
(
response
.
data
.
cart
);
}
};
const
fetchOrder
=
async
()
=>
{
if
(
!
user
?.
token
)
return
;
let
response
=
await
axios
.
get
(
"/api/u/order"
,
{
headers
:
{
token
:
user
.
token
},
});
setOrder
(
response
.
data
);
};
const
fetchWishlist
=
async
()
=>
{
if
(
!
user
?.
token
)
return
;
let
response
=
await
axios
.
get
(
"/api/u/wishlist"
,
{
...
...
@@ -53,6 +64,7 @@ export default function App({ Component, pageProps }) {
useEffect
(()
=>
{
fetchCart
();
fetchWishlist
();
fetchOrder
();
},
[
user
]);
return
(
...
...
@@ -61,23 +73,27 @@ export default function App({ Component, pageProps }) {
value
=
{{
value
:
cart
,
set
:
setCart
,
fetch
:
fetchCart
}}
>
<
WishlistContext
.
Provider
value
=
{{
value
:
wishlist
,
set
:
setWishlist
}}
>
{
String
(
pathname
).
split
(
"/"
)[
1
]
===
"admin"
?
(
<>
{
user
.
rank
?
(
<
AdminLayout
>
<
Component
{...
pageProps
}
/
>
<
/AdminLayout
>
)
:
(
<
UserLayout
>
<
Error
/>
<
/UserLayout
>
)}
<
/
>
)
:
(
<
UserLayout
>
<
Component
{...
pageProps
}
/
>
<
/UserLayout
>
)}
<
OrderContext
.
Provider
value
=
{{
value
:
order
,
set
:
setOrder
,
fetch
:
fetchOrder
}}
>
{
String
(
pathname
).
split
(
"/"
)[
1
]
===
"admin"
?
(
<>
{
user
.
rank
?
(
<
AdminLayout
>
<
Component
{...
pageProps
}
/
>
<
/AdminLayout
>
)
:
(
<
UserLayout
>
<
Error
/>
<
/UserLayout
>
)}
<
/
>
)
:
(
<
UserLayout
>
<
Component
{...
pageProps
}
/
>
<
/UserLayout
>
)}
<
/OrderContext.Provider
>
<
/WishlistContext.Provider
>
<
/CartContext.Provider
>
<
/UserContext.Provider
>
...
...
src/pages/order.js
View file @
f17ca80f
...
...
@@ -9,8 +9,7 @@ import {
TableRow
,
}
from
"@mui/material"
;
import
React
,
{
useContext
,
useEffect
,
useState
}
from
"react"
;
import
{
CartContext
,
UserContext
}
from
"./_app"
;
import
{
useRouter
}
from
"next/router"
;
import
{
CartContext
,
OrderContext
,
UserContext
}
from
"./_app"
;
import
axios
from
"axios"
;
import
PopupAlert
from
"@/components/PopupAlert"
;
import
Head
from
"next/head"
;
...
...
@@ -22,19 +21,10 @@ export default function Order() {
const
cart
=
useContext
(
CartContext
);
const
[
products
,
setProducts
]
=
useState
([]);
const
[
message
,
setMessage
]
=
useState
({
error
:
false
,
message
:
""
});
const
order
=
useContext
(
OrderContext
);
const
[
orderList
,
setOrderList
]
=
useState
([]);
const
[
CartProduct
,
setCartProduct
]
=
useState
([]);
const
[
payment
,
setPayment
]
=
useState
({
open
:
false
,
id
:
-
1
,
price
:
-
1
});
const
fetchOrder
=
async
()
=>
{
if
(
!
user
.
value
?.
token
)
return
;
let
response
=
await
axios
.
get
(
"/api/u/order"
,
{
headers
:
{
token
:
user
.
value
.
token
},
});
setOrderList
(
response
.
data
);
console
.
log
(
response
.
data
);
};
const
fetchProduct
=
async
()
=>
{
try
{
let
product
=
await
axios
.
get
(
"/api/product"
);
...
...
@@ -46,18 +36,6 @@ export default function Order() {
fetchProduct
();
},
[]);
useEffect
(()
=>
{
fetchOrder
();
},
[
user
,
payment
]);
useEffect
(()
=>
{
setCartProduct
(
cart
.
value
.
map
(
(
ct
)
=>
products
.
filter
((
pd
)
=>
pd
.
id
===
ct
.
product_id
)[
0
]
)
);
},
[
cart
,
products
]);
return
(
<>
<
Head
>
...
...
@@ -66,7 +44,10 @@ export default function Order() {
{
payment
.
open
&&
(
<
ConfirmPayment
open
=
{
payment
.
open
}
handleClose
=
{()
=>
setPayment
({
open
:
false
,
id
:
-
1
})}
handleClose
=
{()
=>
{
setPayment
({
open
:
false
,
id
:
-
1
});
order
.
fetch
();
}}
id
=
{
payment
.
id
}
price
=
{
payment
.
price
}
/
>
...
...
@@ -78,7 +59,7 @@ export default function Order() {
message
=
{
message
.
message
}
/
>
<
Paper
sx
=
{{
p
:
1
,
overflowX
:
"scroll"
}}
>
{
order
List
.
length
>
0
?
(
{
order
.
value
?
.
length
>
0
?
(
<
Box
>
<
Table
>
<
TableHead
>
...
...
@@ -97,7 +78,7 @@ export default function Order() {
<
/TableRow
>
<
/TableHead
>
<
TableBody
>
{
order
List
.
map
(
{
order
.
value
.
map
(
(
order
,
idx
)
=>
order
&&
(
<
TableRow
key
=
{
idx
}
>
...
...
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