-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
68f71cd
commit c1fbecf
Showing
3 changed files
with
81 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,98 @@ | ||
| import {useUserCheck} from '../hooks/useUserCheck'; | ||
| import {useConsumerCheck} from "../hooks/useConsumerCheck.jsx"; | ||
| import cartService from "../services/cart.jsx"; | ||
| import {useContext, useEffect, useState} from "react"; | ||
| import { useContext, useEffect, useState } from "react"; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import UserContext from "../contexts/UserContext.jsx"; | ||
| import CircularProgress from "@mui/material/CircularProgress"; | ||
| import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button, Typography, Box } from '@mui/material'; | ||
| import cartService from "../services/cart.jsx"; | ||
| import { useConsumerCheck } from "../hooks/useConsumerCheck.jsx"; | ||
|
|
||
| const CartPage = () => { | ||
| const { user, loading } = useContext(UserContext); | ||
| const { user } = useContext(UserContext); | ||
| const [cartItems, setCartItems] = useState([]); | ||
| const [isLoading, setIsLoading] = useState(false) | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const navigate = useNavigate(); | ||
| useConsumerCheck(); | ||
|
|
||
| useEffect(() => { | ||
| console.log('cart page useeffect') | ||
| const initialCartChecking = async () => { | ||
| if (!user.cart){ | ||
| console.log('no active cart found for user, creating new one') | ||
| try{ | ||
| if (!user.cart) { | ||
| try { | ||
| const data = { | ||
| isActive: true, | ||
| account: user.id | ||
| } | ||
| account: user.id, | ||
| }; | ||
| const response = await cartService.createCart(user.accessToken, data); | ||
| console.log('created new active cart for user: ', response.data) | ||
| updateUserDetails({ ...user, cart: response.data.id }); | ||
| } catch (error) { | ||
| console.log('error creating new active cart: ', error) | ||
| console.log("Error creating new active cart:", error); | ||
| } | ||
| } else{ | ||
| console.log('user seems to have cart already with id: ', user.cart) | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const fetchCartItems = async () => { | ||
| await initialCartChecking() | ||
| try{ | ||
| const response = await cartService.getCartItems(user.cart) | ||
| console.log('response from cartservice.getCartItems: ', response) | ||
| setCartItems(response.data) | ||
| } catch(error){ | ||
| console.log('error fetching cart items: ', error) | ||
| await initialCartChecking(); | ||
| try { | ||
| const response = await cartService.getCartItems(user.cart); | ||
| setCartItems(response.data); | ||
| } catch (error) { | ||
| console.log("Error fetching cart items:", error); | ||
| } finally { | ||
| console.log('completed fetching cart items') | ||
| setIsLoading(false); | ||
| } | ||
| } | ||
| setIsLoading(true) | ||
| fetchCartItems() | ||
| setIsLoading(false) | ||
| }, [loading]); | ||
| }; | ||
|
|
||
| setIsLoading(true); | ||
| fetchCartItems(); | ||
| }, [user]); | ||
|
|
||
| if (isLoading || loading) | ||
| return <CircularProgress /> | ||
| if (isLoading) return <CircularProgress />; | ||
|
|
||
| return ( | ||
| <> | ||
| <h2>Cart Page</h2> | ||
| {cartItems.map((item) => ( | ||
| <div> | ||
| <h3>produce id: {item.produce}</h3> | ||
| <p>quantity: {item.quantity}</p> | ||
| </div> | ||
| ))} | ||
| {cartItems.length === 0 && <p>No items in cart</p>} | ||
| </> | ||
| ) | ||
| } | ||
| <> | ||
| <Typography variant="h4" gutterBottom> | ||
| Cart Page | ||
| </Typography> | ||
| {cartItems.length > 0 ? ( | ||
| <> | ||
| <TableContainer component={Paper}> | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell>Produce Name</TableCell> | ||
| <TableCell align="right">Unit Price (RM)</TableCell> | ||
| <TableCell align="right">Selling Unit</TableCell> | ||
| <TableCell align="right">Store ID</TableCell> | ||
| <TableCell align="right">Quantity</TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {cartItems.map((item) => ( | ||
| <TableRow key={item.produceName}> | ||
| <TableCell component="th" scope="row"> | ||
| {item.produceName} | ||
| </TableCell> | ||
| <TableCell align="right">{item.produceUnitPrice}</TableCell> | ||
| <TableCell align="right">{item.produceSellingUnit}</TableCell> | ||
| <TableCell align="right">{item.produceStore}</TableCell> | ||
| <TableCell align="right">{item.cartItemQuantity}</TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| <Box mt={2}> | ||
| <Button variant="contained" color="primary" onClick={() => navigate('/payment')}> | ||
| Proceed to Payment | ||
| </Button> | ||
| </Box> | ||
| </> | ||
| ) : ( | ||
| <Typography variant="body1" color="textSecondary"> | ||
| Your cart is empty. | ||
| </Typography> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CartPage; | ||
| export default CartPage; |