[Diario] Calendario para gente mayor - React Native+TS+Mongo Realm

Zoko

#30

Es un buen reto, antes me he estado paseando de nuevo por tu repo, el de Astrale, y es que te sacaste la polla bastante basto la verdad.
Algún consejo sobre como decidiste hacer las cosas respecto al diseño y tal? Siempre me ha parecido un tema fascinante, por eso me hice frontender.

1 respuesta
isvidal

#31 Basicamente me baje muchas apps de astrologia e implemente lo que me parecio mejor de cada una. Luego ya tener buen ojo para que todo te cuadre y quede bonito (Eso siempre se me ha dado bien).

Y como "metodo" soy mucho de iterar, me funciona muy bien, osea tengo una idea borrosa, no muy definida, de lo que me gustaria, y a medida que la iteras la vas madurando hasta que terminas con algo que de verdad te deja satisfecho, ejemplo claro, Astrale, mira los early days de Astrale, y como termino siendo:

3
isvidal

Me han jodido, Realm de momento no funciona en los M1 de Apple. Ire avanzando la app laterlamente a nivel visual y de flows, incluso puedo definir el modelo, y y confio que en cosa de un mes este ya rulando y pueda meter algo de persistencia.

https://github.com/realm/realm-js/issues/3527

Axtrix

#26 no sabes como me jode no poder usar space-y-{x}

1 1 respuesta
isvidal

#34 Tengo que decir que vi la libreria gracias a ti que le metiste star y me salio en el feed de github. Y si, hay dos cosas que me matan, no funciona el shadow (en rn elevation), creo que esto se podria mapear a mano, tengo que ver como. Y lo del space-x space-y, tu no sabes la comodidad que te da esa mierda y la de lineas que ahorra.

1
isvidal

🗓 Día 3

Repositorio

Hoy he completado los siguientes feats:

✅ Meter y configurar i18n-js para poder meter multi idioma (Cat, Cast, Eng).

✅ Meter y configurar React Navigation y ya tengo montado el primer stack (Drawer(Stack)), he tenido movida con Jest yet again, suerte de un comentario de hace un mes en una issue de Github, si no me tiro por la ventana. Fuck JS ecosystem.

✅ Empezando a definir el primer layout y pantalla principal de la aplicación (Ver media para mas).

✅ Al final utilizare Luxon para tratar las fechas.

❎ No he podido meter Realm pues no funciona en iOS con el chip M1. Vamos a dejarlo para más tarde.

Para mañana mi intención es:

Ⓜ️ Configurar los temas, tengo aquí una gran problemática, no se si tirar para all in tema con React Native Paper o Tailwind, o medio medio, fuuuuuu

Ⓜ️ Estudiar como genero la vista mensual, por mes, scroll en columna de meses, genero yo la grid con los meses/Dias o uso una librería?? Many doubts

Media:

A ver si es que tengo la vista cansada, pero soy el único que ve como un sombreado muy ligero a los iconos y letras del header?? Llevo como 1 hora volviéndome loco, y ya no sé si lo veo de verdad o me lo hace la vista/pantalla.

2 2 respuestas
Axtrix

#36 Se aprecia un poco de drop-shadow en las cosas de la cabecera.

Configurar los temas, tengo aquí una gran problemática, no se si tirar para all in tema con React Native Paper o Tailwind, o medio medio, fuuuuuu

Yo estoy con las mismas en una cosilla que estoy haciendo, por ahora tiro de Paper para todo y me alineo las cosas con Tailwind, y ya si algun Screen tiene que ser algo más visual pues le dare más a Tailwind.

Estoy interesado en ver como lidias con ello, espero que no sea muy latoso.

1 respuesta
Zoko

#36

Efectivamente, tiene un drop shadow. O al menos eso parece.

1 respuesta
isvidal

#37 #38 Pues me volvi loco con esta mierda, quite y puse todo, y no la consegui sacar de ninguna forma, vamos, quite todo lo de paper, utilizando Text de react-native, elevation nada. Voy a probar con text-shadow hoy, pero me deja loquisimo esta mierda. Ademas parece que lo mete en los iconos tambien.

JuAn4k4

La vista de mes en móvil tiene que ser curiosa... No se si vas a tener en cuenta solapamientos y tal. Al ser móvil only no creo que haya muchas libs, yo buscaría ideas y simplificaría para móvil.

