akarshanxyz 1.0.2 → 1.0.4

package/a8/MiniE-commerceApp(using redux)

@@ -1,49 +1,382 @@
-// productSlice.js
+import React from "react";
+import { Provider, useDispatch, useSelector } from "react-redux";
+import { configureStore, createSlice } from "@reduxjs/toolkit";
 
-import { createSlice } from "@reduxjs/toolkit";
-
-const initialState = {
-  products: [
-    {
-      id: 1,
-      title: "Handmade Vase",
-      price: 800,
-      stock: 5,
-    },
-    {
-      id: 2,
-      title: "Wooden Craft",
-      price: 1200,
-      stock: 3,
-    },
-  ],
-};
+/* ================= PRODUCT SLICE ================= */
 
 const productSlice = createSlice({
   name: "products",
-  initialState,
+  initialState: {
+    products: [
+      {
+        id: 1,
+        title: "Handmade Vase",
+        price: 800,
+        stock: 5,
+      },
+      {
+        id: 2,
+        title: "Wooden Craft",
+        price: 1200,
+        stock: 3,
+      },
+    ],
+  },
   reducers: {
     decreaseStock: (state, action) => {
       const product = state.products.find(
-        (item) => item.id === action.payload
+        (p) => p.id === action.payload
       );
 
       if (product && product.stock > 0) {
-        product.stock -= 1;
+        product.stock--;
       }
     },
 
     increaseStock: (state, action) => {
       const product = state.products.find(
-        (item) => item.id === action.payload
+        (p) => p.id === action.payload
       );
 
       if (product) {
-        product.stock += 1;
+        product.stock++;
+      }
+    },
+  },
+});
+
+/* ================= CART SLICE ================= */
+
+const cartSlice = createSlice({
+  name: "cart",
+  initialState: {
+    cartItems: [],
+    totalPrice: 0,
+  },
+
+  reducers: {
+    addToCart: (state, action) => {
+      const product = action.payload;
+
+      const existingItem = state.cartItems.find(
+        (item) => item.id === product.id
+      );
+
+      if (existingItem) {
+        existingItem.quantity++;
+      } else {
+        state.cartItems.push({
+          id: product.id,
+          title: product.title,
+          price: product.price,
+          quantity: 1,
+        });
+      }
+
+      state.totalPrice += product.price;
+    },
+
+    removeFromCart: (state, action) => {
+      const productId = action.payload;
+
+      const item = state.cartItems.find(
+        (item) => item.id === productId
+      );
+
+      if (!item) return;
+
+      state.totalPrice -= item.price;
+
+      if (item.quantity > 1) {
+        item.quantity--;
+      } else {
+        state.cartItems = state.cartItems.filter(
+          (i) => i.id !== productId
+        );
       }
     },
+
+    deleteItem: (state, action) => {
+      const productId = action.payload;
+
+      const item = state.cartItems.find(
+        (i) => i.id === productId
+      );
+
+      if (!item) return;
+
+      state.totalPrice -=
+        item.price * item.quantity;
+
+      state.cartItems = state.cartItems.filter(
+        (i) => i.id !== productId
+      );
+    },
+
+    clearCart: (state) => {
+      state.cartItems = [];
+      state.totalPrice = 0;
+    },
   },
 });
 
