Reactjs – Using signals with localstorage for a simple shopping cart – component not reacting to signal

import { signal, effect } from '@preact/signals-react';

const initialCart = JSON.parse(localStorage.getItem('cart')) || [];
const initialTotalAmount = JSON.parse(localStorage.getItem('totalAmount')) || 0;

export const cart = signal(initialCart);
export const totalAmount = signal(initialTotalAmount);

export const addToCart = (item) => {
  const newCart = [...cart.value];
  const existingItem = newCart.find(cartItem => cartItem.id === item.id);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    newCart.push({ ...item, quantity: 1 });
  }
  cart.value = newCart;
  calculateTotal();
};

export const removeFromCart = (itemId) => {
  cart.value = cart.value.filter(item => item.id !== itemId);
  calculateTotal();
};

export const updateQuantity = (itemId, quantity) => {
  const newCart = [...cart.value];
  const item = newCart.find(item => item.id === itemId);
  if (item) {
    item.quantity = quantity;
  }
  cart.value = newCart;
  calculateTotal();
};

export const clearCart = () => {
  cart.value = [];
  totalAmount.value = 0;
};

export const calculateTotal = () => {
  totalAmount.value = cart.value.reduce((acc, item) => {
    const itemTotal = parseFloat(item.attributes.price) * item.quantity;
    return acc + itemTotal;
  }, 0);
};

effect(() => {
  localStorage.setItem('cart', JSON.stringify(cart.value));
});

effect(() => {
  localStorage.setItem('totalAmount', JSON.stringify(totalAmount.value));
});

'use client';

import React, { useEffect, useState } from 'react';
import { Container, Typography, Card, CardContent, CardMedia, Button, Grid } from '@mui/material';
import { fetchMenuItems } from '../../lib/api';
import { addToCart } from '../../signals/cart';

const Menu = () => {
  const [menuItems, setMenuItems] = useState([]);

  useEffect(() => {
    const getMenuItems = async () => {
      try {
        const items = await fetchMenuItems();
        setMenuItems(items.data);
      } catch (error) {
        console.error("Error fetching menu items:", error);
      }
    };

    getMenuItems();
  }, []);

  return (
    <Container maxWidth="lg">
      <Typography variant="h4" gutterBottom>Menu</Typography>
      <Grid container spacing={4}>
        {menuItems.map((item) => (
          <Grid item key={item.id} xs={12} sm={6} md={4}>
            <Card>
              <CardMedia
                component="img"
                height="140"
                image={`http://localhost:1337${item.attributes.image.data.attributes.url}`}
                alt={item.attributes.name}
              />
              <CardContent>
                <Typography variant="h5">{item.attributes.name}</Typography>
                <Typography variant="body2" color="textSecondary">{item.attributes.description}</Typography>
                <Typography variant="h6">${item.attributes.price}</Typography>
                <Typography variant="body2">Size: {item.attributes.size}</Typography>
                <div>
                  <Button variant="contained" color="primary" onClick={() => addToCart(item)}>Add to Cart</Button>
                </div>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Container>
  );
};

export default Menu;

'use client';

import React, { useEffect } from 'react';
import { Container, Typography, List, ListItem, ListItemText, IconButton, Button } from '@mui/material';
import { cart, totalAmount, removeFromCart, updateQuantity, clearCart } from '../../signals/cart';
import { useComputed } from '@preact/signals-react';

const Cart = () => {
  const cartItems = useComputed(() => cart.value);
  const total = useComputed(() => totalAmount.value);

  const handleIncreaseQuantity = (id) => {
    const item = cartItems.value.find(item => item.id === id);
    if (item) {
      updateQuantity(id, item.quantity + 1);
    }
  };

  const handleDecreaseQuantity = (id) => {
    const item = cartItems.value.find(item => item.id === id);
    if (item && item.quantity > 1) {
      updateQuantity(id, item.quantity - 1);
    }
  };

  useEffect(() => {
    // Debug log to verify the totalAmount and cartItems values
    console.log("Cart Items:", cartItems.value);
    console.log("Total Amount:", total);
  }, [cartItems, total]);

  return (
    <Container maxWidth="sm">
      <Typography variant="h4" gutterBottom>Shopping Cart</Typography>
      <List>
        {cartItems.value.length > 0 ? (
          cartItems.value.map((item) => (
            <ListItem key={item.id} divider>
              <ListItemText
                primary={item.attributes.name}
                secondary={`Price: $${item.attributes.price} x Quantity: ${item.quantity}`}
              />
              <div>
                <IconButton edge="start" aria-label="decrease" onClick={() => handleDecreaseQuantity(item.id)}>
                  ➖
                </IconButton>
                <IconButton edge="end" aria-label="increase" onClick={() => handleIncreaseQuantity(item.id)}>
                  ➕
                </IconButton>
                <IconButton edge="end" aria-label="delete" onClick={() => removeFromCart(item.id)}>
                  🗑️
                </IconButton>
              </div>
            </ListItem>
          ))
        ) : (
          <Typography variant="h6">Your cart is empty.</Typography>
        )}
      </List>
      <Typography variant="h6">Total: ${total}</Typography>
      <Button variant="contained" color="primary" href="/checkout">Proceed to Checkout</Button>
      <Button variant="contained" color="secondary" onClick={clearCart}>Clear Cart</Button>
    </Container>
  );
};

export default Cart;