1 respuesta
isvidal

#40 Voy a ir ALL IN, y hare un scroll infinito made in MY HOUSE que te va cargando los meses a medida que haces scroll parriba o pabajo, como me salgo guapo lo saco de este proyecto y lo meto como un package a parte

lo va a petar 😎

1 1 respuesta
r2d2rigo

#41 infinite scroll es de lo peor que puedes hacer en terminos de UX, salvo que toda tu funcionalidad gire en torno a datos muy efimeros como tweets/posts de facebook.

1 respuesta
isvidal

#42 Todas las apps de calendario tienen un infinite scroll de meses para arriba y abajo. Literalmente todas las que he mirado. Y no me parece que quiten facilidad de uso para nada a nivel de viejos.

1 respuesta
r2d2rigo

#43 ah vale de MESES, pense que ibas a poner todos los eventos a cholon en una lista infinita y arreando.

Si, lo suyo es poner varias vistas con distinta granularidad si te quieres complicar mucho, pero tenerlo asi puede ser suficiente.

isvidal

🗓 Día 4

Repositorio

Hoy he completado los siguientes feats:

✅ Meter y meter algunos wrappers para date-fns (He eliminado Luxon), el wrapper para que el format venga con el locale del movil: date-fns easy.

✅ Configuradas sombras como clases de Tailwind (Elevation en RN), extendiendo la config no he podido, así que he metido un json a mano y los mergo luego, ademas he metido un pequeñito wrapper para poder loggear lo que sea que devuelve tw() y así poder ver los styles que genera: log y merge de json's

✅ He conseguido quitar el puto sombreado del appbar.

✅ Una pequeñita primera iteración de la vista de mes, foto abajo.

Para mañana mi intención es:

Ⓜ️ Implementar los días del mes como Flatlist y tener el infinite scrolling funcionando, aun tosco y básico.

Ⓜ️ Estudiar cuál es la mejor forma de ir generando y agrupando los días/meses a medida que te hacen scroll.

Media:

1 respuesta
JuAn4k4

#45 Y hacer una navegación por touch events royo: zoom in/out = pasar de vista día/semana/mes/año y scroll horizontal para moverte en esa vista con scroll infinito (horizontal)

Tanto de semanas, como meses, como años, teniendo arriba barritas con el año actual, mes actual dependiendo de la vista en la que estas.

Por ejemplo, en año, los cuadrados son meses con el número de eventos y tipo de eventos en badges (por colores?)

En mes yo ocuparía lo máximo de la pantalla, el día es lo menos importante, lo más importante para mí es saber si hay algo o no, y qué es. (Suelo tener 1 evento como mucho) los seniors imagino que les pasará parecido.

Y el diario si sería ya más vertical por horas

2 respuestas
isvidal

#46

2 1 respuesta
JuAn4k4

#47 Pon tias en pelotas y Bomberos semidesnudos. Con eso la app la tienes en 1M de descargas en dos semanas aunque no sea funcional.

2
isvidal

#46 Mi idea es vista de meses, a;os no lo veo, dias en detalle puede, pero no se si tiene mucho valor pues no es para gente con 20 reuniones al dia, osea, que como dices, lo importante es la vista mensual con badges claros de todos los eventos que tengas al mes, que como mucho sera 1-2 por dia.

Que es en lo que me centrare estos dias implementar la logica de un scroll vertical infinito para los meses y que tenga un rendimiento acorde.

isvidal

🗓 Día 5

Repositorio

Hoy he completado los siguientes feats:

✅ Mejorar el formato del logger de tailwind-rn.

Para mañana mi intención es:

Ⓜ️ Continuar estudiando la mejor forma de implementar el infinite scrolling de meses.

Ayuda:

📣 Como lo haríais para generar el array con todos los días de todos los meses que se deben ir matando en el flatlist. Supongamos que de primera cargas el mes actual mas un step por delante y por detrás. No quiero separar por meses, quiero que sea una columna, eso significa, que hay meses que no empiezan en lunes (Primera columna), por lo tanto tengo que ser capaz de mezclar los arrays (Cuando genere meses a medida que suban y bajan con eso en mente).

No se si me he explicado.

