search

tomasg88 / bvlc

Bomberos voluntarios de Lujan de Cuyo
https://bomberoslujandecuyo.org.ar/
3 stars 0 forks source link

Listado Noticias - Buscador #154

Open tomasg88 opened 4 months ago

tomasg88 commented 4 months ago

Descripción

Necesitamos agregar un buscador en la página de Noticias. Algunas preguntas para responder y así ayudar a definir cómo lo hacemos.

  1. Vamos a usar el input de alguna líbrería? O usamos el html <input /> pelado y le damos estilos nosotros?
    • Si queremos usar alguna líbrería tipo ShadCDN, Radix, MaterialUI, recordemos instalar sólo el componente que necesitamos, que en este caso sería el Input.
  2. Cómo vamos a "activar" el campo de búsqueda? A medida que el usuario tipea va buscando? o tiene que apretar Enter al final?
  3. Cómo hacemos para comparar el valor que puso el usuario? Y contra qué campos lo compararíamos?
  4. Cómo le indicamos al usuario si su búsqueda no tiene resultados?
  5. Cómo se restaura la vista inicial una vez que el usuario buscó algo? O dicho de otro modo, cómo haría el usuario para cancelar la búsqueda?

La idea es no pensar en el código, sino pensar en la experiencia. Qué harías vos @emagarc si fueras el usuario?

emagarc commented 4 months ago

Para realizar el buscador, seguí la misma lógica que en el PR anterior, siguiendo el estándar de shadcn.

  1. Cree un componente llamado Input en su correspondiente carpeta dentro de la carpeta principal components.
  2. Implementé la lógica en la página de noticias.
  3. Ajusté estilos acorde al layout general.
  4. Eliminé clases que no usamos.
  5. En cuanto a la lógica del paginado, el mismo filtra la lista buscando entre títulos de noticias. Se activa ni bien el usuario comienza a tipear sobre el campo de búsqueda. El item buscado se maneja con un estado propio usando useState. El campo de búsqueda (input) recibe una función onChange que setea el item buscado, a su vez que mientras el usuario busca, setea la página actual del paginado a 1.

Además, hice un retoque de estilos cuando el usuario clickea el buscador, dando un efecto de borde acorde al layout general de la página.

emagarc commented 4 months ago

Agrego además un ternario que maneja la posibilidad de no haber resultados en la busqueda mostrando un contenedor con el mensaje correspondiente.