add to cart/delete item

Author: murtazatankiwala456

data.json

@@ -1981,7 +1981,7 @@
         "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/1.png"
       ],
       "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/thumbnail.png",
-      "quantity": 4,
+      "quantity": 1,
       "user": "cb1b"
     },
     {
@@ -2043,7 +2043,7 @@
         "https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/1.png"
       ],
       "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/thumbnail.png",
-      "quantity": 1,
+      "quantity": 3,
       "user": "cb1b"
     }
   ]

src/features/cart/Cart.js

@@ -1,6 +1,10 @@
 import React, { useState, Fragment } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { selectItems, updateCartAsync } from "./cartSlice";
+import {
+  deleteItemFromCartAsync,
+  selectItems,
+  updateCartAsync,
+} from "./cartSlice";
 import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Link } from "react-router-dom";
@@ -17,6 +21,10 @@ export default function Cart() {
   const handleQuantity = (e, item) => {
     dispatch(updateCartAsync({ ...item, quantity: +e.target.value }));
   };
+
+  const handleRemove = (e, id) => {
+    dispatch(deleteItemFromCartAsync(id));
+  };
   return (
     <>
       <div>
@@ -61,6 +69,7 @@ export default function Cart() {
                             onChange={(e) => {
                               handleQuantity(e, item);
                             }}
+                            value={item.quantity}
                           >
                             <option value="1">1</option>
                             <option value="2">2</option>
@@ -72,6 +81,9 @@ export default function Cart() {
 
                         <div className="flex">
                           <button
+                            onClick={(e) => {
+                              handleRemove(e, item.id);
+                            }}
                             type="button"
                             className="font-medium text-indigo-600 hover:text-indigo-500"
                           >

src/features/cart/cartAPI.js

@@ -1,3 +1,4 @@
+// Create
 export function addToCart(item) {
   return new Promise(async (resolve) => {
     const response = await fetch("http://localhost:8080/cart", {
@@ -10,6 +11,7 @@ export function addToCart(item) {
     resolve({ data });
   });
 }
+// Read
 export function fetchItemsByUserId(userId) {
   return new Promise(async (resolve) => {
     // TODO: we will not hard coded server url here...
@@ -18,6 +20,7 @@ export function fetchItemsByUserId(userId) {
     resolve({ data });
   });
 }
+// Update
 export function updateCart(update) {
   return new Promise(async (resolve) => {
     const response = await fetch("http://localhost:8080/cart/" + update.id, {
@@ -30,3 +33,15 @@ export function updateCart(update) {
     resolve({ data });
   });
 }
+// Delete
+export function deleteItemFromCart(itemId) {
+  return new Promise(async (resolve) => {
+    const response = await fetch("http://localhost:8080/cart/" + itemId, {
+      method: "DELETE",
+      headers: { "content-type": "application/json" },
+    });
+    const data = await response.json();
+    // TODO:on server it will only return some info of user (not password)
+    resolve({ data: { id: itemId } });
+  });
+}

src/features/cart/cartSlice.js

@@ -1,5 +1,10 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import { addToCart, fetchItemsByUserId, updateCart } from "./cartAPI";
+import {
+  addToCart,
+  fetchItemsByUserId,
+  updateCart,
+  deleteItemFromCart,
+} from "./cartAPI";
 
 const initialState = {
   items: [],
@@ -24,8 +29,16 @@ export const fetchItemsByUserIdAsync = createAsyncThunk(
 );
 export const updateCartAsync = createAsyncThunk(
   "cart/updateCart",
-  async (item) => {
-    const response = await updateCart(item);
+  async (update) => {
+    const response = await updateCart(update);
+    // The value we return becomes the `fulfilled` action payload
+    return response.data;
+  }
+);
+export const deleteItemFromCartAsync = createAsyncThunk(
+  "cart/deleteItemFromCart",
+  async (itemId) => {
+    const response = await deleteItemFromCart(itemId);
     // The value we return becomes the `fulfilled` action payload
     return response.data;
   }
@@ -64,6 +77,16 @@ export const cartSlice = createSlice({
           (item) => item.id === action.payload.id
         );
         state.items[index] = action.payload;
+      })
+      .addCase(deleteItemFromCartAsync.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(deleteItemFromCartAsync.fulfilled, (state, action) => {
+        state.status = "idle";
+        const index = state.items.findIndex(
+          (item) => item.id === action.payload.id
+        );
+        state.items.splice(index, 1);
       });
   },
 });