add refactor to home, services, ServiceForm components and index.css …

…file b00tc4mp#403
benjo12 · Mar 21, 2024 · 87a7700 · 87a7700
1 parent 8537969
commit 87a7700
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 92 deletions.
diff --git a/staff/benjamin-mayiba/project/app/src/components/ServiceForm.jsx b/staff/benjamin-mayiba/project/app/src/components/ServiceForm.jsx
@@ -15,7 +15,7 @@ export default function ServiceForm(){
             await logic.createService(name, description)
             setName('') 
             setDescription('')
-            //props.onCreateService()
+
         } catch (error) {
             setError("Error : " + error.message);
         }

diff --git a/staff/benjamin-mayiba/project/app/src/components/Services.jsx b/staff/benjamin-mayiba/project/app/src/components/Services.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import logic from "../logic";
 import context from "../logic/context";
-import EventForm from "./EventForm";
 import ServiceForm from "./ServiceForm"; // Importa el componente ServiceForm
 import { FaTrash, FaSignOutAlt } from 'react-icons/fa'; // Importa el ícono de eliminación de react-icons
 import { useNavigate } from "react-router-dom";
@@ -13,7 +12,7 @@ function Services(props) {
   const [showServiceForm, setShowServiceForm] = useState(false); // Estado para controlar la visibilidad del formulario de servicio
   const [error, setError] = useState(null); // Estado para almacenar el mensaje de error
   const[message, setMessage] = useState(null)
-  const userId = context.token; // Obtén el userId de tu lógica de autenticación
+  const userId = context.token; // Obtén el userId de la lógica de autenticación
 
   const navigate = useNavigate();
 
@@ -59,9 +58,7 @@ function Services(props) {
 
   // Función para manejar el clic en el botón "Add Service"
   const handleAddServiceClick = () => {
-    // setShowServiceForm(true); // Mostrar el formulario de servicio al hacer clic en "Add Service"
-    // setError(null)
-    // setMessage(null)
+
     navigate("/addService")
   };
 

diff --git a/staff/benjamin-mayiba/project/app/src/index.css b/staff/benjamin-mayiba/project/app/src/index.css
@@ -102,9 +102,13 @@ a {
  @apply ml-2.5;    
 }
 
-.btn-services,.btn-logout{
+.btn-services{
   @apply flex justify-between;
 }
+
+.btn-services button:first-child {
+  @apply mr-[40px]; 
+}
  .btn-cancel{
   @apply ml-[175px];
 }

diff --git a/staff/benjamin-mayiba/project/app/src/pages/Home.jsx b/staff/benjamin-mayiba/project/app/src/pages/Home.jsx
@@ -13,82 +13,17 @@ export default function Home(props) {
   // Estados locales del componente
   const [name, setName] = useState(null);
   const [events, setEvents] = useState([]);
-  const [message, setMessage] = useState("");
+  const [message, setMessage] = useState(""); // Estado para almacenar el mensaje cuando no hay eventos
 
   const [showMessage, setShowMessage] = useState(true); // Controla la visibilidad del mensaje
   const [showEventForm, setShowEventForm] = useState(false);
   const [services, setServices] = useState([]); // Estado para almacenar la lista de servicios
-  const [submitted, setSubmitted] = useState(false);
-  const [error, setError] = useState(false);
+  const [submitted, setSubmitted] = useState(false); // Estado para controlar la creacion de eventos
+  const [error, setError] = useState(false); // Estado para almacenar los mensajes de error
 
   // Hook de navegación para cambiar entre rutas
   const navigate = useNavigate();
 
-  // Nos quedamos en la home despues del cambio de correo o contraseña
-  const handleChangeEmail = () => {
-    navigate("/");
-  };
-
-  const handleChangePassword = () => {
-    navigate("/");
-  };
-
-  // Función para manejar el clic en el botón "Add Event" del footer
-  const handleAddEventClick = async () => {
-    setShowMessage(false);
-    setSubmitted(false);
-    setError(false);
-
-    try {
-      // Obtener la lista de servicios antes de abrir el formulario
-      const fetchedServices = await logic.retrieveServices();
-      setServices(fetchedServices);
-    } catch (error) {
-      setError("Failed to fetch services:", error.message);
-      return; // Impedir la navegación si los servicios no se recuperan
-    }
-
-    // Mostrar el formulario de creación de evento y navegar a la ruta correspondiente
-    setShowEventForm(true);
-    navigate("/addEvent");
-  };
-
-  // Función para manejar la creación de un evento
-  const handleCreateEvent = async (serviceId, date, time) => {
-    try {
-      // Crear el evento asociado al servicio
-      await logic.createEvent(serviceId, date, time);
-      console.log("Event successfully created for service with ID:", serviceId);
-      setSubmitted(true); // Set submitted state to true
-      // Ocultar el formulario de creación de evento
-      setShowEventForm(false);
-    } catch (error) {
-      setShowEventForm(false);
-      setError(error.message);
-    }
-  };
-
-  // Función para manejar el cierre de sesión
-  const handleLogout = () => {
-    props.onLogout();
-  };
-
-  // Función para mostrar la lista de servicios
-  const handleShowServices = () => {
-    navigate("/services");
-    setShowMessage(false); // Oculta el mensaje al cambiar de página
-    setSubmitted(false);
-    setError(false);
-  };
-
-  // Función para mostrar el perfil del usuario
-  const handleProfileClick = () => {
-    navigate("/profile");
-    setShowMessage(false);
-    setSubmitted(false);
-    setError(false);
-  };
-
   // Efecto para cargar los datos iniciales al montar el componente
   useEffect(() => {
     (async () => {
@@ -118,7 +53,7 @@ export default function Home(props) {
     handleShowEvents();
   }, []);
 
-  // Función para mostrar la lista de eventos
+  // Función para mostrar eventos
   const handleShowEvents = async () => {
     navigate("/events");
     setSubmitted(false);
@@ -140,22 +75,20 @@ export default function Home(props) {
     }
   };
 
-  // Llamar a handleShowEvents cuando ya no quedan servicios
-  const handleServiceEvent = async () => {
+  // Función para manejar la creación de un evento
+  const handleCreateEvent = async (serviceId, date, time) => {
     try {
-      const fullEvents = await logic.retrieveEvent();
-
-      setEvents(fullEvents);
+      // Crear el evento asociado al servicio
+      await logic.createEvent(serviceId, date, time);
+      console.log("Event successfully created for service with ID:", serviceId);
+      setSubmitted(true);
+      // Ocultar el formulario de creación de evento
+      setShowEventForm(false);
     } catch (error) {
+      setShowEventForm(false);
       setError(error.message);
     }
   };
-  useEffect(() => {
-    // solo carga eventos cuando ya no quedan servicios
-    if (services.length === 0) {
-      handleShowEvents();
-    }
-  }, [services]);
 
   // Función para eliminar un evento
   const handleDeleteEvent = async (eventId) => {
@@ -176,6 +109,71 @@ export default function Home(props) {
     }
   };
 
+  // Función para manejar el clic en el botón "Add Event" del footer
+  const handleAddEventClick = async () => {
+    setShowMessage(false);
+    setSubmitted(false);
+    setError(false);
+
+    try {
+      // Obtener la lista de servicios antes de abrir el formulario
+      const fetchedServices = await logic.retrieveServices();
+      setServices(fetchedServices);
+    } catch (error) {
+      setError(error.message);
+    }
+    // Mostrar el formulario de creación de evento y navegar a la ruta correspondiente
+    setShowEventForm(true);
+    navigate("/addEvent");
+  };
+
+  // Función para mostrar la lista de servicios
+  const handleShowServices = () => {
+    navigate("/services");
+    setShowMessage(false); // Oculta el mensaje al cambiar de página
+    setSubmitted(false);
+    setError(false);
+  };
+
+  // Llamar a handleShowEvents cuando ya no quedan servicios
+  const handleLastEvent = async () => {
+    try {
+      const fullEvents = await logic.retrieveEvent();
+
+      setEvents(fullEvents);
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+  useEffect(() => {
+    // solo carga eventos cuando ya no quedan servicios
+    if (services.length === 0) {
+      handleShowEvents();
+    }
+  }, [services]);
+
+  // Función para manejar el cierre de sesión
+  const handleLogout = () => {
+    props.onLogout();
+  };
+
+  // Función para mostrar el perfil del usuario
+  const handleProfileClick = () => {
+    navigate("/profile");
+    setShowMessage(false);
+    setSubmitted(false);
+    setError(false);
+  };
+
+  // Nos quedamos en la home despues del cambio de correo o contraseña
+  const handleChangeEmail = () => {
+    navigate("/");
+  };
+
+  const handleChangePassword = () => {
+    navigate("/");
+  };
+
   // Renderizado del componente
   return (
     <div className="home-container">
@@ -227,7 +225,7 @@ export default function Home(props) {
                   <div>
                     <Services
                       onServiceLogout={handleLogout}
-                      onServiceDeleted={handleServiceEvent}
+                      onServiceDeleted={handleLastEvent}
                     />
                   </div>
                 )
@@ -287,20 +285,20 @@ export default function Home(props) {
         <div>
           <button title="profile" onClick={handleProfileClick}>
             👤
-          </button>{" "}
+          </button>
         </div>
         <button className="btn" title="events" onClick={handleShowEvents}>
           📅
         </button>
         <div className="add-event" title=" add events">
-          {" "}
+
           <button onClick={handleAddEventClick}>➕</button>
         </div>
         <div>
-          {" "}
+
           <button title="services" onClick={handleShowServices}>
             💼
-          </button>{" "}
+          </button>
         </div>
       </div>
     </div>