import React from "react";
import { useRouter } from "next/router";
import { useEffect, useContext, useState } from "react";
import { db } from "../../firabase/firebase";
import { doc, getDoc, updateDoc } from "firebase/firestore";
import Error404 from "../404";
import styled from "@emotion/styled";
import formatDistanceToNow from "date-fns/formatDistanceToNow";
import { es } from "date-fns/locale";
import { FirebaseContext } from "../../firabase";
import { Campo, InputSubmit } from "../../components/ui/Formulario";
import Boton from "../../components/ui/Boton";
const ContenedorProducto = styled.div`
@media (min-width: 768px) {
display: grid;
grid-template-columns: 2fr 1fr;
column-gap: 2rem;
}
`;
const Post = () => {
const [producto, guardarProducto] = useState({});
const [error, guardarError] = useState(false);
const router = useRouter();
const { pid } = router.query;
const { usuario } = useContext(FirebaseContext);
const docRef = doc(db, "productos", `${pid}`);
useEffect(() => {
// Si quieres evitar los muchos console.log y repeticiones de los valores en consola
// Tan solo usa un useEffect un if para verificar si este elemento existe y ponlo como dependencia
if (pid) {
const obtenerProducto = async () => {
const docSnap = await getDoc(docRef);
if (docSnap.exists) {
guardarProducto(docSnap.data());
guardarError(false);
} else {
guardarError(true);
}
};
obtenerProducto();
}
console.log("Pase por aqui");
}, [pid]);
console.log(usuario);
const {
comentarios,
creado,
descripcion,
nombre,
url,
imagenURL,
votos,
creador,
haVotado,
} = producto;
console.log(producto);
return (
<>
{producto ? (
<>
{error && <Error404 />}
<div className="contenedor">
<h1 style={{ textAlign: "center", marginTop: "5rem" }}>{nombre}</h1>
<ContenedorProducto>
<div>
<p>
Publicado hace:{" "}
{formatDistanceToNow(new Date(creado), {
locale: es,
})}
</p>
<p>Por: {creador.nombre}</p>
<img src={imagenURL} />
<p>{descripcion}</p>
{usuario && (
<>
<h2>Agrega tu comentario</h2>
<form action="">
<Campo>
<input type="text" name="mensaje"></input>
</Campo>
<InputSubmit type="submit" value="Agregar Comentario" />
</form>
</>
)}
<h2 style={{ margin: "2rem 0" }}>Comentarios</h2>
{comentarios.map((comentario) => (
<li>
<p>{comentario.nombre}</p>
<p>Escrito por: {comentario.usuarioNombre}</p>
</li>
))}
</div>
<aside>
<Boton target="_blank" bgColor="true" href={url}>
Visitar URL
</Boton>
<div style={{ marginTop: "5rem" }}>
<p style={{ textAlign: "center" }}>{votos} Votos</p>
{usuario && <Boton>Votar</Boton>}
</div>
</aside>
</ContenedorProducto>
</div>
</>
) : (
<p>Cargando...</p>
)}
</>
);
};
export default Post;
when i put this code get my a error Invalid time , this error apper like my product dont load in the state in useEffect have delay many second to call the product of the db, how to solve this error? thnks