Skip to content

Commit 4e8afb6

Browse files
murtazatankiwala456murtazatankiwala456
committed
add to cart API created
1 parent 5a68db0 commit 4e8afb6

File tree

6 files changed

+256
-52
lines changed

6 files changed

+256
-52
lines changed

‎data.json‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1920,5 +1920,193 @@
19201920
"email": "test2@gmail.com",
19211921
"password": "Tankiwala123"
19221922
}
1923+
],
1924+
"cart": [
1925+
{
1926+
"id": "1",
1927+
"title": "Essence Mascara Lash Princess",
1928+
"description": "The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.",
1929+
"category": "beauty",
1930+
"price": 9.99,
1931+
"discountPercentage": 7.17,
1932+
"rating": 4.94,
1933+
"stock": 5,
1934+
"tags": [
1935+
"beauty",
1936+
"mascara"
1937+
],
1938+
"brand": "Essence",
1939+
"sku": "RCH45Q1A",
1940+
"weight": 2,
1941+
"dimensions": {
1942+
"width": 23.17,
1943+
"height": 14.43,
1944+
"depth": 28.01
1945+
},
1946+
"warrantyInformation": "1 month warranty",
1947+
"shippingInformation": "Ships in 1 month",
1948+
"availabilityStatus": "Low Stock",
1949+
"reviews": [
1950+
{
1951+
"rating": 2,
1952+
"comment": "Very unhappy with my purchase!",
1953+
"date": "2024-05-23T08:56:21.618Z",
1954+
"reviewerName": "John Doe",
1955+
"reviewerEmail": "john.doe@x.dummyjson.com"
1956+
},
1957+
{
1958+
"rating": 2,
1959+
"comment": "Not as described!",
1960+
"date": "2024-05-23T08:56:21.618Z",
1961+
"reviewerName": "Nolan Gonzalez",
1962+
"reviewerEmail": "nolan.gonzalez@x.dummyjson.com"
1963+
},
1964+
{
1965+
"rating": 5,
1966+
"comment": "Very satisfied!",
1967+
"date": "2024-05-23T08:56:21.618Z",
1968+
"reviewerName": "Scarlett Wright",
1969+
"reviewerEmail": "scarlett.wright@x.dummyjson.com"
1970+
}
1971+
],
1972+
"returnPolicy": "30 days return policy",
1973+
"minimumOrderQuantity": 24,
1974+
"meta": {
1975+
"createdAt": "2024-05-23T08:56:21.618Z",
1976+
"updatedAt": "2024-05-23T08:56:21.618Z",
1977+
"barcode": "9164035109868",
1978+
"qrCode": "https://dummyjson.com/public/qr-code.png"
1979+
},
1980+
"images": [
1981+
"https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/1.png"
1982+
],
1983+
"thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/thumbnail.png",
1984+
"quantity": 1,
1985+
"user": "cb1b"
1986+
},
1987+
{
1988+
"id": "2",
1989+
"title": "Eyeshadow Palette with Mirror",
1990+
"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.",
1991+
"category": "beauty",
1992+
"price": 19.99,
1993+
"discountPercentage": 5.5,
1994+
"rating": 3.28,
1995+
"stock": 44,
1996+
"tags": [
1997+
"beauty",
1998+
"eyeshadow"
1999+
],
2000+
"brand": "Glamour Beauty",
2001+
"sku": "MVCFH27F",
2002+
"weight": 3,
2003+
"dimensions": {
2004+
"width": 12.42,
2005+
"height": 8.63,
2006+
"depth": 29.13
2007+
},
2008+
"warrantyInformation": "1 year warranty",
2009+
"shippingInformation": "Ships in 2 weeks",
2010+
"availabilityStatus": "In Stock",
2011+
"reviews": [
2012+
{
2013+
"rating": 4,
2014+
"comment": "Very satisfied!",
2015+
"date": "2024-05-23T08:56:21.618Z",
2016+
"reviewerName": "Liam Garcia",
2017+
"reviewerEmail": "liam.garcia@x.dummyjson.com"
2018+
},
2019+
{
2020+
"rating": 1,
2021+
"comment": "Very disappointed!",
2022+
"date": "2024-05-23T08:56:21.618Z",
2023+
"reviewerName": "Nora Russell",
2024+
"reviewerEmail": "nora.russell@x.dummyjson.com"
2025+
},
2026+
{
2027+
"rating": 5,
2028+
"comment": "Highly impressed!",
2029+
"date": "2024-05-23T08:56:21.618Z",
2030+
"reviewerName": "Elena Baker",
2031+
"reviewerEmail": "elena.baker@x.dummyjson.com"
2032+
}
2033+
],
2034+
"returnPolicy": "30 days return policy",
2035+
"minimumOrderQuantity": 32,
2036+
"meta": {
2037+
"createdAt": "2024-05-23T08:56:21.618Z",
2038+
"updatedAt": "2024-05-23T08:56:21.618Z",
2039+
"barcode": "2817839095220",
2040+
"qrCode": "https://dummyjson.com/public/qr-code.png"
2041+
},
2042+
"images": [
2043+
"https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/1.png"
2044+
],
2045+
"thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/thumbnail.png",
2046+
"quantity": 1,
2047+
"user": "cb1b"
2048+
},
2049+
{
2050+
"id": "3",
2051+
"title": "Powder Canister",
2052+
"description": "The Powder Canister is a finely milled setting powder designed to set makeup and control shine. With a lightweight and translucent formula, it provides a smooth and matte finish.",
2053+
"category": "beauty",
2054+
"price": 14.99,
2055+
"discountPercentage": 18.14,
2056+
"rating": 3.82,
2057+
"stock": 59,
2058+
"tags": [
2059+
"beauty",
2060+
"face powder"
2061+
],
2062+
"brand": "Velvet Touch",
2063+
"sku": "9EN8WLT2",
2064+
"weight": 8,
2065+
"dimensions": {
2066+
"width": 24.16,
2067+
"height": 10.7,
2068+
"depth": 11.07
2069+
},
2070+
"warrantyInformation": "2 year warranty",
2071+
"shippingInformation": "Ships in 1-2 business days",
2072+
"availabilityStatus": "In Stock",
2073+
"reviews": [
2074+
{
2075+
"rating": 5,
2076+
"comment": "Very happy with my purchase!",
2077+
"date": "2024-05-23T08:56:21.618Z",
2078+
"reviewerName": "Ethan Thompson",
2079+
"reviewerEmail": "ethan.thompson@x.dummyjson.com"
2080+
},
2081+
{
2082+
"rating": 4,
2083+
"comment": "Great value for money!",
2084+
"date": "2024-05-23T08:56:21.618Z",
2085+
"reviewerName": "Levi Hicks",
2086+
"reviewerEmail": "levi.hicks@x.dummyjson.com"
2087+
},
2088+
{
2089+
"rating": 5,
2090+
"comment": "Highly impressed!",
2091+
"date": "2024-05-23T08:56:21.618Z",
2092+
"reviewerName": "Hazel Gardner",
2093+
"reviewerEmail": "hazel.gardner@x.dummyjson.com"
2094+
}
2095+
],
2096+
"returnPolicy": "60 days return policy",
2097+
"minimumOrderQuantity": 25,
2098+
"meta": {
2099+
"createdAt": "2024-05-23T08:56:21.618Z",
2100+
"updatedAt": "2024-05-23T08:56:21.618Z",
2101+
"barcode": "0516267971277",
2102+
"qrCode": "https://dummyjson.com/public/qr-code.png"
2103+
},
2104+
"images": [
2105+
"https://cdn.dummyjson.com/products/images/beauty/Powder%20Canister/1.png"
2106+
],
2107+
"thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Powder%20Canister/thumbnail.png",
2108+
"quantity": 1,
2109+
"user": "cb1b"
2110+
}
19232111
]
19242112
}

