comenzo conexion con el back

src/components/NewPublicacionInfo.jsx

@@ -1,48 +1,35 @@
-import React, {useState} from 'react';
 import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
-import { useEffect } from 'react';
-import { MapPin } from 'lucide-react'
+import React, { useEffect, useState } from 'react';
+import { Columns, MapPin } from 'lucide-react'
 import lugares from './lugares';
 import '../styles/calendario.css';
 import { useParams } from 'react-router-dom';
 import ReviewForm from './ReviewForm';
 import { useAuth0 } from '@auth0/auth0-react';
+import axios from 'axios';
 
 
 const NewPublicacionInfo = ({id}) => {
-    // definir un estado para guardar la información de la publicación
-    //const [publicacion, setPublicacion] = useState(null);
-
-    /*
-    // realizar get request a la API para obtener la información de la publicación con el id
-    useEffect(() => {
-        fetch(`http://localhost:3000/publicaciones/${id}`)
-            .then(response => response.json())
-            .then(data => {
-                setPublicacion(data);
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
-    }
-    , [id]);
-    */
-    // si id es undefined
-    let pid = id;
-    // obtener el id de la publicación de la URL. pasar a int
-    if (!pid) {
-        pid = parseInt(useParams().id);
-    } 
-
-    // seleccionar publicacion con el id
-    console.log("id: ", pid);
-    const selectedEvent = lugares.find(lugar => lugar.id === pid);
-
+    const { id } = useParams();
+    const [publicacion, setPublicacion] = useState(null);
     const { isAuthenticated, loginWithRedirect } = useAuth0();
     const [showReportForm, setShowReportForm] = useState(false);
     const [report, setReport] = useState('');
 
+    useEffect(() => {
+        const fetchPublicacion = async () => {
+            try {
+                const response = await axios.get(`${process.env.VITE_API_URL}/publicaciones/${id}`);
+                setPublicacion(response.data);
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        };
+
+        fetchPublicacion();
+    }, [id]);
+
     const handleReportClick = () => {
         if (!isAuthenticated) {
         loginWithRedirect();
@@ -58,6 +45,7 @@ const NewPublicacionInfo = ({id}) => {
         setShowReportForm(false);
     };
 
+    const selectedEvent = lugares.find(lugar => lugar.id === pid);
 
     // si id es undefined, no renderizamos nada
     return (
@@ -93,8 +81,22 @@ const NewPublicacionInfo = ({id}) => {
 
                         {/* dirección */}
                         <div className='event-container'>
-                            <MapPin size={50} />
-                            <p className='event-description'>{selectedEvent.direccion}</p>
+                            <div>
+
+                                <MapPin size={50} />
+                                <p className='event-description'>{selectedEvent.direccion}</p>
+
+                            <div>
+                                <a
+                                    href={`https://www.google.com/maps/search/?api=1&query=${selectedEvent.lat},${selectedEvent.lng}`}
+                                    className='event-subtitle'
+                                    target='_blank'
+                                    rel='noreferrer'
+                                >
+                                    Ver ubicación en Google Maps
+                                </a>
+                            </div>
+                            </div>
                         </div>
                         {/* boton de registrarse / cancelar */}
                         <button className='event-button'>
@@ -109,15 +111,6 @@ const NewPublicacionInfo = ({id}) => {
 
                         {/* Dejar comentario */}
                         <ReviewForm />
-                        {/* link a Google Maps */}
-                        <a
-                            href={`https://www.google.com/maps/search/?api=1&query=${selectedEvent.lat},${selectedEvent.lng}`}
-                            className='event-subtitle'
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Ver ubicación en Google Maps
-                        </a>
                         <hr /> {/* linea separadora */}
                         {/* Reportar */}
 
@@ -143,5 +136,4 @@ const NewPublicacionInfo = ({id}) => {
     )
   }
 
-
   export default NewPublicacionInfo