#Qué tal muy buenas gente

1 messages · Page 1 of 1 (latest)

naive ice
#

Yo lo haría de la siguiente forma:

En tu graphql/base de datos, almaceno la imagen con la representación horario de cierre: ({image: "imagen.png", date: 1666217949}), date puede ser un timestamp (número de una marca temporal representado en segundos, https://www.epochconverter.com/) o un campo Date (UTC, etc)

  • Lo que harías es que las consultas a tu graphql/DB estén condicionadas al timestamp/fecha del usuario, si es un horario muy temprano, la respuesta debería ser casi de todos las imágenes, pero si se hace en un horario nocturno debería de retornar las imágenes faltantes, esto lo puedes lograr haciendo consultar condicionales por un campo date

  • Respecto a como mostrar una y después la otra sin importar que el usuario refresque, si se hizo bien la parte anterior, la 1° imagen que retorne debe ser la imagen que se deba mostrar (ya que la condición horaria se hizo directamente en graphql/DB), lo que tendrías que hacer es estar condicionando la fecha actual del usuario (me imagino que ya lo tendrás con un setInterval de 1s) donde además de mostrar la cuenta regresiva, estar pendiente al momento que llega a 0s, cuando llegue a este tiempo deberías de hacer lo mismo con la 2° imagen (esto con el fin de que el usuario pueda ver la transición de imágenes) que pasa si el usuario recarga la página cuando llegue al 0s, la respuesta de la consulta de graphql/DB deberá modificar y no mostrar la imagen anterior, si no las imágenes faltantes por mostrar (incluyendo la nueva)

Si no me hice entender jaja, ten la libertad de preguntar nuevamente y lo vamos aclarando por partes 🙂

lunar tartan
#

Osea en este caso sería validar el date de la consulta.
Pero este date se estaría refrescando a cada momento que pase, no?

El administrador meterá las fechas y yo las almaceno en variables.
Después estas variables las agrego al UTC para que vaya como en el 2do paso.

Intento validar las variables y sacar el número (date: 1666217949) para que esté validando a cada segundo pero por parte de las condicionales y aparte el temporizador?

naive ice
#

@lunar tartan El administrador, al meter las imágenes deberá de poner una fecha (para saber a que hora se deben quitar), esa fecha es la que vas a usar para tus consultas

#

No entendí tu ultima pregunta

lunar tartan
#

El administrador solamente ingresará la fecha, las imagenes yo lo saco de otro lado (del graphql).

Conforme a la segunda pregunta, la fecha que ingresa el administrador en el formato es algo así: date: 1666217949
Que en todo momento va cambiando el numero hasta llegar a 0 o número negativo...

Me sugieres que haga validación de los números que arroja la fecha?

naive ice
#

Hola @lunar tartan una disculpa no responderte ayer

El administrador debe de ingresar una fecha acorde a las necesidades que se quiera, no se como se este haciendo la ingesta de datos (fecha e imágenes), no se si sea un input de tipo date y que permita seleccionar donde poner la fecha, lo que si no deberías hacer es que el administrador tenga que poner la representación de la fecha por ejemplo en timestamp (u otro formato que necesites), a la final el valor de la fecha se puede manejar de diferentes formas (timestamp, string con formato MM/DD/YY, etc...)

Aquí lo importante es que tengan una fecha y su aplicación sea capaz de jugar con este valor, le puse el ejemplo si se guardará como timestamp, pero debería de servir en cualquier formato que se guarde

#

Ya tu aplicación (con un setInterval) debes estar calculando la fecha actual del sistema con la fecha de la imagen que se este mostrando, tanto para ir mostrando la cuenta regresiva como para ir validando que ya se debe cambiar, si es un valor de 0 (o negativo, pero no debería estar en negativo, ya que debe pasar por el 0), se debe cambiar a la siguiente imagen

#

@lunar tartan si aun tienes alguna duda, puedo hacer un mini proyecto con un setInterval, simulando una cuenta regresiva 🙂

lunar tartan
#

Que tal, no te preocupes.
@naive ice
Haré el proyecto y al rato te paso el repo, para ver si lo estoy haciendo bien y cómo se debe. Te parece? Suficiente ayuda con la que me estás dando, te lo agradezco mucho.

#

Intentaré replicar lo que me mencionas y al rato regreso con actualización.
Espero todo en orden en el render de las cosas, porque luego ahí mi problema

naive ice
lunar tartan
#

@naive ice
En el ejemplo puse 3 tiempos y 3 personajes.
Cuando meto los 3 todo bien si permanezco en el sitio, pero si refresco se muestra el 1ro, 2do, hasta llegar con el que está funcionando el contador.
Quiero evitar ese rendereo, no sé como hacerle, me ayudarías mucho con esto. Gracias!

#

Implementé un 2do método, creo es el que me mencionaste. En una rama llamada: Prueba1.

Ahí estuve haciendo pruebas pero algunas veces hay problemas de render, no sé si sea por la consulta pero llega a parpadear.

naive ice
#

Hola @lunar tartan de acuerdo, déjame en una hora lo reviso y te comento

lunar tartan
#

Muchas gracias!

naive ice
#

@lunar tartan hice una adaptación de tu aplicación, me avisas si necesitas que te aclare algo 🙂

📎 main.zip
lunar tartan
#

Disculpa ya le entendí al código, pero no faltaría algo más en el executeCountTimer?
Para que se ejecute el contador?
Porque una vez lo pongo a prueba no marca nada en el temporizador.

Pero está increíble, con el setCount((prev) => prev + 1); puedo darme la idea de que acaba uno y manda a llamar al otro.

naive ice
#

Usa el archivo data.json para que veas el contador

lunar tartan
#

Sí, es lo que vi, desde el data.json lo invoca.
De hecho si lo tiene.

Ya si quisiera que se agregase la fecha desde un input lo sacaría y lo haría como en el repo.

Pero no sé pq no se logra visualizar el contador si lo tengo activo con fechas activas. (No muestra el tiempo corriendo)

Solamente trabaja si le pongo un console.log a la constante distance

Y si refresco se entorpece.

naive ice
lunar tartan
#

Aaaah sí, ya decía yo que algo, yo creí que tenía que agregar otro useEffect para eso.

Oye, cómo sabes tanto?
Quisiera poder mejorar mi habilidad en este ámbito de programación.

Eres muy bueno, Juan.

naive ice
lunar tartan
#

Joer, eso es claro, la práctica, pero se olvidan las cosas jajaj
Me apoyo mucho de materiales que tengo pero tener la lógica es lo que quisiera desarrollar, obviamente teniendo bases es más fácil