Lo que tengo hasta ahora, que estoy un poco espeso, es, dado un mes, me da un array con todos los días de ese mes, mas los días que le faltan a la semana. Es decir, si Enero empieza en viernes, me da un array con los 31 días de enero, mas Lunes, Martes, Miércoles y Jueves de Diciembre. Me explico?

Y aquí va, los mas listos que yo, como haríais este juego, al final debería ser un array donde la posición sea la que tendrá en el flatlist vertical de 7 columnas, y deberá tener algún prop como mes y año.

A ver si me ayudáis, gente mas inteligente que yo. @JuAn4k4 @Zoko @r2d2rigo @desu

Quizas no complicarme y en lugar de generar un array por cada dia, hacer un array por cada mes como item de la lista y dentro si, sus dias, entonces no tendria una columna infinita, si no meses separados por una linea blanca o algo, y me complico menos.

1 respuesta
isvidal

Soy muy fan del equipo de ingenieros de Facebook que cobraran todos 150k para arriba y son tan vagos como para ponerte un any en el d.ts

Te tienes que ir a la docu oficial, grandes amics

JuAn4k4

#50 Puedes pensar en semanas, si vas a pintar la semana en una fila. E iteras semanas en vertical y días en horizontal. Tu flatlist es de semanas, que tienen días dentro / fuera del mes, o incluso del año siguiente/anterior.

O eso o el flatlist es de días que será más sencillo, y solo tienes que mover los índices de start/end a modo window que indica lo que estas pintando (5 semanas normalmente o 4 en febrero). Aunque en el calendario de Google pinta 5 semanas igualmente para febrero también.

1 respuesta
isvidal

#52 Despues de darle varias vueltas lo que mejor me va a funcrionar es tener un array de items por meses, con un tope, pon 250 meses arriba, abajo. Y que cada mes sea un item de la lista, y contenga los dias, en lugar de hacer una columna infinita los voy a separar por un peque;o espacio entre mes y mes.

Asi todas las apis de la flat list me van al pelo, cuando entra un mes en el view dispara el evento y puedo hacer la peticion de "fetcheame los eventos para este mes", de igual forma puedo setear redux "este mes esta activo", si los items que monta el flatlist son por semanas, o por dias (Y columnas) se complica la jodienda bastante.

1 respuesta
JuAn4k4

#53 ¿Por qué se complica por días? Me parece el más simple de todos. Hasta para pedir eventos. Si quieres te explico como lo veo yo, ya que hay dos conceptos mezclados, los datos y el flatlist para el render.

1 respuesta
desu

No me menciones porque no tengo ni idea.

Solo te voy a decir que creo que te complicas mucho.

Un smartphone de hoy en día sencillo es tan potente que te da igual la solución que apliques.

Incluso si es una función que tienes en un hotpath y se refresca a cada interacción p.e Cuanto va a tardar? 50ms?

De nuevo no entiendo muy bien el problema que comentabas pero mi intuición me dice que incluso la peor solución que se te ocurra sera valida.

isvidal

#54 Vaya por delante que no hablo del modelo de datos, estoy hablando de lo que se va a comer la flatlist, y lo mas sencillo y transparente (Me parece), es un array de meses, que dentro contiene un array de dias.

Early stage de lo que tengo hasta ahora:

Funciona para abajo tambien

1 respuesta
JuAn4k4

#56 Tu flat list podría llegar a ser números?

[202101, 202102, 202103, .... ] (meses)

No se para que quieres los días dentro si los puedes calcular fácilmente, incluso la primera y última semanas completas.

No se si el flatlist soporta un array virtual que vaya para delante y para atrás, sería lo más sencillo.

Me gusta más el scroll horizontal para pasar meses.

1 respuesta
1 mes después
isvidal

#57 El flat list contiene objetos con entre otras cosas meses con un datetime, genero 120 meses, y empiezo el flatlist a la mitad 60, de tal forma que puedes navegar 60 arriba y 60 abajo (Mas que de sobras), incluso me planteo bajarlo a 60 y 30 arriba y 30 abajo.

Dicho esto, el mes de los side projects es marzo/junio. Pero voy a intentar ir haciendo cositas (UI??) asi esos dos meses ire volando ya.

Usuarios habituales

  • isvidal
  • JuAn4k4
  • desu
  • r2d2rigo
  • Zoko
  • JohnVoiden
  • djamb