Skip to content

Commit 68ec831

Browse files
ndahimana154Jadowacu1
ndahimana154
and
Jadowacu1
authored
Fix order saving and displaying (#70)
* --ammend * --ammend * fixing error display in reset password (#71) * --ammend * --ammend * --ammend * --ammend --------- Co-authored-by: Niyonshuti Jean De Dieu <[email protected]>
1 parent b827b82 commit 68ec831

File tree

3 files changed

+138
-47
lines changed

3 files changed

+138
-47
lines changed

Diff for: ‎src/assets/styles/ViewCart.scss

+3-4
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,6 @@ FaCheckSquare {
207207
border-radius: 10px;
208208
padding: 1rem;
209209
margin-top: 5rem;
210-
211210
.box {
212211
p {
213212
color: $black;
@@ -237,10 +236,10 @@ FaCheckSquare {
237236

238237
.order-details {
239238
border: 2px solid $border-color;
240-
padding: 10px;
241239
border-radius: 10px;
240+
margin: 0;
242241
margin-top: 10px;
243-
242+
width: 90%;
244243
h3 {
245244
color: $primary-color;
246245
font-size: 18px;
@@ -431,7 +430,6 @@ FaCheckSquare {
431430
border: 2px solid $border-color;
432431
border-radius: 10px;
433432
padding: 5px;
434-
435433
.box {
436434
p {
437435
color: $black;
@@ -462,6 +460,7 @@ FaCheckSquare {
462460
border: 2px solid $border-color;
463461
padding: 10px;
464462
border-radius: 10px;
463+
margin: 0;
465464
margin-top: 10px;
466465

467466
h3 {

Diff for: ‎src/pages/UserViewCart.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,9 @@ const UserViewCart: React.FC = () => {
192192
const cartId = localStorage.getItem('cartToPay');
193193
const products = localStorage.getItem('productsToSave');
194194
const shopId = localStorage.getItem('shopIdToSave');
195+
console.log("Caert id", cartId);
196+
console.log("Product ", products)
197+
console.log("Shop id ", shopId)
195198
if (!cartId || !products || !shopId) {
196199
navigate('/shopping-cart');
197200
toast.error('Unknown error occurred saving order');

Diff for: ‎src/pages/UserViewOrders.tsx

+132-43
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,38 @@ const UserVIewOrders: React.FC = () => {
4848
const [orderResponseData, setOrderResponseData] = useState(null);
4949
const [isLoggedOut, setIsLoggedOut] = useState(false);
5050
const [isPreloader, setIsPreloader] = useState(false);
51+
const [cartResponseData, setCartResponseData] = useState(null);
52+
5153
const navigate = useNavigate();
5254

5355
const cartState = useAppSelector((state) => state.cart);
56+
useEffect(() => {
57+
fetchCarts();
58+
}, [dispatch]);
59+
const fetchCarts = async () => {
60+
try {
61+
setIsLoading(true);
62+
const response = await dispatch(getUserCarts());
63+
const response1 = await dispatch(getUserCarts()).unwrap();
64+
if (response.payload === 'Not authorized') {
65+
setIsLoggedOut(true);
66+
toast.error('Please login first');
67+
navigate('/login');
68+
}
69+
setCartResponseData(response1.data);
70+
setIsLoading(false);
71+
} catch (error: any) {
72+
if (error === 'Not authorized') {
73+
setIsLoggedOut(true);
74+
toast.error('Please login first');
75+
navigate('/login');
76+
}
77+
console.error('Error fetching carts:', error);
78+
setIsLoading(false);
79+
setIsError(true);
80+
toast.error(error.message);
81+
}
82+
};
5483

5584
useEffect(() => {
5685
fetchOrders();
@@ -74,7 +103,7 @@ const UserVIewOrders: React.FC = () => {
74103
console.error('Error fetching orders:', error);
75104
setIsLoading(false);
76105
setIsError(true);
77-
toast.error("Error getting orders, check your internet");
106+
toast.error('Error getting orders, check your internet');
78107
} finally {
79108
setIsLoading(false);
80109
}
@@ -102,6 +131,13 @@ const UserVIewOrders: React.FC = () => {
102131
</div>
103132
);
104133
}
134+
if (orderResponseData.length < 1) {
135+
return (
136+
<div className="error-message">
137+
<p>No orders found.</p>
138+
</div>
139+
);
140+
}
105141

106142
return (
107143
<>
@@ -126,50 +162,103 @@ const UserVIewOrders: React.FC = () => {
126162
<div className="order">
127163
{orderResponseData?.map((order) => (
128164
<React.Fragment key={order.id}>
129-
{JSON.parse(order.products).map((product, index) => (
130-
<div key={index} className="order-item">
131-
<div className="head">
132-
<div className="">Order No: {order.id.split('-')[0]}</div>
133-
<div className="">Details</div>
134-
<div className="">Placed on</div>
135-
<div className="">Status: {order.status}</div>
136-
</div>
137-
<div className="order-body">
138-
<div className="order-product">
139-
<img
140-
src={product.image}
141-
alt={product.name}
142-
className="product_img"
143-
/>
144-
<p className="o-description">
145-
<h3>{product.name}</h3>
146-
<br />
147-
<span>x{product.quantity}</span>
148-
<span className="o-price">${product.price}</span>
149-
</p>
150-
</div>
151-
<div className="order-details">
152-
<Link to={''}>View Order Details</Link>
153-
</div>
154-
<div className="date-placed">
155-
<span>{new Date(order.createdAt).toDateString()}</span>
165+
{typeof order.products === 'string'
166+
? JSON.parse(order.products).map((product, index) => (
167+
<div key={index} className="order-item">
168+
<div className="head">
169+
<div className="">
170+
Order No: {order.id.split('-')[0]}
171+
</div>
172+
<div className="">Details</div>
173+
<div className="">Placed on</div>
174+
<div className="">Status: {order.status}</div>
175+
</div>
176+
<div className="order-body">
177+
<div className="order-product">
178+
<img
179+
src={product.image}
180+
alt={product.name}
181+
className="product_img"
182+
/>
183+
<p className="o-description">
184+
<h3>{product.name}</h3>
185+
<br />
186+
<span>x{product.quantity}</span>
187+
<span className="o-price">${product.price}</span>
188+
</p>
189+
</div>
190+
<div className="order-details">
191+
<Link to={''}>View Order Details</Link>
192+
</div>
193+
<div className="date-placed">
194+
<span>
195+
{new Date(order.createdAt).toDateString()}
196+
</span>
197+
</div>
198+
<div className="track">
199+
<button
200+
className={
201+
order.status === 'Cancelled' ? 'disabled' : ''
202+
}
203+
onClick={() =>
204+
navigate(`/trackOrder/${order.id}/${product.id}`)
205+
}
206+
disabled={order.status === 'Cancelled'}
207+
>
208+
TRACK ORDER
209+
</button>
210+
</div>
211+
</div>
156212
</div>
157-
<div className="track">
158-
<button
159-
className={
160-
order.status === 'Cancelled' ? 'disabled' : ''
161-
}
162-
onClick={() =>
163-
navigate(`/trackOrder/${order.id}/${product.id}`)
164-
}
165-
disabled={order.status === 'Cancelled'}
166-
>
167-
TRACK ORDER
168-
</button>
213+
))
214+
: order.products.map((product, index) => (
215+
<div key={index} className="order-item">
216+
<div className="head">
217+
<div className="">
218+
Order No: {order.id.split('-')[0]}
219+
</div>
220+
<div className="">Details</div>
221+
<div className="">Placed on</div>
222+
<div className="">Status: {order.status}</div>
223+
</div>
224+
<div className="order-body">
225+
<div className="order-product">
226+
<img
227+
src={product.image}
228+
alt={product.name}
229+
className="product_img"
230+
/>
231+
<p className="o-description">
232+
<h3>{product.name}</h3>
233+
<br />
234+
<span>x{product.quantity}</span>
235+
<span className="o-price">${product.price}</span>
236+
</p>
237+
</div>
238+
<div className="order-details">
239+
<Link to={''}>View Order Details</Link>
240+
</div>
241+
<div className="date-placed">
242+
<span>
243+
{new Date(order.createdAt).toDateString()}
244+
</span>
245+
</div>
246+
<div className="track">
247+
<button
248+
className={
249+
order.status === 'Cancelled' ? 'disabled' : ''
250+
}
251+
onClick={() =>
252+
navigate(`/trackOrder/${order.id}/${product.id}`)
253+
}
254+
disabled={order.status === 'Cancelled'}
255+
>
256+
TRACK ORDER
257+
</button>
258+
</div>
259+
</div>
169260
</div>
170-
</div>
171-
</div>
172-
))}
261+
))}
173262
</React.Fragment>
174263
))}
175264
</div>

0 commit comments

Comments
 (0)