[UPDATE] home/editorial component

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "axios": "^1.4.0",
     "bootstrap": "^5.2.3",
+    "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",

src/App.jsx

@@ -2,21 +2,30 @@ 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 CreateEditorial from "./components/Editorial/CreateEditorial";
+import UpdateEditorial from "./components/Editorial/UpdateEditorial";
+
 import NotFound from "./utils/NotFound";
 import Footer from "./components/Footer/Footer";
 
 function App() {
+  localStorage.setItem("API", "http://localhost:4444/api/v1/book-reserve");
   return (
     <BrowserRouter>
       <div className="container">
         <Navbar />
         <Routes>
           <Route path="/" element={<Home />}></Route>
+
           <Route path="/editorial" element={<Editorial />}></Route>
+          <Route path="/editorial/create" element={<CreateEditorial />}></Route>
+          <Route path="/editorial/update/:editorialId" element={<UpdateEditorial />}></Route>
+
           <Route path="*" element={<NotFound />}></Route>
         </Routes>
-        <Footer />
+        {/* <Footer /> */}
       </div>
     </BrowserRouter>
   );

src/components/Editorial/CreateEditorial.jsx

@@ -0,0 +1,88 @@
+import React, {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import {editorialAPI} from "../../utils/routesFormat"
+import Swal from "sweetalert2";
+
+export default function CreateEditorial() {
+  const navigate = useNavigate();
+  const [editorialName, setEditorialName] = useState("");
+  const [editorialDescription, setEditorialDescription] = useState("");
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    fetch(editorialAPI, {
+      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: "Editorial agregado correctamente.",
+          showConfirmButton: false,
+          timer: 2000,
+        });
+        navigate("/editorial");
+      });
+  }
+
+  const handleCancel = () => {
+    navigate("/editorial");
+  };
+
+  return (
+    <div className="row">
+      <div className="col">
+        <form onSubmit={handleSubmit} className="border rounded">
+          <div className="form-title p-3 border-bottom">
+            <h3 className="m-0">Agregar editorial</h3>
+          </div>
+          <div className="form-body p-3 border-bottom">
+            <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>
+          </div>
+          <div className="form-footer p-3">
+            <button type="submit" className="btn btn-primary mr-2">
+              Agregar
+            </button>
+            &nbsp;
+            <button type="button" className="btn btn-secondary" onClick={handleCancel}>
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/Editorial/Editorial.jsx

@@ -0,0 +1,82 @@
+import React, {useEffect, useState} from "react";
+import {Link, useNavigate} from "react-router-dom";
+import {editorialAPI} from "../../utils/routesFormat";
+import Swal from "sweetalert2";
+import Toolbar from "../Toolbar/Toolbar";
+import Error from "../../utils/Error";
+
+export default function Editorial() {
+  const navigate = useNavigate();
+  const [error, setError] = useState(null);
+  const [editorials, setEditorials] = useState([]);
+
+  function getEditorials() {
+    fetch(editorialAPI)
+      .then((response) => response.json())
+      .then((data) => setEditorials(data))
+      .catch((error) => setError(error.message));
+  }
+
+  useEffect(() => {
+    getEditorials();
+  }, []);
+
+  return (
+    <>
+      <Toolbar toPath={"/editorial/create"} />
+      <div className="row">
+        {error && <Error message={error} />}
+        {editorials?.map((item) => (
+          <div className="col-md-4 mb-4" key={item.editorial_id}>
+            <div className="card">
+              <img src="/editorial.jpg" className="card-img-top" alt={item.editorial_name} />
+              <div className="card-body">
+                <h5 className="card-title">
+                  {item.editorial_id} - {item.editorial_name}
+                </h5>
+                <p className="card-text">{item.editorial_description}</p>
+                <Link to={`/editorial/update/${item.editorial_id}`} className="btn btn-warning">
+                  <i className="fa-solid fa-edit"></i>
+                </Link>
+                &nbsp;
+                <button className="btn btn-danger" onClick={() => deleteEditorial(item.editorial_id)}>
+                  <i className="fa-solid fa-trash"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+
+  function deleteEditorial(editorial_id) {
+    Swal.fire({
+      title: "¿Estás seguro de eliminar este editorial?",
+      text: `Estás a punto de eliminar el editorial con el identificador #${editorial_id}. ¿Estás seguro de que deseas continuar? Esta acción no se puede deshacer. Por favor, asegúrate de que esta sea la acción que deseas tomar antes de proceder.`,
+      icon: "question",
+      showCancelButton: true,
+      cancelButtonText: "Cancelar",
+      confirmButtonText: "Aceptar",
+      confirmButtonColor: "#20515C",
+      reverseButtons: true,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        fetch(editorialAPI + `/${editorial_id}`, {method: "DELETE"})
+          .then((response) => response.json())
+          .then((data) => console.log(data))
+          .catch((error) => console.log(error.message))
+          .finally(() => {
+            Swal.fire({
+              icon: "success",
+              title: "Editorial eliminado",
+              text: "Editorial eliminado correctamente.",
+              showConfirmButton: false,
+              timer: 2000,
+            });
+            navigate("/editorial");
+          });
+      }
+    });
+  }
+}