Add ‘Save for Later’ Functionality with Local Storage/IndexedDB

				
					console.log( 'Code is Poetry' );// App.tsx
import React, { useState, useEffect } from "react";

const DB_NAME = "ShoppingCartDB";
const STORE_NAME = "cart";
const DB_VERSION = 1;

interface Product {
  id: number;
  name: string;
  price: number;
}

interface CartItem extends Product {
  quantity: number;
}

// --- IndexedDB helpers ---
function openDB(): Promise<IDBDatabase> {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);

    request.onupgradeneeded = () => {
      const db = request.result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: "id" });
      }
    };

    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

async function saveCartItem(item: CartItem) {
  const db = await openDB();
  const tx = db.transaction(STORE_NAME, "readwrite");
  tx.objectStore(STORE_NAME).put(item);
  return tx.done;
}

async function loadCart(): Promise<CartItem[]> {
  const db = await openDB();
  return new Promise((resolve) => {
    const tx = db.transaction(STORE_NAME, "readonly");
    const req = tx.objectStore(STORE_NAME).getAll();
    req.onsuccess = () => resolve((req.result as CartItem[]) || []);
  });
}

async function clearCart() {
  const db = await openDB();
  const tx = db.transaction(STORE_NAME, "readwrite");
  tx.objectStore(STORE_NAME).clear();
  return tx.done;
}

// --- Main App ---
function App() {
  const products: Product[] = [
    { id: 1, name: "Apple", price: 2 },
    { id: 2, name: "Banana", price: 1 },
    { id: 3, name: "Orange", price: 3 },
    { id: 4, name: "Milk", price: 5 },
  ];

  const [cart, setCart] = useState<CartItem[]>([]);
  const [view, setView] = useState<"products" | "cart" | "payment">("products");

  // Load cart from DB
  useEffect(() => {
    (async () => {
      const savedCart = await loadCart();
      setCart(savedCart);
    })();
  }, []);

  const addToCart = async (product: Product) => {
    const existing = cart.find((item) => item.id === product.id);
    let updatedCart: CartItem[];

    if (existing) {
      updatedCart = cart.map((item) =>
        item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
      );
    } else {
      updatedCart = [...cart, { ...product, quantity: 1 }];
    }

    setCart(updatedCart);
    await saveCartItem(updatedCart.find((i) => i.id === product.id)!);
  };

  const handleClearCart = async () => {
    await clearCart();
    setCart([]);
  };

  const getTotal = () =>
    cart.reduce((sum, item) => sum + item.price * item.quantity, 0);

  return (
    <div style={{ padding: "20px" }}>
      <h2>Shopping Cart Example (IndexedDB)</h2>

      {/* Navigation */}
      <nav>
        <button style={{marginRight: '4px'}} onClick={() => setView("products")}>Products</button>
        <button style={{marginRight: '4px'}} onClick={() => setView("cart")}>
          Cart ({cart.reduce((sum, i) => sum + i.quantity, 0)})
        </button>
        <button onClick={() => setView("payment")}>Payment</button>
      </nav>

      <hr />

      {/* View: Products */}
      {view === "products" && (
        <div>
          <h3>Products</h3>
          <ul>
            {products.map((p) => (
              <li key={p.id}>
                {p.name} - ${p.price}{" "}
                <button onClick={() => addToCart(p)}>Add to Cart</button>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* View: Cart */}
      {view === "cart" && (
        <div>
          <h3>Your Cart</h3>
          {cart.length === 0 ? (
            <p>No items in cart.</p>
          ) : (
            <>
              <ul>
                {cart.map((item) => (
                  <li key={item.id}>
                    {item.name} x {item.quantity} = $
                    {item.price * item.quantity}
                  </li>
                ))}
              </ul>
              <p>
                <strong>Total:</strong> ${getTotal()}
              </p>
              <button onClick={handleClearCart}>Clear Cart</button>
            </>
          )}
        </div>
      )}

      {/* View: Payment */}
      {view === "payment" && (
        <div>
          <h3>Payment</h3>
          {cart.length === 0 ? (
            <p>Your cart is empty.</p>
          ) : (
            <form
              onSubmit={(e) => {
                e.preventDefault(); // prevent page reload
                alert("Payment successful!");
                handleClearCart();
              }}
            >
              <input style={{ marginBottom: '4px' }} type="text" placeholder="Card Number" required />
              <br />
              <input style={{ marginBottom: '4px' }} type="text" placeholder="Address" required />
              <br />
              <button type="submit">Pay ${getTotal()}</button>
            </form>
          )}
        </div>
      )}
    </div>
  );
}

export default App;