‎src/app/store.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { configureStore } from "@reduxjs/toolkit";
22
import productReducer from "../features/product/productSlice";
33
import authReducer from "../features/auth/authSlice";
4+
import cartReducer from "../features/cart/cartSlice";
45

56
export const store = configureStore({
67
reducer: {
78
product: productReducer,
89
auth: authReducer,
10+
cart: cartReducer,
911
},
1012
});

‎src/features/cart/Cart.js‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,39 @@
1-
import React, { useState, Fragment } from 'react';
2-
import { useSelector, useDispatch } from 'react-redux';
3-
import { increment, incrementAsync, selectCount } from './cartSlice';
4-
import { Dialog, Transition } from '@headlessui/react';
5-
import { XMarkIcon } from '@heroicons/react/24/outline';
6-
import { Link } from 'react-router-dom';
1+
import React, { useState, Fragment } from "react";
2+
import { useSelector, useDispatch } from "react-redux";
3+
import {} from "./cartSlice";
4+
import { Dialog, Transition } from "@headlessui/react";
5+
import { XMarkIcon } from "@heroicons/react/24/outline";
6+
import { Link } from "react-router-dom";
77

88
const products = [
99
{
1010
id: 1,
11-
name: 'Throwback Hip Bag',
12-
href: '#',
13-
color: 'Salmon',
14-
price: '$90.00',
11+
name: "Throwback Hip Bag",
12+
href: "#",
13+
color: "Salmon",
14+
price: "$90.00",
1515
quantity: 1,
1616
imageSrc:
17-
'https://tailwindui.com/img/ecommerce-images/shopping-cart-page-04-product-01.jpg',
17+
"https://tailwindui.com/img/ecommerce-images/shopping-cart-page-04-product-01.jpg",
1818
imageAlt:
19-
'Salmon orange fabric pouch with match zipper, gray zipper pull, and adjustable hip belt.',
19+
"Salmon orange fabric pouch with match zipper, gray zipper pull, and adjustable hip belt.",
2020
},
2121
{
2222
id: 2,
23-
name: 'Medium Stuff Satchel',
24-
href: '#',
25-
color: 'Blue',
26-
price: '$32.00',
23+
name: "Medium Stuff Satchel",
24+
href: "#",
25+
color: "Blue",
26+
price: "$32.00",
2727
quantity: 1,
2828
imageSrc:
29-
'https://tailwindui.com/img/ecommerce-images/shopping-cart-page-04-product-02.jpg',
29+
"https://tailwindui.com/img/ecommerce-images/shopping-cart-page-04-product-02.jpg",
3030
imageAlt:
31-
'Front of satchel with blue canvas body, black straps and handle, drawstring top, and front zipper pouch.',
31+
"Front of satchel with blue canvas body, black straps and handle, drawstring top, and front zipper pouch.",
3232
},
3333
// More products...
3434
];
3535