-export const { decreaseStock, increaseStock } = productSlice.actions;
-export default productSlice.reducer;
+/* ================= USER SLICE ================= */
+
+const userSlice = createSlice({
+  name: "user",
+
+  initialState: {
+    user: {
+      name: "Sakshi",
+      isLoggedIn: true,
+    },
+  },
+
+  reducers: {
+    login: (state, action) => {
+      state.user = {
+        name: action.payload,
+        isLoggedIn: true,
+      };
+    },
+
+    logout: (state) => {
+      state.user = {
+        name: "",
+        isLoggedIn: false,
+      };
+    },
+  },
+});
+
+/* ================= STORE ================= */
+
+const store = configureStore({
+  reducer: {
+    productReducer: productSlice.reducer,
+    cartReducer: cartSlice.reducer,
+    userReducer: userSlice.reducer,
+  },
+});
+
+const {
+  decreaseStock,
+  increaseStock,
+} = productSlice.actions;
+
+const {
+  addToCart,
+  removeFromCart,
+  deleteItem,
+  clearCart,
+} = cartSlice.actions;
+
+const {
+  login,
+  logout,
+} = userSlice.actions;
+
+/* ================= SHOP COMPONENT ================= */
+
+function Shop() {
+  const dispatch = useDispatch();
+
+  const products = useSelector(
+    (state) => state.productReducer.products
+  );
+
+  const cartItems = useSelector(
+    (state) => state.cartReducer.cartItems
+  );
+
+  const totalPrice = useSelector(
+    (state) => state.cartReducer.totalPrice
+  );
+
+  const user = useSelector(
+    (state) => state.userReducer.user
+  );
+
+  const handleAddToCart = (product) => {
+    if (product.stock === 0) {
+      alert("Out of Stock");
+      return;
+    }
+
+    dispatch(addToCart(product));
+    dispatch(decreaseStock(product.id));
+  };
+
+  const handleRemoveFromCart = (id) => {
+    dispatch(removeFromCart(id));
+    dispatch(increaseStock(id));
+  };
+
+  const handleDelete = (item) => {
+    for (let i = 0; i < item.quantity; i++) {
+      dispatch(increaseStock(item.id));
+    }
+
+    dispatch(deleteItem(item.id));
+  };
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Mini E-Commerce App</h1>
+
+      {/* USER SECTION */}
+
+      <div
+        style={{
+          border: "1px solid black",
+          padding: "10px",
+          marginBottom: "20px",
+        }}
+      >
+        <h2>User Section</h2>
+
+        {user.isLoggedIn ? (
+          <>
+            <p>
+              Logged In As:
+              <strong> {user.name}</strong>
+            </p>
+
+            <button
+              onClick={() =>
+                dispatch(logout())
+              }
+            >
+              Logout
+            </button>
+          </>
+        ) : (
+          <>
+            <p>User Not Logged In</p>
+
+            <button
+              onClick={() =>
+                dispatch(login("Sakshi"))
+              }
+            >
+              Login
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* PRODUCTS */}
+
+      <div
+        style={{
+          border: "1px solid black",
+          padding: "10px",
+          marginBottom: "20px",
+        }}
+      >
+        <h2>Products</h2>
+
+        {products.map((product) => (
+          <div
+            key={product.id}
+            style={{
+              border: "1px solid gray",
+              padding: "10px",
+              marginBottom: "10px",
+            }}
+          >
+            <h3>{product.title}</h3>
+
+            <p>Price: ₹{product.price}</p>
+
+            <p>Stock: {product.stock}</p>
+
+            <button
+              disabled={product.stock === 0}
+              onClick={() =>
+                handleAddToCart(product)
+              }
+            >
+              Add To Cart
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* CART */}
+
+      <div
+        style={{
+          border: "1px solid black",
+          padding: "10px",
+        }}
+      >
+        <h2>Cart</h2>
+
+        {cartItems.length === 0 ? (
+          <p>Cart is Empty</p>
+        ) : (
+          cartItems.map((item) => (
+            <div
+              key={item.id}
+              style={{
+                border: "1px solid gray",
+                marginBottom: "10px",
+                padding: "10px",
+              }}
+            >
+              <h3>{item.title}</h3>
+
+              <p>Price: ₹{item.price}</p>
+
+              <p>
+                Quantity: {item.quantity}
+              </p>
+
+              <button
+                onClick={() =>
+                  handleRemoveFromCart(
+                    item.id
+                  )
+                }
+              >
+                Remove One
+              </button>
+
+              <button
+                style={{
+                  marginLeft: "10px",
+                }}
+                onClick={() =>
+                  handleDelete(item)
+                }
+              >
+                Delete Item
+              </button>
+            </div>
+          ))
+        )}
+
+        <h3>Total Price: ₹{totalPrice}</h3>
+
+        <button
+          onClick={() =>
+            dispatch(clearCart())
+          }
+        >
+          Clear Cart
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ================= APP ================= */
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <Shop />
+    </Provider>
+  );
+}

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "akarshanxyz",
-  "version": "1.0.2"
+  "version": "1.0.4"
 }