Skip to content

Commit 51072c9

Browse files
murtazatankiwala456murtazatankiwala456
committed
UserOrder created successfully/ (Math.ceil removed for exact calc)
1 parent d89caed commit 51072c9

File tree

11 files changed

+270
-7
lines changed

11 files changed

+270
-7
lines changed

‎data.json‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1952,7 +1952,70 @@
19521952
]
19531953
}
19541954
],
1955-
"cart": [],
1955+
"cart": [
1956+
{
1957+
"id": "efca",
1958+
"title": "Eyeshadow Palette with Mirror",
1959+
"description": "The Eyeshadow Palette with Mirror offers a versatile range of eyeshadow shades for creating stunning eye looks. With a built-in mirror, it's convenient for on-the-go makeup application.",
1960+
"category": "beauty",
1961+
"price": 19.99,
1962+
"discountPercentage": 5.5,
1963+
"rating": 3.28,
1964+
"stock": 44,
1965+
"tags": [
1966+
"beauty",
1967+
"eyeshadow"
1968+
],
1969+
"brand": "Glamour Beauty",
1970+
"sku": "MVCFH27F",
1971+
"weight": 3,
1972+
"dimensions": {
1973+
"width": 12.42,
1974+
"height": 8.63,
1975+
"depth": 29.13
1976+
},
1977+
"warrantyInformation": "1 year warranty",
1978+
"shippingInformation": "Ships in 2 weeks",
1979+
"availabilityStatus": "In Stock",
1980+
"reviews": [
1981+
{
1982+
"rating": 4,
1983+
"comment": "Very satisfied!",
1984+
"date": "2024-05-23T08:56:21.618Z",
1985+
"reviewerName": "Liam Garcia",
1986+
"reviewerEmail": "liam.garcia@x.dummyjson.com"
1987+
},
1988+
{
1989+
"rating": 1,
1990+
"comment": "Very disappointed!",
1991+
"date": "2024-05-23T08:56:21.618Z",
1992+
"reviewerName": "Nora Russell",
1993+
"reviewerEmail": "nora.russell@x.dummyjson.com"
1994+
},
1995+
{
1996+
"rating": 5,
1997+
"comment": "Highly impressed!",
1998+
"date": "2024-05-23T08:56:21.618Z",
1999+
"reviewerName": "Elena Baker",
2000+
"reviewerEmail": "elena.baker@x.dummyjson.com"
2001+
}
2002+
],
2003+
"returnPolicy": "30 days return policy",
2004+
"minimumOrderQuantity": 32,
2005+
"meta": {
2006+
"createdAt": "2024-05-23T08:56:21.618Z",
2007+
"updatedAt": "2024-05-23T08:56:21.618Z",
2008+
"barcode": "2817839095220",
2009+
"qrCode": "https://dummyjson.com/public/qr-code.png"
2010+
},
2011+
"images": [
2012+
"https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/1.png"
2013+
],
2014+
"thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/thumbnail.png",
2015+
"quantity": 1,
2016+
"user": "cb1b"
2017+
}
2018+
],
19562019
"orders": [
19572020
{
19582021
"id": "d496",

‎src/App.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { selectLoggedInUser } from "./features/auth/authSlice";
2121
import { fetchItemsByUserIdAsync } from "./features/cart/cartSlice";
2222
import PageNotFound from "./pages/404";
2323
import OrderSuccessPage from "./pages/OrderSuccessPage";
24+
import UserOrderPage from "./pages/UserOrderPage";
25+
import UserOrders from "./features/user/components/UserOrders";
2426
const router = createBrowserRouter([
2527
{
2628
path: "/",
@@ -67,6 +69,10 @@ const router = createBrowserRouter([
6769
path: "/order-success/:id",
6870
element: <OrderSuccessPage></OrderSuccessPage>,
6971
},
72+
{
73+
path: "/orders",
74+
element: <UserOrderPage></UserOrderPage>,
75+
},
7076
{
7177
path: "*",
7278
element: <PageNotFound></PageNotFound>,

‎src/app/store.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import productReducer from "../features/product/productSlice";
33
import authReducer from "../features/auth/authSlice";
44
import cartReducer from "../features/cart/cartSlice";
55
import orderReducer from "../features/order/orderSlice";
6+
import userReducer from "../features/user/userSlice";
67

78
export const store = configureStore({
89
reducer: {
910
product: productReducer,
1011
auth: authReducer,
1112
cart: cartReducer,
1213
order: orderReducer,
14+
user: userReducer,
1315
},
1416
});

‎src/features/cart/Cart.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default function Cart() {
5353
<h3>
5454
<a href={item.href}>{item.title}</a>
5555
</h3>
56-
<p className="ml-4">${Math.ceil(item.price)}</p>
56+
<p className="ml-4">${item.price}</p>
5757
</div>
5858
<p className="mt-1 text-sm text-gray-500">
5959
{item.brand}
@@ -103,7 +103,7 @@ export default function Cart() {
103103
<div className="border-t border-gray-200 px-4 py-6 sm:px-6">
104104
<div className="flex justify-between my-2 text-base font-medium text-gray-900">
105105
<p>Subtotal</p>
106-
<p>${Math.ceil(totalAmount)}</p>
106+
<p>${totalAmount}</p>
107107
</div>
108108
<div className="flex justify-between my-2 text-base font-medium text-gray-900">
109109
<p>Total Items in Cart</p>

‎src/features/navbar/Navbar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const navigation = [
2020
{ name: "Team", href: "#", current: false },
2121
];
2222
const userNavigation = [
23-
{ name: "Your Profile", link: "#" },
24-
{ name: "Settings", link: "#" },
23+
{ name: "Your Profile", link: "/profile" },
24+
{ name: "My Orders", link: "/orders" },
2525
{ name: "Sign out", link: "/login" },
2626
];
2727

‎src/features/user/UserAPI.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export function fetchLoggedInUserOrders(userId) {
2+
return new Promise(async (resolve) => {
3+
const response = await fetch(
4+
"http://localhost:8080/orders/?user.id=" + userId
5+
);
6+
const data = await response.json();
7+
8+
resolve({ data });
9+
});
10+
}

‎src/features/user/components/UserOrders.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React, { useEffect } from "react";
2+
import { useSelector, useDispatch } from "react-redux";
3+
import { fetchLoggedInUserOrderAsync, selectUserOrders } from "../userSlice";
4+
import { selectLoggedInUser } from "../../auth/authSlice";
5+
6+
export default function UserOrders() {
7+
const user = useSelector(selectLoggedInUser);
8+
const dispatch = useDispatch();
9+
const orders = useSelector(selectUserOrders);
10+
11+
useEffect(() => {
12+
dispatch(fetchLoggedInUserOrderAsync(user.id));
13+
}, []);
14+
15+
return (
16+
<div>
17+
{orders.map((order) => (
18+
<div>
19+
<div>
20+
<div className="mx-auto mt-12 bg-white max-w-7xl px-4 sm:px-6 lg:px-8">
21+
<div className="border-t border-gray-200 px-4 py-6 sm:px-6">
22+
<h1 className="text-4xl my-5 font-bold tracking-tight text-gray-900">
23+
Order # {order.id}
24+
</h1>
25+
<h2 className="text-xl my-5 font-bold tracking-tight text-red-900">
26+
Order Status : {order.status}
27+
</h2>
28+
<div className="flow-root">
29+
<ul role="list" className="-my-6 divide-y divide-gray-200">
30+
{order.items.map((item) => (
31+
<li key={item.id} className="flex py-6">
32+
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
33+
<img
34+
src={item.thumbnail}
35+
alt={item.title}
36+
className="h-full w-full object-cover object-center"
37+
/>
38+
</div>
39+
40+
<div className="ml-4 flex flex-1 flex-col">
41+
<div>
42+
<div className="flex justify-between text-base font-medium text-gray-900">
43+
<h3>
44+
<a href={item.href}>{item.title}</a>
45+
</h3>
46+
<p className="ml-4">${item.price}</p>
47+
</div>
48+
<p className="mt-1 text-sm text-gray-500">
49+
{item.brand}
50+
</p>
51+
</div>
52+
<div className="flex flex-1 items-end justify-between text-sm">
53+
<div className="text-gray-500">
54+
<label
55+
htmlFor="quantity"
56+
className="inline mr-5 text-sm font-medium leading-6 text-gray-900"
57+
>
58+
Qty:{item.quantity}
59+
</label>
60+
</div>
61+
62+
<div className="flex"></div>
63+
</div>
64+
</div>
65+
</li>
66+
))}
67+
</ul>
68+
</div>
69+
</div>
70+
71+
<div className="border-t border-gray-200 px-4 py-6 sm:px-6">
72+
<div className="flex justify-between my-2 text-base font-medium text-gray-900">
73+
<p>Subtotal</p>
74+
<p>${order.totalAmount}</p>
75+
</div>
76+
<div className="flex justify-between my-2 text-base font-medium text-gray-900">
77+
<p>Total Items in Cart</p>
78+
<p>{order.totalItems} Items</p>
79+
</div>
80+
<p className="mt-0.5 text-sm text-gray-500">Shipping Address</p>
81+
<div className="flex justify-between gap-x-6 px-5 py-5 border-solid border-2 border-gray-200">
82+
<div className="flex gap-x-4">
83+
<div className="min-w-0 flex-auto">
84+
<p className="text-sm font-semibold leading-6 text-gray-900">
85+
{order.selectedAddress.name}
86+
</p>
87+
<p className="mt-1 truncate text-xs leading-5 text-gray-500">
88+
{order.selectedAddress.street}
89+
</p>
90+
<p className="mt-1 truncate text-xs leading-5 text-gray-500">
91+
{order.selectedAddress.pinCode}
92+
</p>
93+
</div>
94+
</div>
95+
<div className="hidden sm:flex sm:flex-col sm:items-end">
96+
<p className="text-sm leading-6 text-gray-900">
97+
Phone: {order.selectedAddress.phone}
98+
</p>
99+
<p className="text-sm leading-6 text-gray-500">
100+
{order.selectedAddress.city}
101+
</p>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
))}
109+
</div>
110+
);
111+
}

‎src/features/user/components/UserProfile.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { useState } from "react";
2+
import { useSelector, useDispatch } from "react-redux";
3+
import {} from "../userSlice";
4+
5+
export default function Counter() {
6+
const count = useSelector(selectCount);
7+
const dispatch = useDispatch();
8+
9+
return (
10+
<div>
11+
<div></div>
12+
</div>
13+
);
14+
}

‎src/features/user/userSlice.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
2+
import { fetchLoggedInUserOrders } from "./UserAPI";
3+
4+
const initialState = {
5+
userOrders: [],
6+
status: "idle",
7+
};
8+
9+
export const fetchLoggedInUserOrderAsync = createAsyncThunk(
10+
"user/fetchLoggedInUserOrders",
11+
async (userId) => {
12+
const response = await fetchLoggedInUserOrders(userId);
13+
// The value we return becomes the `fulfilled` action payload
14+
console.log(response.data);
15+
return response.data;
16+
}
17+
);
18+
19+
export const userSlice = createSlice({
20+
name: "user",
21+
initialState,
22+
reducers: {
23+
increment: (state) => {
24+
state.value += 1;
25+
},
26+
},
27+
extraReducers: (builder) => {
28+
builder
29+
.addCase(fetchLoggedInUserOrderAsync.pending, (state) => {
30+
state.status = "loading";
31+
})
32+
.addCase(fetchLoggedInUserOrderAsync.fulfilled, (state, action) => {
33+
state.status = "idle";
34+
//this info can be diffrent or more than logged-in user info
35+
state.userOrders = action.payload;
36+
});
37+
},
38+
});
39+
40+
export const { increment } = userSlice.actions;
41+
export const selectUserOrders = (state) => state.user.userOrders;
42+
43+
export default userSlice.reducer;

‎src/pages/Checkout.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ function Checkout() {
379379
<h3>
380380
<a href={item.href}>{item.title}</a>
381381
</h3>
382-
<p className="ml-4">${Math.ceil(item.price)}</p>
382+
<p className="ml-4">${item.price}</p>
383383
</div>
384384
<p className="mt-1 text-sm text-gray-500">
385385
{item.brand}
@@ -429,7 +429,7 @@ function Checkout() {
429429
<div className="border-t border-gray-200 px-2 py-6 sm:px-2">
430430
<div className="flex justify-between my-2 text-base font-medium text-gray-900">
431431
<p>Subtotal</p>
432-
<p>${Math.ceil(totalAmount)}</p>
432+
<p>${totalAmount}</p>
433433
</div>
434434
<div className="flex justify-between my-2 text-base font-medium text-gray-900">
435435
<p>Total Items in Cart</p>

0 commit comments

Comments
 (0)