[ADD] fetch post editorial

package.json

@@ -16,7 +16,8 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.0"
+    "react-router-dom": "^6.11.0",
+    "sweetalert2": "^11.7.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/components/Editorial/Editorial.jsx

@@ -1,17 +1,51 @@
-import React from "react";
+import React, {useState} from "react";
+import Swal from "sweetalert2";
 
-import Error from "../Handle/Error";
-import Loading from "../Handle/Loading";
-import {getEditorials} from "../API/EditorialAPI";
+import Error from "../../utils/Error";
+import Loading from "../../utils/Loading";
+import {useFetch} from "../../utils/useFetch";
+import Modal from "../Modal/Modal";
 
 export default function Editorial() {
-  const {data, loading, error} = getEditorials();
+  let url = `http://localhost:4444/api/v1/book-reserve/editorials`;
+  const {data, loading, error} = useFetch(url);
+
+  const [editorialId, setEditorialId] = useState(null);
+  const [editorialName, setEditorialName] = useState("");
+  const [editorialDescription, setEditorialDescription] = useState("");
+
+  function addEditorial(e) {
+    e.preventDefault();
+    fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        name: editorialName,
+        description: editorialDescription,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => console.log(data))
+      .catch((error) => console.log(error.message))
+      .finally(() =>
+        Swal.fire({
+          icon: "success",
+          title: "Editorial agregado",
+          text: `${editorialName}`,
+          showConfirmButton: false,
+          timer: 1500,
+        })
+      );
+  }
+
   return (
     <>
       {/* start-toolbar */}
       <div className="row">
         <div className="col-12 mb-4 text-center">
-          <button className="btn btn-dark">
+          <button className="btn btn-dark" data-bs-toggle="modal" data-bs-target="#addEditorial">
             <i className="fa-solid fa-circle-plus"></i> Añadir
           </button>
         </div>
@@ -41,6 +75,42 @@ export default function Editorial() {
         ))}
       </div>
       {/* end-content */}
+      {/* start-modal */}
+      <Modal
+        id="addEditorial"
+        title="Agregar editorial"
+        textbtn="Agregar"
+        submit={addEditorial}
+        body={
+          <>
+            <div className="mb-3">
+              <label className="form-label">Nombre</label>
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Nombre"
+                required
+                onChange={(e) => {
+                  setEditorialName(e.target.value);
+                }}
+              />
+            </div>
+            <div className="mb-3">
+              <label className="form-label">Descripción</label>
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Descripción"
+                required
+                onChange={(e) => {
+                  setEditorialDescription(e.target.value);
+                }}
+              />
+            </div>
+          </>
+        }
+      />
+      {/* end-modal */}
     </>
   );
 }

src/components/Home/Home.jsx

@@ -1,8 +1,7 @@
 import React from "react";
-import {useFetch} from "../../useFetch";
-
-import Error from "../Handle/Error";
-import Loading from "../Handle/Loading";
+import Error from "../../utils/Error";
+import Loading from "../../utils/Loading";
+import {useFetch} from "../../utils/useFetch";
 
 export default function Home() {
   const {data, loading, error} = useFetch("https://rickandmortyapi.com/api/character");

src/components/Modal/Modal.jsx

@@ -12,10 +12,10 @@ export default function Modal({id, title, textbtn, body, submit}) {
           <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">
+              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
                 Cerrar
               </button>
-              <button type="submit" className="btn primary btn-sm px-4">
+              <button type="submit" className="btn btn-primary">
                 {textbtn}
               </button>
             </div>