[DELETE] toolbar and buttoms components

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
+    "axios": "^1.4.0",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",

src/App.jsx

@@ -2,6 +2,7 @@ import {Routes, Route, BrowserRouter} from "react-router-dom";
 
 import Navbar from "./components/Navbar/Navbar";
 import Home from "./components/Home/Home";
+import Editorial from "./components/Editorial/Editorial";
 import Footer from "./components/Footer/Footer";
 
 function App() {
@@ -11,6 +12,7 @@ function App() {
         <Navbar />
         <Routes>
           <Route path="/" element={<Home />}></Route>
+          <Route path="/editorial" element={<Editorial />}></Route>
         </Routes>
         <Footer />
       </div>

src/components/API/EditorialAPI.jsx

@@ -0,0 +1,31 @@
+import {useState, useEffect} from "react";
+
+export function getEditorials() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    setLoading(true);
+    fetch(`http://localhost:4444/api/v1/book-reserve/editorials`)
+      .then((response) => response.json())
+      .then((data) => setData(data))
+      .catch((error) => setError(error.message))
+      .finally(() => setLoading(false));
+  }, []);
+  return {data, loading, error};
+}
+
+export function getEditorialById(editorialId) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    setLoading(true);
+    fetch(`http://localhost:4444/api/v1/book-reserve/editorials/${editorialId}`)
+      .then((response) => response.json())
+      .then((data) => setData(data))
+      .catch((error) => setError(error.message))
+      .finally(() => setLoading(false));
+  }, []);
+  return {data, loading, error};
+}

src/components/Editorial/Editorial.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import Error from "../Handle/Error";
+import Loading from "../Handle/Loading";
+import {getEditorials} from "../API/EditorialAPI";
+
+export default function Editorial() {
+  const {data, loading, error} = getEditorials();
+  return (
+    <>
+      {/* start-toolbar */}
+      <div className="row">
+        <div className="col-12 mb-4 text-center">
+          <button className="btn btn-dark">
+            <i className="fa-solid fa-circle-plus"></i> Añadir
+          </button>
+        </div>
+      </div>
+      {/* end-toolbar */}
+      {/* start-content */}
+      <div className="row">
+        {error && <Error message={error} />}
+        {loading && <Loading />}
+        {data?.map((result, index) => (
+          <div className="col-md-4 mb-4" key={result.editorial_id}>
+            <div className="card">
+              {/* <img src={result.image} className="card-img-top" alt={result.editorial_name} /> */}
+              <div className="card-body">
+                <h5 className="card-title">{result.editorial_name}</h5>
+                <p className="card-text">{result.editorial_description}</p>
+                <button className="btn btn-warning">
+                  <i className="fa-solid fa-edit"></i>
+                </button>
+                &nbsp;
+                <button className="btn btn-danger">
+                  <i className="fa-solid fa-trash"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* end-content */}
+    </>
+  );
+}

src/components/Home/Home.jsx

@@ -1,21 +1,23 @@
-import React, {useState} from "react";
-
-import Toolbar from "../Toolbar/Toolbar";
-import ButtonToUpdate from "../Button/ButtonToUpdate";
-import ButtonToDelete from "../Button/ButtonToDelete";
+import React from "react";
+import {useFetch} from "../../useFetch";
 
 import Error from "../Handle/Error";
 import Loading from "../Handle/Loading";
 
-import {useFetch} from "../../useFetch";
-import MyVerticallyCenteredModal from "../Modal/Modal";
-
 export default function Home() {
   const {data, loading, error} = useFetch("https://rickandmortyapi.com/api/character");
-  const [modalIsOpen, setModalIsOpen] = useState(false);
   return (
     <>
-      <Toolbar />
+      {/* start-toolbar */}
+      <div className="row">
+        <div className="col-12 mb-4 text-center">
+          <button className="btn btn-dark">
+            <i className="fa-solid fa-circle-plus"></i> Añadir
+          </button>
+        </div>
+      </div>
+      {/* end-toolbar */}
+      {/* start-content */}
       <div className="row">
         {error && <Error message={error} />}
         {loading && <Loading />}
@@ -28,16 +30,19 @@ export default function Home() {
                 <p className="card-text">
                   {character.status}, {character.species}, {character.gender}
                 </p>
-                <ButtonToUpdate />
+                <button className="btn btn-warning">
+                  <i className="fa-solid fa-edit"></i>
+                </button>
                 &nbsp;
-                <ButtonToDelete />
+                <button className="btn btn-danger">
+                  <i className="fa-solid fa-trash"></i>
+                </button>
               </div>
             </div>
           </div>
         ))}
       </div>
-
-      <MyVerticallyCenteredModal show={modalIsOpen} onHide={() => setModalIsOpen(false)} />
+      {/* end-content */}
     </>
   );
 }

src/components/Modal/Modal.jsx

@@ -1,20 +1,27 @@
-import Button from "react-bootstrap/Button";
-import Modal from "react-bootstrap/Modal";
+import React from "react";
 
-export default function MyVerticallyCenteredModal(props) {
+export default function Modal({id, title, textbtn, body, submit}) {
   return (
-    <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">Modal heading</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <h4>Centered Modal</h4>
-        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button variant="secondary">Cerrar</Button>
-        <Button variant="primary">Guardar</Button>
-      </Modal.Footer>
-    </Modal>
+    <div className="modal fade" id={id}>
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h4 className="modal-title">{title}</h4>
+            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <form onSubmit={submit}>
+            <div className="modal-body">{body}</div>
+            <div className="modal-footer">
+              <button type="button" className="btn secondary btn-sm px-4" data-bs-dismiss="modal">
+                Cerrar
+              </button>
+              <button type="submit" className="btn primary btn-sm px-4">
+                {textbtn}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
   );
 }

src/components/Navbar/Navbar.jsx

@@ -22,7 +22,7 @@ export default function Navbar() {
                 </a>
               </li>
               <li className="nav-item">
-                <a className="nav-link" href="#">
+                <a className="nav-link" href="/editorial">
                   Editorial
                 </a>
               </li>