the ProductList.js is "import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts, deleteProductById, updateProductById } from '../features/products/productSlice'; // Adjust the path as needed
import { Box, Card, CardContent, CardMedia, Grid, Typography, Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField } from '@mui/material';

const backendURL = 'http://localhost:8000';

const ProductList = () => {
  const dispatch = useDispatch();
  const { products, loading, error } = useSelector((state) => state.products);

  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [productToDelete, setProductToDelete] = useState(null);
  const [productToEdit, setProductToEdit] = useState(null);
  const [editedProduct, setEditedProduct] = useState({
    product_Name: '',
    product_Description: '',
    product_Price: '',
    product_Stock: '',
    product_isSale: '',
    category_Name:'',
    imageGallery_Id:'',
    images: [],
  });

  useEffect(() => {
    dispatch(fetchProducts());
  }, [dispatch]);

  const handleDeleteClick = (productId) => {
    setProductToDelete(productId);
    setDeleteDialogOpen(true);
  };

  const handleDeleteConfirm = () => {
    if (productToDelete !== null) {
      dispatch(deleteProductById(productToDelete));
      setDeleteDialogOpen(false);
    }
  };

  const handleDeleteCancel = () => {
    setDeleteDialogOpen(false);
    setProductToDelete(null);
  };

  const handleEditClick = (product) => {
    setProductToEdit(product.product_Id);
    setEditedProduct({
      product_Name: product.product_Name,
      product_Description: product.product_Description,
      product_Price: product.product_Price,
      product_Stock: product.product_Stock,
      product_isSale: product.product_isSale,
      category_Name: product.product_category.category_Name,
      imageGallery_Id: product.imageGallery.id,
      images: [
        `${backendURL}${product.imageGallery?.image1}`,
        `${backendURL}${product.imageGallery?.image2}`,
        `${backendURL}${product.imageGallery?.image3}`,
        `${backendURL}${product.imageGallery?.image4}`,
      ],
    });
    console.log("AAAAA");
    console.log(product.imageGallery.id);
    console.log(productToEdit);
    setEditDialogOpen(true);
  };

  const handleEditChange = (event) => {
    const { name, value } = event.target;
    setEditedProduct({ ...editedProduct, [name]: value });
  };

  const handleEditConfirm = () => {
    console.log("CCCCBBBB");
    console.log("LLLL"+productToEdit);
    console.log(editedProduct);
    if (productToEdit !== null) {
      dispatch(updateProductById({ productId: productToEdit, ...editedProduct }));
      setEditDialogOpen(false);
    }
  };

  const handleEditCancel = () => {
    setEditDialogOpen(false);
    setProductToEdit(null);
  };

  if (loading) {
    return <div>Loading…</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <Box sx={{ flexGrow: 1, padding: 2 }}>
      <Grid container spacing={3}>
        {products.map((product) => (
          <Grid item xs={12} sm={6} md={4} lg={3} key={product.product_Id}>
            <Card>
              <CardMedia
                component="img"
                height="200"
                image={`${backendURL}${product.imageGallery?.image1}` || ""}
                alt={product.product_Name}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {product.product_Name}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {product.product_Description}
                </Typography>
                <Typography variant="h6" color="text.primary" sx={{ marginTop: 2 }}>
                  ${product.product_Price}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Stock: {product.product_Stock}
                </Typography>
                <Typography variant="body2" color={product.product_isSale === 'Yes' ? 'green' : 'red'}>
                  {product.product_isSale === 'Yes' ? 'On Sale' : 'Not on Sale'}
                </Typography>
                <Button
                  variant="outlined"
                  color="primary"
                  sx={{ marginTop: 2 }}
                  onClick={() => handleEditClick(product)}
                >
                  Edit
                </Button>
                <Button
                  variant="outlined"
                  color="secondary"
                  sx={{ marginTop: 2, marginLeft: 1 }}
                  onClick={() => handleDeleteClick(product.product_Id)}
                >
                  Delete
                </Button>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
      <Dialog open={deleteDialogOpen} onClose={handleDeleteCancel}>
        <DialogTitle>Confirm Delete</DialogTitle>
        <DialogContent>
          <DialogContentText>Are you sure you want to delete this product?</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleDeleteCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleDeleteConfirm} color="secondary">
            Delete
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog open={editDialogOpen} onClose={handleEditCancel}>
        <DialogTitle>Edit Product</DialogTitle>
        <DialogContent>
          <TextField
            margin="dense"
            name="product_Name"
            label="Product Name"
            type="text"
            fullWidth
            value={editedProduct.product_Name}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_Description"
            label="Product Description"
            type="text"
            fullWidth
            value={editedProduct.product_Description}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_Price"
            label="Product Price"
            type="number"
            fullWidth
            value={editedProduct.product_Price}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_Stock"
            label="Product Stock"
            type="number"
            fullWidth
            value={editedProduct.product_Stock}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_isSale"
            label="Is Sale?"
            type="text"
            fullWidth
            value={editedProduct.product_isSale}
            onChange={handleEditChange}
          />
        {editedProduct.images.map((imageUrl, index) => (
          <img
            key={index}
            src={imageUrl}
            alt={`Product Image ${index + 1}`}
            className=""
          />
        ))}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleEditCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleEditConfirm} color="secondary">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default ProductList;
", the image in the edit page is too large, please make smaller to shown in the popup page