2-DR2-TP2.11

Author: mattolivr

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/App.jsx

@@ -11,6 +11,8 @@ function App() {
     { titulo: "O Senhor dos Anéis", autor: "J.R.R. Tolkien", ano: 1954 }
   ]);
 
+  const [livroEditando, setLivroEditando] = useState(null);
+
   const adicionarLivro = (novoLivro) => {
     setLivros([...livros, novoLivro]);
   };
@@ -19,12 +21,32 @@ function App() {
     setLivros(livros.filter((_, i) => i !== index));
   };
 
+  const editarLivro = (index) => {
+    setLivroEditando({ ...livros[index], index });
+  };
+
+  const atualizarLivro = (livroAtualizado) => {
+    setLivros(livros.map((livro, i) => 
+      i === livroEditando.index ? livroAtualizado : livro
+    ));
+    setLivroEditando(null);
+  };
+
   return (
     <>
       <Header />
       <main>
-        <BookForm onAddBook={adicionarLivro} />
-        <BookList livros={livros} onRemoveBook={removerLivro} />
+        <BookForm 
+          onAddBook={adicionarLivro} 
+          onUpdateBook={atualizarLivro}
+          livroEditando={livroEditando}
+          onCancelEdit={() => setLivroEditando(null)}
+        />
+        <BookList 
+          livros={livros} 
+          onRemoveBook={removerLivro}
+          onEditBook={editarLivro}
+        />
       </main>
     </>
   )

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/bookform/index.jsx

@@ -1,27 +1,52 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./styles.css";
 
-export default function BookForm({ onAddBook }) {
+export default function BookForm({ onAddBook, onUpdateBook, livroEditando, onCancelEdit }) {
   const [titulo, setTitulo] = useState("");
   const [autor, setAutor] = useState("");
   const [ano, setAno] = useState("");
 
+  useEffect(() => {
+    if (livroEditando) {
+      setTitulo(livroEditando.titulo);
+      setAutor(livroEditando.autor);
+      setAno(livroEditando.ano.toString());
+    }
+  }, [livroEditando]);
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
     if (titulo && autor && ano) {
-      onAddBook({ 
-        titulo, 
-        autor, 
-        ano: Number(ano) 
-      });
+      if (livroEditando) {
+        onUpdateBook({ 
+          titulo, 
+          autor, 
+          ano: Number(ano) 
+        });
+      } else {
+        onAddBook({ 
+          titulo, 
+          autor, 
+          ano: Number(ano) 
+        });
+      }
 
       setTitulo("");
       setAutor("");
       setAno("");
     }
   };
 
+  const handleCancel = () => {
+    setTitulo("");
+    setAutor("");
+    setAno("");
+    if (livroEditando) {
+      onCancelEdit();
+    }
+  };
+
   return (
     <form className="book-form" onSubmit={handleSubmit}>
       <div className="form-row">
@@ -60,7 +85,12 @@ export default function BookForm({ onAddBook }) {
       </div>
 
       <div className="button-container">
-        <button type="submit">Adicionar Livro</button>
+        <button type="button" className="btn-cancelar" onClick={handleCancel}>
+          {livroEditando ? "Cancelar" : "Limpar"}
+        </button>
+        <button type="submit">
+          {livroEditando ? "Atualizar Livro" : "Adicionar Livro"}
+        </button>
       </div>
     </form>
   )

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/bookform/styles.css

@@ -12,6 +12,9 @@
   .button-container {
     display: flex;
     justify-content: center;
+    gap: 12px;
+    width: 80%;
+    margin: 0 auto;
   }
 
   button {
@@ -23,12 +26,20 @@
     cursor: pointer;
     font-size: 16px;
     font-weight: 500;
-    width: 50%;
+    flex: 1;
 
     &:hover {
       background-color: #6b8f5a;
     }
   }
+
+  .btn-cancelar {
+    background-color: #6b6b6b;
+
+    &:hover {
+      background-color: #7a7a7a;
+    }
+  }
 }
 
 .form-group {

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/booklist/index.jsx

@@ -1,6 +1,6 @@
 import "./styles.css";
 
-export default function BookList({ livros, onRemoveBook }) {
+export default function BookList({ livros, onRemoveBook, onEditBook }) {
   return (
     <table>
       <thead>
@@ -18,6 +18,12 @@ export default function BookList({ livros, onRemoveBook }) {
             <td>{livro.autor}</td>
             <td>{livro.ano}</td>
             <td>
+              <button 
+                className="btn-editar" 
+                onClick={() => onEditBook(index)}
+              >
+                Editar
+              </button>
               <button 
                 className="btn-excluir" 
                 onClick={() => onRemoveBook(index)}

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/booklist/styles.css

@@ -67,3 +67,19 @@ table {
     background-color: #c05555;
   }
 }
+
+.btn-editar {
+  background-color: #4a6aa8;
+  color: #f8f4f0;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin-right: 8px;
+
+  &:hover {
+    background-color: #5580c0;
+  }
+}