3636
export default function Cart() {
37-
const count = useSelector(selectCount);
3837
const dispatch = useDispatch();
3938
const [open, setOpen] = useState(true);
4039

@@ -109,7 +108,7 @@ export default function Cart() {
109108
Shipping and taxes calculated at checkout.
110109
</p>
111110
<div className="mt-6">
112-
<Link
111+
<Link
113112
to="/checkout"
114113
className="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
115114
>
@@ -120,13 +119,13 @@ export default function Cart() {
120119
<p>
121120
or
122121
<Link to="/">
123-
<button
124-
type="button"
125-
className="font-medium text-indigo-600 hover:text-indigo-500"
126-
>
127-
Continue Shopping
128-
<span aria-hidden="true"> &rarr;</span>
129-
</button>
122+
<button
123+
type="button"
124+
className="font-medium text-indigo-600 hover:text-indigo-500"
125+
>
126+
Continue Shopping
127+
<span aria-hidden="true"> &rarr;</span>
128+
</button>
130129
</Link>
131130
</p>
132131
</div>

‎src/features/cart/cartAPI.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
export function fetchCount(amount = 1) {
2-
return new Promise(async (resolve) =>{
3-
const response = await fetch('http://localhost:8080')
4-
const data = await response.json()
5-
resolve({data})
6-
}
7-
);
1+
export function addToCart(item) {
2+
return new Promise(async (resolve) => {
3+
const response = await fetch("http://localhost:8080/cart", {
4+
method: "POST",
5+
body: JSON.stringify(item),
6+
headers: { "content-type": "application/json" },
7+
});
8+
const data = await response.json();
9+
// TODO:on server it will only return some info of user (not password)
10+
resolve({ data });
11+
});
812
}

‎src/features/cart/cartSlice.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
2-
import { fetchCount } from './cartAPI';
1+
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
2+
import { addToCart } from "./cartAPI";
33

44
const initialState = {
5-
value: 0,
6-
status: 'idle',
5+
items: [],
6+
status: "idle",
77
};
88

9-
export const incrementAsync = createAsyncThunk(
10-
'counter/fetchCount',
11-
async (amount) => {
12-
const response = await fetchCount(amount);
9+
export const addToCartAsync = createAsyncThunk(
10+
"cart/addToCart",
11+
async (item) => {
12+
const response = await addToCart(item);
1313
// The value we return becomes the `fulfilled` action payload
1414
return response.data;
1515
}
1616
);
1717

18-
export const counterSlice = createSlice({
19-
name: 'counter',
18+
export const cartSlice = createSlice({
19+
name: "cart",
2020
initialState,
2121
reducers: {
2222
increment: (state) => {
@@ -25,18 +25,18 @@ export const counterSlice = createSlice({
2525
},
2626
extraReducers: (builder) => {
2727
builder
28-
.addCase(incrementAsync.pending, (state) => {
29-
state.status = 'loading';
28+
.addCase(addToCartAsync.pending, (state) => {
29+
state.status = "loading";
3030
})
31-
.addCase(incrementAsync.fulfilled, (state, action) => {
32-
state.status = 'idle';
33-
state.value += action.payload;
31+
.addCase(addToCartAsync.fulfilled, (state, action) => {
32+
state.status = "idle";
33+
state.items.push(action.payload);
3434
});
3535
},
3636
});
3737

38-
export const { increment } = counterSlice.actions;
38+
export const { increment } = cartSlice.actions;
3939

40-
export const selectCount = (state) => state.counter.value;
40+
export const selectItems = (state) => state.cart.items;
4141

42-
export default counterSlice.reducer;
42+
export default cartSlice.reducer;

0 commit comments

Comments
 (0)