Fix conditional rendering for post types

geomapp/src/components/Navbar.jsx

@@ -3,7 +3,8 @@ import { useAuth0 } from '@auth0/auth0-react';
 import '../styles/navbar.css'; // Asegúrate de que la ruta del CSS es correcta
 import '../styles/footer.css';
 import { Link } from 'react-router-dom';
-import logo from '../assets/logo.png'
+import logo from '../assets/logo.png';
+import whatsapp from '../assets/whatsapp.png';
 
 function NavBar() {
     const { loginWithRedirect, logout, isAuthenticated } = useAuth0();
@@ -14,7 +15,7 @@ function NavBar() {
             <div className="navbar-content">
                 <div className="navbar-links">
                   <Link to="/">
-                  <img src={logo} className="navbar-logo"></img>
+                    <img src={logo} className="navbar-logo"></img>
                   </Link>
 
                     <Link to="/mapa-navegacion" className="footer-link">Mapa de navegación</Link>
@@ -24,20 +25,21 @@ function NavBar() {
                         <Link to="/mi-perfil" className="footer-link">Mi Perfil</Link>
                     )}
                     {isAuthenticated && (
-                        <Link to="/publicaciones" className="footer-link-2">Mis publicaciones</Link>
+                        <Link to="/publicaciones" className="footer-link">Mis publicaciones</Link>
                     )}
 
                     {!isAuthenticated ? (
                         <a className="footer-link" onClick={loginWithRedirect} >Iniciar sesión</a>
                     ) : (
-                        <a onClick={() => logout({ returnTo: window.location.origin })}>Cerrar sesión</a>
+                        <a className="footer-link" onClick={() => logout({ returnTo: window.location.origin })}>Cerrar sesión</a>
                     )}
 
                 </div>
 
             </div>
             <div onClick={() => alert('Connecting to WhatsApp')}>
-                <i className="whatsapp-icon">W</i>
+                <img src={whatsapp} className="navbar-logo"></img>
+
             </div>
         </div>
     );

geomapp/src/pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' });
+}

geomapp/src/pages/api/service/google_place_autocomplete.js

@@ -0,0 +1,94 @@
+/* eslint-disable consistent-return */
+
+export default function useGooglePlaceAutoComplete() {
+  const initAutoComplete = async (input, callback) => {
+    const autoComplete = new window.google.maps.places.Autocomplete(input, {
+      // limit to Chile for now
+      componentRestrictions: { country: ['cl'] },
+      fields: ['address_component', 'geometry', 'formatted_address'],
+      types: ['address'],
+    });
+    autoComplete.addListener('place_changed', callback);
+    return autoComplete;
+  };
+
+  const getFullAddress = async (autoComplete) => {
+    const place = autoComplete.getPlace();
+
+    let route = '';
+    let streetNumber = '';
+    let locality = '';
+    let adminArea1Short = '';
+    let adminArea1Long = '';
+    let adminArea2Short = '';
+    let adminArea2Long = '';
+    let adminArea3Short = '';
+    let adminArea3Long = '';
+    let countryShort = '';
+    let countryLong = '';
+    let postalCode = '';
+
+    // Get each component of the address from the place details,
+    if (!place.address_components) return;
+    // eslint-disable-next-line no-restricted-syntax
+    for (const component of place.address_components) {
+      const componentType = component.types[0];
+
+      if (componentType === 'street_number') {
+        streetNumber = component.long_name;
+      }
+      if (componentType === 'route') {
+        route = component.long_name;
+      }
+      if (componentType === 'locality') {
+        locality = component.long_name;
+      }
+      if (componentType === 'administrative_area_level_1') {
+        adminArea1Short = component.short_name;
+        adminArea1Long = component.long_name;
+      }
+      if (componentType === 'administrative_area_level_2') {
+        adminArea2Short = component.short_name;
+        adminArea2Long = component.long_name;
+      }
+      if (componentType === 'administrative_area_level_3') {
+        adminArea3Short = component.short_name;
+        adminArea3Long = component.long_name;
+      }
+      if (componentType === 'postal_code') {
+        postalCode = component.long_name;
+      }
+      if (componentType === 'postal_code_suffix') {
+        postalCode = `${postalCode}-${component.long_name}`;
+      }
+      if (componentType === 'country') {
+        countryShort = component.short_name;
+        countryLong = component.long_name;
+      }
+    }
+
+    const resAddress = {
+      route,
+      streetNumber,
+      locality,
+      adminArea1Short,
+      adminArea1Long,
+      adminArea2Short,
+      adminArea2Long,
+      adminArea3Short,
+      adminArea3Long,
+      postalCode,
+      countryShort,
+      countryLong,
+      latitude: place.geometry.location.lat(),
+      longitude: place.geometry.location.lng(),
+    };
+
+    return resAddress;
+  };
+
+  return {
+    initAutoComplete,
+    getFullAddress,
+  };
+}

geomapp/src/pages/mapa.jsx

