Merge pull request #49 from iic2154-uc-cl/form-features

Form features
iic2154-uc-cl · Nov 22, 2024 · 9a13110 · 9a13110
2 parents 456002c + 2576bb5
commit 9a13110
Show file tree

Hide file tree

Showing 10 changed files with 694 additions and 501 deletions.
diff --git a/src/pages/users/publicar.jsx b/src/pages/users/publicar.jsx
diff --git a/src/pages/users/zcultura.jsx b/src/pages/users/zcultura.jsx
@@ -20,10 +20,10 @@ const center = {
   lng: -70.6693  // Cambia esto a la longitud de tu ubicación inicial
 };
 
-function CulturaForm({ handleNext }) {
+function CulturaForm({ formData, errors, onInputChange, onNext }) {
   const [markerPosition, setMarkerPosition] = useState(center); // Estado para la posición del marcador
   const [userLocation, setUserLocation] = useState(null); // Estado para la ubicación del usuario
-  const [formData, setFormData] = useState({
+  /*const [formData, setFormData] = useState({
     titulo: '',
     descripcion: '',
     ubicacion: '',
@@ -36,8 +36,9 @@ function CulturaForm({ handleNext }) {
     paginaWeb: '',
     disponible: false,
   });
-  const [errors, setErrors] = useState({});
+  const [errors, setErrors] = useState({});*/
 
+  ///-----------////
   // Función para obtener la dirección a partir de coordenadas
   const getAddressFromLatLng = async (lat, lng) => {
     const apiKey = "AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E"; // Reemplaza con tu API key
@@ -59,6 +60,7 @@ function CulturaForm({ handleNext }) {
     setFormData((prev) => ({ ...prev, ubicacion: address })); // Actualiza el campo de ubicación
   };
 
+  ///-----------////
   useEffect(() => {
     // Obtener ubicación actual del usuario
     if (navigator.geolocation) {
@@ -81,10 +83,11 @@ function CulturaForm({ handleNext }) {
   }, []);
 
   const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    setErrors(prev => ({ ...prev, [field]: '' })); // Reset error when value changes
+    onInputChange(field, value);
+    //setFormData(prev => ({ ...prev, [field]: value }));
+    //setErrors(prev => ({ ...prev, [field]: '' })); // Reset error when value changes
   };
-
+  /*
   const validateForm = () => {
     const newErrors = {};
     if (!formData.titulo) newErrors.titulo = 'Escribe un título.';
@@ -96,12 +99,14 @@ function CulturaForm({ handleNext }) {
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
+  */
+
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (validateForm()) {
       console.log('Formulario válido, proceder...');
-      handleNext(); 
+      onNext(); 
     } else {
       console.log('Errores en el formulario:', errors);
     }
@@ -119,7 +124,7 @@ function CulturaForm({ handleNext }) {
         value={formData.titulo}
         onChange={(e) => handleInputChange('titulo', e.target.value)}
         error={Boolean(errors.titulo)}
-        helperText={errors.titulo || 'Campo Obligatorio'}
+        helperText={errors.titulo}
       />
       <TextField
         fullWidth
@@ -130,7 +135,7 @@ function CulturaForm({ handleNext }) {
         value={formData.descripcion}
         onChange={(e) => handleInputChange('descripcion', e.target.value)}
         error={Boolean(errors.descripcion)}
-        helperText={errors.descripcion || 'Campo Obligatorio'}
+        helperText={errors.descripcion}
       />
 
       <div className="direccion-container">
@@ -243,7 +248,11 @@ function CulturaForm({ handleNext }) {
 }
 
 CulturaForm.propTypes = {
-  handleNext: PropTypes.func.isRequired,
+  //handleNext: PropTypes.func.isRequired,
+  formData: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
 };
 
 export default CulturaForm;
diff --git a/src/pages/users/zdeporte.jsx b/src/pages/users/zdeporte.jsx
@@ -20,23 +20,9 @@ const center = {
   lng: -70.6693  // Cambia esto a la longitud de tu ubicación inicial
 };
 
-function DeporteForm({ handleNext }) {
+function DeporteForm({ formData, errors, onInputChange, onNext  }) {
   const [markerPosition, setMarkerPosition] = useState(center);
   const [userLocation, setUserLocation] = useState(null);
-  const [formData, setFormData] = useState({
-    titulo: '',
-    descripcion: '',
-    ubicacion: '',
-    numeroUbicacion: '',
-    nombreContacto: '',
-    celularContacto: '',
-    mailContacto: '',
-    instagram: '',
-    facebook: '',
-    paginaWeb: '',
-    disponible: false,
-  });
-  const [errors, setErrors] = useState({});
 
   // Función para obtener la dirección a partir de coordenadas
   const getAddressFromLatLng = async (lat, lng) => {
@@ -55,8 +41,10 @@ function DeporteForm({ handleNext }) {
     const lng = event.latLng.lng();
     setMarkerPosition({ lat, lng });
 
-    const address = await getAddressFromLatLng(lat, lng); // Obtiene la dirección
-    setFormData((prev) => ({ ...prev, ubicacion: address }));
+    const address = await getAddressFromLatLng(lat, lng);
+    if (address) {
+      onInputChange('ubicacion', address);
+    }
   };
 
   useEffect(() => {
@@ -81,27 +69,15 @@ function DeporteForm({ handleNext }) {
   }, []);
 
   const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    setErrors(prev => ({ ...prev, [field]: '' }));
+    onInputChange(field, value);
   };
 
-  const validateForm = () => {
-    const newErrors = {};
-    if (!formData.titulo) newErrors.titulo = 'Escribe un título.';
-    if (!formData.descripcion) newErrors.descripcion = 'Escribe una descripción.';
-    if (!formData.ubicacion) newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).';
-    if (!formData.celularContacto && !formData.mailContacto) {
-      newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.';
-    }
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (validateForm()) {
       console.log('Formulario válido, proceder...');
-      handleNext(); 
+      onNext(); 
     } else {
       console.log('Errores en el formulario:', errors);
     }
@@ -119,7 +95,7 @@ function DeporteForm({ handleNext }) {
         value={formData.titulo}
         onChange={(e) => handleInputChange('titulo', e.target.value)}
         error={Boolean(errors.titulo)}
-        helperText={errors.titulo || 'Campo Obligatorio'}
+        helperText={errors.titulo }
       />
       <TextField
         fullWidth
@@ -242,7 +218,10 @@ function DeporteForm({ handleNext }) {
 }
 
 DeporteForm.propTypes = {
-  handleNext: PropTypes.func.isRequired,
+  formData: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
 };
 
 export default DeporteForm;

diff --git a/src/pages/users/zentretenimiento.jsx b/src/pages/users/zentretenimiento.jsx
@@ -1,5 +1,5 @@
 import '../../styles/users/zservicios.css';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   TextField,
@@ -20,33 +20,51 @@ const center = {
   lng: -70.6693  // Cambia esto a la longitud de tu ubicación inicial
 };
 
-function EntretenimientoForm({ handleNext }) {
+const googleApiKey = "AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E"; // Reemplaza con tu API Key
+
+function EntretenimientoForm({ formData, errors, onInputChange, onNext }) {
   const [markerPosition, setMarkerPosition] = useState(center);
-  const [userLocation, setUserLocation] = useState(null);
-  const [formData, setFormData] = useState({
-    titulo: '',
-    descripcion: '',
-    ubicacion: '',
-    numeroUbicacion: '',
-    nombreContacto: '',
-    celularContacto: '',
-    mailContacto: '',
-    instagram: '',
-    facebook: '',
-    paginaWeb: '',
-    disponible: false,
-  });
-  const [errors, setErrors] = useState({});
-
-  // Función para obtener la dirección a partir de coordenadas
-  const getAddressFromLatLng = async (lat, lng) => {
-    const apiKey = "AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E"; // Reemplaza con tu API key
-    const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`);
-    const data = await response.json();
-    if (data.results && data.results.length > 0) {
-      return data.results[0].formatted_address;
+  const autocompleteRef = useRef(null);
+  const inputRef = useRef(null);
+  const mapRef = useRef(null);
+
+  useEffect(() => {
+    // Configura el Autocomplete cuando la API de Google esté lista
+    const initializeAutocomplete = () => {
+      if (window.google && inputRef.current) {
+        autocompleteRef.current = new window.google.maps.places.Autocomplete(inputRef.current, {
+          fields: ["formatted_address", "geometry"],
+          types: ["address"],
+          componentRestrictions: { country: ["cl"] }
+        });
+        autocompleteRef.current.addListener("place_changed", handlePlaceSelect);
+      }
+    };
+
+    // Espera hasta que Google Maps esté disponible, revisa cada 200ms
+    const intervalId = setInterval(() => {
+      if (window.google && window.google.maps && window.google.maps.places) {
+        clearInterval(intervalId);
+        initializeAutocomplete();
+      }
+    }, 200);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const handlePlaceSelect = () => {
+    const place = autocompleteRef.current.getPlace();
+    if (place.geometry && place.geometry.location) {
+      const location = place.geometry.location;
+      setMarkerPosition({ lat: location.lat(), lng: location.lng() });
+      onInputChange('ubicacion', place.formatted_address);
+
+      if (mapRef.current) {
+        mapRef.current.panTo(location);
+        mapRef.current.setZoom(15);
+      }
     } else {
-      return '';
+      console.error("No se encontró la ubicación seleccionada.");
     }
   };
 
@@ -55,46 +73,22 @@ function EntretenimientoForm({ handleNext }) {
     const lng = event.latLng.lng();
     setMarkerPosition({ lat, lng });
 
-    const address = await getAddressFromLatLng(lat, lng); // Obtiene la dirección
-    setFormData((prev) => ({ ...prev, ubicacion: address }));
-  };
-
-  useEffect(() => {
-    // Obtener ubicación actual del usuario
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(async (position) => {
-        const newLocation = {
-          lat: position.coords.latitude,
-          lng: position.coords.longitude,
-        };
-        setUserLocation(newLocation);
-        setMarkerPosition(newLocation);
-
-        const address = await getAddressFromLatLng(newLocation.lat, newLocation.lng);
-        setFormData((prev) => ({ ...prev, ubicacion: address }));
-      }, () => {
-        alert("No se pudo obtener la ubicación.");
-      });
-    } else {
-      alert("Geolocalización no es soportada en este navegador.");
+    const address = await getAddressFromLatLng(lat, lng);
+    if (address) {
+      onInputChange('ubicacion', address);
     }
-  }, []);
+  };
 
-  const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    setErrors(prev => ({ ...prev, [field]: '' }));
+  const getAddressFromLatLng = async (lat, lng) => {
+    const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${googleApiKey}`);
+    const data = await response.json();
+    return data.results && data.results.length > 0 ? data.results[0].formatted_address : '';
   };
 
-  const validateForm = () => {
-    const newErrors = {};
-    if (!formData.titulo) newErrors.titulo = 'Escribe un título.';
-    if (!formData.descripcion) newErrors.descripcion = 'Escribe una descripción.';
-    if (!formData.ubicacion) newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).';
-    if (!formData.celularContacto && !formData.mailContacto) {
-      newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.';
-    }
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
+
+
+  const handleInputChange = (field, value) => {
+    onInputChange(field, value);
   };
 
   const handleSubmit = (e) => {
@@ -242,7 +236,10 @@ function EntretenimientoForm({ handleNext }) {
 }
 
 EntretenimientoForm.propTypes = {
-  handleNext: PropTypes.func.isRequired,
+  formData: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
 };
 
 export default EntretenimientoForm;