Calendario ubicación #78
Conversation
Después, díganme qué opinan Debería el calendario estar ahí o en un lugar exclusivo para él? 📅 También, puede quedarse donde lo dejé, pero si le das clic, debería llevarte a una pestaña diferente donde se pueda ver en grande? No sé, son ideas Después, cuéntenme.
|
Yo haria una nueva pagina y agregaría un link en el menú. Para que no quede todo tan cargado, porque va a tener dos botones para navegar de un mes a otro, y posiblemente se pueda hacer click en cada persona para ir a su perfil. Para que todo tenga su lugar. |
De momento, va a estar acá. Luego veremos dónde dejarlo, o quizás agregamos un botón por ahí para ir directo al calendario. 🗓️
Incorporados estilos CSS al calendario y añadidas 3 pruebas de eventos. Todo listo para la acción 📆
|
@JLeonN bien de bien boooo! Creo que te confundiste e instalaste las dependencias en Sería asi: cd frontend
npm install dayjs
npm install react-big-calendar |
|
Queda re bien 🎉 👏 !!
|
| const events = [ | ||
| { | ||
| start: dayjs("2024-05-09").toDate(), | ||
| end: dayjs("2024-05-11").toDate(), | ||
| title: "Prueba 1", | ||
| }, | ||
| { | ||
| start: dayjs("2024-05-22").toDate(), | ||
| end: dayjs("2024-05-22").toDate(), | ||
| title: "Prueba 2", | ||
| }, | ||
| { | ||
| start: dayjs("2024-06-22").toDate(), | ||
| end: dayjs("2024-06-22").toDate(), | ||
| title: "Prueba 3", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
Cuando ya no hagas mas pruebas, vas a tener que sacar los eventos de la API.
La nueva url es /api/tontos/${año}/${mes}, esto te devuelve una lista de tontos con el nombre y el dia que salio cada uno.
Para start y end vas a tener que usar el dia de cada tonto.
Y para el title vas a tener que usar el nombre.
| const [eventos, setEventos] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| // TODO: como carajo obtener el rango de fechas inicial en el calendario? |
There was a problem hiding this comment.
@JLeonN una vez sepamos como obtener el rago de fechas visibles en el calendario, hay que llamar a la funcion obtenerTontosEntreFechas(inicio, fin).
| // ESTO ES UN EJEMPLO, GENERA NOMBRES ALEATOREOS | ||
| // BORRAR | ||
| const nombres = ["Jorge", "German", "Pablo", "Marcelo", "Cristian"]; | ||
| const eventos = Array.from({ length: 31 }, (_, i) => { | ||
| return { | ||
| start: dayjs(inicio).add(i, "day").toDate(), | ||
| end: dayjs(inicio).add(i, "day").toDate(), | ||
| title: nombres[Math.floor(Math.random() * nombres.length)], | ||
| }; | ||
| }); |
There was a problem hiding this comment.
@JLeonN Esto lo hice para generar nombres aleatoreos. Hay que reemplazar todo esto por una llamada a la API de calendario.
| messages={messages} | ||
| views={["month"]} | ||
| events={eventos} | ||
| onRangeChange={(rango) => manejarCambioDeMes(rango)} |
There was a problem hiding this comment.
@JLeonN este evento lo dispara el componente de calendario.
En español el nombre sería algo como "cuando cambia el rango".
Significa que cada vez que cambia el mes visible en el calendario, se llama la funcion manejarCambioDeMes(rango)
| console.log("Fecha fin", fin); | ||
|
|
||
| // TODO 1: llamar a API para obtener el historial de tontos entre las dos fechas | ||
| // TODO 2: al recibir la lista de tontos del dia, mapearla a un arreglo de eventos |
There was a problem hiding this comment.
La API de calendario de tontos devuelve un objeto json que tiene esta forma:
[
{
"id": 1,
"nombre": "Pablo",
"total": 7,
"correo": "[email protected]",
"dia": "2024-05-01T22:00:00.000Z"
},
{
"id": 3,
"nombre": "Franco",
"total": 0,
"correo": "[email protected]",
"dia": "2024-05-02T22:00:00.000Z"
}
]Los eventos del componente calendario necesitan esta forma:
{
"start": fecha,
"end": fecha,
"title": titulo,
}Eso significa que hay que mapear (o transformar) los objetos de la API a los objetos que necesita el calendario.
| // Alternativa | ||
| // - Otener fecha actual | ||
| // - Otener inicio del mes | ||
| // - Obtener fin del mes | ||
| // obtenerTontosEntreFechas(ini, f) |
There was a problem hiding this comment.
@JLeonN probaste estos pasos?
package.json
Outdated
There was a problem hiding this comment.
@JLeonN parece que estas librerias se instalaron en al proyecto de la API, en lugar de instalarse en el proyecto del frontend.
Cuando puedas deshace los cambios en este archivo e instala las dependencias en frontend/package.json.
There was a problem hiding this comment.
Sí, pero una pregunta: ¿cómo las desinstalo? Nunca desinstalé una librería. 🤔
package-lock.json
Outdated
There was a problem hiding this comment.
@JLeonN parece que estas librerias se instalaron en al proyecto de la API, en lugar de instalarse en el proyecto del frontend.
Cuando puedas revertite los cambios en este archivo e instala las dependencias en frontend/package.json. Cuando lo hagas, asegurate que estos cambios esten en frontend/package-lock.json.
Las librerías fueron cambiadas de ubicación. Ahora están en frontend/package-lock.json. 📁
Desinstalé las librerías de la parte donde no iban y en el commit anterior ya las instalé en el frontend. 📦
Franco, estuve con Pablo probando muchas cosas y terminamos poniendo un 'if'. No sé si es la mejor manera de resolverlo porque es la primera vez que lo hacemos, pero ahora el calendario funciona cuando presionas el botón de 'Hoy'. Solo me queda hacer lo del useEffect.
Franco, parece que en algún momento hice un 'Control Z' y cometí un error.
Después, díganme qué opinan
Debería el calendario estar ahí o en un lugar exclusivo para él?
📅 También, puede quedarse donde lo dejé, pero si le das clic, debería llevarte a una pestaña diferente donde se pueda ver en grande?
No sé, son ideas Después, cuéntenme.