@@ -10,9 +10,7 @@ const Mapa = () => {
     <div id="hello-world-container">
             <Navbar />
             <div className="content">
-                <h1>Mapaaaaaaaa</h1>
-                <p>USUARIO VISITANTE</p>
-
+                <h1>Mapa</h1>
             </div>
             <Footer />
     </div>

geomapp/src/pages/users/publicar.jsx

@@ -3,6 +3,17 @@ import { Select, MenuItem, FormControl, InputLabel, Stepper, Step, StepLabel, Bu
 import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
 import ImageUpload from '../../components/ImageUpload';
+
+import TurismoForm from './zturismo.jsx';
+import CentrosDeportivosForm from './zcentros.jsx';
+import EventosForm from './zeventos.jsx';
+import HospedajeForm from './zhospedaje.jsx';
+import GastronomiaForm from './zgastronomia.jsx';
+import ServiciosForm from './zservicios.jsx';
+
+
+
+
 import '../../styles/users/publicar.css';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
@@ -67,81 +78,37 @@ function Publicar() {
             case 1:
                 if (selectedType === 'turismo') {
                     return (
-                        <Box className="publicar-form-container">
-                            <Box className="publicar-form-row">
-                                <TextField
-                                    fullWidth
-                                    className="publicar-form-input"
-                                    label="Título"
-                                    variant="outlined"
-                                    onChange={(e) => handleDetailChange('titulo', e.target.value)}
-                                    value={details.titulo}
-                                />
-                            </Box>
-                            <Box className="publicar-form-row">
-                                <TextField
-                                    fullWidth
-                                    className="publicar-form-input"
-                                    label="Descripción"
-                                    multiline
-                                    rows={4}
-                                    variant="outlined"
-                                    onChange={(e) => handleDetailChange('descripcion', e.target.value)}
-                                    value={details.descripcion}
-                                />
-                            </Box>
-
-                            {/* <Box className="publicar-form-row">
-                            <LocalizationProvider dateAdapter={AdapterDateFns}>
-                            <DatePicker
-                    label="Fecha de inicio"
-                    value={startDate}
-                    onChange={handleStartDateChange}
-                    renderInput={(params) => <TextField {...params} />}
-                />
-                <DatePicker
-                    label="Fecha de fin"
-                    value={endDate}
-                    onChange={handleEndDateChange}
-                    renderInput={(params) => <TextField {...params} />}
-                />
-            </LocalizationProvider>
-
-
-
-
-                            </Box> */}
-
-
-                            <Box className="publicar-form-row">
-                                <TextField
-                                    type="time"
-                                    className="publicar-form-time"
-
-
-                                    onChange={(e) => handleDetailChange('horarioInicio', e.target.value)}
-                                    value={details.horarioInicio}
-                                />
-                                <TextField
-                                    type="time"
-                                    className="publicar-form-time"
-
-
-                                    onChange={(e) => handleDetailChange('horarioFin', e.target.value)}
-                                    value={details.horarioFin}
-                                />
-                            </Box>
-                        </Box>
-
-
+                      <TurismoForm></TurismoForm>
+                    );
+                  } else if (selectedType === 'centros-deportivos') {
+                    return (
+                      <CentrosDeportivosForm></CentrosDeportivosForm>
+                    );
+                  } else if (selectedType === 'hospedaje') {
+                    return (
+                        <HospedajeForm></HospedajeForm>
+                    );
+                  } else if (selectedType === 'eventos') {
+                    return (
+                        <EventosForm></EventosForm>
+                    );
+                  } else if (selectedType === 'gastronomia') {
+                    return (
+                        <GastronomiaForm></GastronomiaForm>
+                    );
+                  } else if (selectedType === 'servicios-comunitarios') {
+                    return (
+                        <ServiciosForm></ServiciosForm>
                     );
-                } else {
+                  }
+
+                else {
                     return 'Completa la información de la publicación.';
                 }
             case 2:
                 return <ImageUpload files={files} setFiles={setFiles} setError={setError} />;
             case 3:
-                return 'Revisa y publica tu anuncio.';
+                return 'Revisa y publica tu anuncio';
             default:
                 return 'Paso desconocido';
         }

geomapp/src/pages/users/zcentros.jsx

@@ -0,0 +1,41 @@
+import '../../styles/users/zcentros.css';
+import React, { useState, useRef, useEffect } from 'react';
+
+
+
+function CentrosDeportivosForm() {
+
+
+  return (
+
+    <div>
+
+    <h1>Titulo</h1>
+    <h1>Descripcion</h1>
+    <h1>Fecha de inicio</h1>
+    <h1>Fecha de fin</h1>
+    <h1>Hora de inicio</h1>
+    <h1>Hora de fin</h1>
+    <h1>Subcategorias del evento</h1>
+
+
+    </div>
+
+
+
+
+
+
+
+  );
+
+
+
+
+
+
+
+}
+
+
+export default CentrosDeportivosForm;

geomapp/src/pages/users/zgastronomia.jsx

@@ -0,0 +1,41 @@
+import '../../styles/users/zgastronomia.css';
+import React, { useState, useRef, useEffect } from 'react';
+
+
+
+function GastronomiaForm() {
+
+
+  return (
+
+    <div>
+
+    <h1>Titulo</h1>
+    <h1>Descripcion</h1>
+    <h1>Fecha de inicio</h1>
+    <h1>Fecha de fin</h1>
+    <h1>Hora de inicio</h1>
+    <h1>Hora de fin</h1>
+    <h1>Subcategorias del evento</h1>
+
+
+    </div>
+
+
+
+
+
+
+
+  );
+
+
+
+
+
+
+
+}
+
+
+export default GastronomiaForm;