2-DR2-AT.13

Author: mattolivr

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/pages/product-list/index.jsx

@@ -22,6 +22,20 @@ export default function ProductList() {
     buscaProdutos();
   }, []);
 
+  const handleExcluir = async (id) => {
+    if (!window.confirm('Tem certeza que deseja excluir este produto?')) {
+      return;
+    }
+
+    try {
+      await axios.delete(`https://dummyjson.com/products/${id}`);
+      setProdutos(produtos.filter(produto => produto.id !== id));
+      console.log('Produto excluído com sucesso');
+    } catch (error) {
+      console.error('Erro ao excluir produto:', error);
+    }
+  };
+
   if (carregando) {
     return <div className={style.carregando}>Carregando produtos...</div>;
   }
@@ -37,12 +51,20 @@ export default function ProductList() {
               </h3>
               <p className={style.preco}>Preço: R$ {produto.price.toString().replace(".", ",")}</p>
             </div>
-            <button 
-              className={style.botaoEditar}
-              onClick={() => navigate(`/novo/${produto.id}`)}
-            >
-              Editar
-            </button>
+            <div className={style.acoes}>
+              <button 
+                className={style.botaoEditar}
+                onClick={() => navigate(`/novo/${produto.id}`)}
+              >
+                Editar
+              </button>
+              <button 
+                className={style.botaoExcluir}
+                onClick={() => handleExcluir(produto.id)}
+              >
+                Excluir
+              </button>
+            </div>
           </div>
         ))
       }

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/pages/product-list/style.module.css

@@ -66,6 +66,12 @@
   color: #2c5f2d;
 }
 
+.acoes {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
 .botaoEditar {
   background-color: #2c5f2d;
   color: white;
@@ -75,13 +81,27 @@
   font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.2s;
-  flex-shrink: 0;
 }
 
 .botaoEditar:hover {
   background-color: #1f4520;
 }
 
+.botaoExcluir {
+  background-color: #d32f2f;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.botaoExcluir:hover {
+  background-color: #b71c1c;
+}
+
 .carregando {
   text-align: center;
   padding: 20px;