Skip to content

Commit

Permalink
cart didnot show when not logged in
Browse files Browse the repository at this point in the history
  • Loading branch information
@ASHISH-JHA94
ASHISH-JHA94 committed May 31, 2024
1 parent efee02d commit 03bc9ec
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 44 deletions.
90 changes: 47 additions & 43 deletions client/src/Pages/Cart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,18 @@ const Cart = () => {
setLoading(false);
}
}
} else {
setLoading(false);
}
};

useEffect(() => {
fetchCartData();
}, [dispatch]);
if (userLoggedIn) {
fetchCartData();
} else {
setLoading(false);
}
}, [dispatch, userLoggedIn]);

useEffect(() => {
if (!loading) {
Expand All @@ -53,54 +59,52 @@ const Cart = () => {
<Spinner />
) : (
<>
{userLoggedIn && cart.length > 0 ? (
<div className="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-center">
<div className="w-[100%] md:w-[60%] flex flex-col p-2">
{cart.map((item, index) => (
<CartItem key={item.productDetails._id} item={item.productDetails} itemIndex={index} fetchCartData={fetchCartData} />
))}
</div>
<div className="w-[100%] md:w-[40%] mt-5 flex flex-col">
<div className="flex flex-col p-5 gap-5 my-14 h-[100%] justify-between">
<div className="flex flex-col gap-5">
<div className="font-semibold text-xl text-green-800">Your Cart</div>
<div className="font-semibold text-5xl text-green-700 -mt-5">Summary</div>
<p className="text-xl">
<span className="text-gray-700 font-semibold text-xl">Total Items: {cart.length}</span>
{userLoggedIn ? (
cart.length > 0 ? (
<div className="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-center">
<div className="w-[100%] md:w-[60%] flex flex-col p-2">
{cart.map((item, index) => (
<CartItem key={item.productDetails._id} item={item.productDetails} itemIndex={index} fetchCartData={fetchCartData} />
))}
</div>
<div className="w-[100%] md:w-[40%] mt-5 flex flex-col">
<div className="flex flex-col p-5 gap-5 my-14 h-[100%] justify-between">
<div className="flex flex-col gap-5">
<div className="font-semibold text-xl text-green-800">Your Cart</div>
<div className="font-semibold text-5xl text-green-700 -mt-5">Summary</div>
<p className="text-xl">
<span className="text-gray-700 font-semibold text-xl">Total Items: {cart.length}</span>
</p>
</div>
</div>
<div className="flex flex-col">
<p className="text-xl font-bold">
<span className="text-gray-700 font-semibold">Total Amount:</span> ${totalAmount}
</p>
<button className="bg-green-700 hover:bg-purple-50 rounded-lg text-white transition duration-300 ease-linear mt-5 border-2 border-green-600 font-bold hover:text-green-700 p-3 text-xl">
CheckOut Now
</button>
</div>
</div>
<div className="flex flex-col">
<p className="text-xl font-bold">
<span className="text-gray-700 font-semibold">Total Amount:</span> ${totalAmount}
</p>
<button className="bg-green-700 hover:bg-purple-50 rounded-lg text-white transition duration-300 ease-linear mt-5 border-2 border-green-600 font-bold hover:text-green-700 p-3 text-xl">
CheckOut Now
</div>
) : (
<div className="min-h-[80vh] flex flex-col items-center justify-center">
<h1 className="text-gray-700 font-semibold text-xl mb-2">Your cart is empty!</h1>
<Link to={"/shop"}>
<button className="uppercase bg-green-600 hover:bg-purple-50 rounded-lg text-white transition duration-300 ease-linear mt-5 border-2 border-green-600 font-semibold hover:text-green-700 p-3 px-10 tracking-wider">
Shop Now
</button>
</div>
</Link>
</div>
</div>
)
) : (
<div className="min-h-[80vh] flex flex-col items-center justify-center">
{userLoggedIn ? (
<>
<h1 className="text-gray-700 font-semibold text-xl mb-2">Your cart is empty!</h1>
<Link to={"/shop"}>
<button className="uppercase bg-green-600 hover:bg-purple-50 rounded-lg text-white transition duration-300 ease-linear mt-5 border-2 border-green-600 font-semibold hover:text-green-700 p-3 px-10 tracking-wider">
Shop Now
</button>
</Link>
</>
) : (
<>
<h1 className="text-gray-700 font-semibold text-xl mb-2">Please Login First!</h1>
<Link to={"/login"}>
<button className="uppercase bg-green-600 hover:bg-purple-50 rounded-lg text-white transition duration-300 ease-linear mt-5 border-2 border-green-600 font-semibold hover:text-green-700 p-3 px-10 tracking-wider">
Login Now
</button>
</Link>
</>
)}
<h1 className="text-gray-700 font-semibold text-xl mb-2">Please Login First!</h1>
<Link to={"/login"}>
<button className="uppercase bg-green-600 hover:bg-purple-50 rounded-lg text-white transition duration-300 ease-linear mt-5 border-2 border-green-600 font-semibold hover:text-green-700 p-3 px-10 tracking-wider">
Login Now
</button>
</Link>
</div>
)}
</>
Expand Down
169 changes: 168 additions & 1 deletion client/src/Pages/Profile.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Avatar, Box, Typography, Button, CircularProgress, Paper } from '@mui/material';
import { Avatar, Box, Typography, Button, CircularProgress, Paper, TextField, Grid, MenuItem,Rating } from '@mui/material';
import { deepPurple } from '@mui/material/colors';

const Profile = () => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [bookDetails, setBookDetails] = useState({
name: '',
author: '',
price: '',
description: '',
category: '',
stock: 1,
ratings:0,
shareableLink: '',
image: { public_id: '', url: '' },
});
const [formLoading, setFormLoading] = useState(false);

useEffect(() => {
const fetchUserData = async () => {
Expand All @@ -30,6 +42,43 @@ const Profile = () => {
fetchUserData();
}, []);

const handleInputChange = (e) => {
const { name, value } = e.target;
setBookDetails({
...bookDetails,
[name]: value
});
};

const handleSubmit = async (e) => {
e.preventDefault();
setFormLoading(true);
const token = localStorage.getItem('token');
try {
const response = await axios.post('http://localhost:8080/books/sell', bookDetails, {
headers: {
Authorization: `Bearer ${token}`
}
});
console.log('Book listed successfully:', response.data);
setBookDetails({
name: '',
author: '',
price: '',
description: '',
category: '',
stock: 1,
ratings:0,
shareableLink: '',
image: { public_id: '', url: '' },
});
} catch (error) {
console.error('Error listing book:', error);
} finally {
setFormLoading(false);
}
};

if (loading) {
return (
<Box className="flex justify-center items-center h-screen">
Expand Down Expand Up @@ -94,6 +143,124 @@ const Profile = () => {
Edit Profile
</Button>
</Paper>

<Paper elevation={3} className="p-6 mt-6">
<Typography variant="h5" component="h2" className="text-gray-900 font-bold mb-4">
Sell Your Old Book
</Typography>
<form onSubmit={handleSubmit}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
label="Book Name"
name="name"
value={bookDetails.name}
onChange={handleInputChange}
fullWidth
required
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Author"
name="author"
value={bookDetails.author}
onChange={handleInputChange}
fullWidth
required
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Price"
name="price"
value={bookDetails.price}
onChange={handleInputChange}
type="number"
fullWidth
required
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Description"
name="description"
value={bookDetails.description}
onChange={handleInputChange}
fullWidth
multiline
rows={4}
required
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Category"
name="category"
value={bookDetails.category}
onChange={handleInputChange}
fullWidth
required
select
>
{/* Add your categories here */}
<MenuItem value="Fiction">Fiction</MenuItem>
<MenuItem value="Non-Fiction"></MenuItem>
<MenuItem value="Romance">Romance</MenuItem>
<MenuItem value="Science">Tech/</MenuItem>
{/* Add more categories as needed */}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
label="Stock"
name="stock"
value={bookDetails.stock}
onChange={handleInputChange}
type="number"
fullWidth
required
/>
</Grid>
<Grid item xs={12}>
<Typography component="legend" name="ratings"/>
<Rating name="half-rating" defaultValue={0} precision={0.5} />



</Grid>

<Grid item xs={12}>
<TextField
label="Shareable Link"
name="shareableLink"
value={bookDetails.shareableLink}
onChange={handleInputChange}
fullWidth
required
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Image URL"
name="imageUrl"
value={bookDetails.image.url}
onChange={(e) => setBookDetails({
...bookDetails,
image: { ...bookDetails.image, url: e.target.value }
})}
fullWidth
required
/>
</Grid>
<Grid item xs={12}>
<Button variant="contained" color="primary" type="submit" fullWidth disabled={formLoading}>
{formLoading ? <CircularProgress size={24} /> : 'Submit'}
</Button>
</Grid>
</Grid>
</form>
</Paper>
</Box>
);
};
Expand Down

0 comments on commit 03bc9ec

Please sign in to comment.