Listado Noticias - Paginado

[emagarc]

Creación del paginado en Noticias:

1. Se procederá a crear un nuevo componente llamado Pagination.tsx donde se expondrá el código y la lógica que tendrá nuestro paginado con algunos exports:

export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, }

2. Se escribirá el código con la lógica de la paginación en la pagina de noticias.
3. Se estilizarán los componentes siguiendo como parámetro los estilos ya presentes en el repositorio.

Para todo este feature se creara una nueva rama local y remota con el numero de issue #142 ---- ema-feat-142

[emagarc]

Mi plan es realizar 3 commits, uno por cada punto mencionado, en la medida que vayan estando completos.

[tomasg88]

Genial @emagarc !! Cómo se llama la librería que vas a usar para el paginado? Hay documentación de como usarla?

[emagarc]

Me base en el paginado de Shadcn https://ui.shadcn.com/ pero no instale nada. Intente instalar primero pero sucede que me dio problemas por como esta estructurado el proyecto de bomberos y como suelen estar estructurados los proyectos que van a utilizar shadcn sobre todo el archivo tailwind.config.js. No tenia sentido instalar muchas dependencias y cambiar todo por lo cual me base en el codigo que utiliza shadcn para estructurar el paginado y lo adapte al repositorio de bomberos. Esta en proceso todavia pero va bien encaminado. Esta semana entrante termino de dejarlo no solo en funcionamiento si no bien legible y con el codigo estructurado para que quede bien.

[tomasg88]

Shadcdn. Ok.

• Te fijaste si se puede instalar únicamente el componente (o los componentes) que sean sólo para el paginado?
• Viste alguna otra lib?

[emagarc]

Hola Tom, paso a explicar un poco mejor cómo va a estar estructurado el paginado. La forma de estructurarlo está basada en los componentes de Shadcn y en la forma en la que suelen trabajarse. Sin embargo, decidí no instalar el componente ya que no encajaba con la estructura del proyecto, además de venir con configuraciones y características que no eran necesarias y/o implicaban reestructurar otros archivos. Me di cuenta de que podía tomar la lógica del paginado de Shadcn y adaptarla al proyecto de bomberos, descartando las cosas que no nos sirven. Para empezar, tuve que instalar algunas dependencias que paso a nombrarte a continuación.

1. radix-ui/react-slot: "^1.0.2", ( Nos permite pasar contenido de un componente padre a uno hijo de forma mas flexible y dinamica)
2. class-variance-authority: "^0.7.0", ( Proporciona utilidades para trabajar con variantes de clases en CSS, especialmente con Tailwind)
3. lucide-react: "^0.344.0", ( Es una biblioteca de íconos SVG moderna )

Crearé un archivo dentro de la carpeta lib llamado utils.ts

`import { type ClassValue, clsx } from 'clsx'; import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

export function absoluteUrl(path: string) { return ${process.env.NEXT_PUBLIC_APP_URL}${path}; } ` Este código en el archivo utils proporciona dos funciones de utilidad:

Función cn (classNames): Combina clases CSS utilizando la biblioteca clsx y las adapta a las configuraciones de Tailwind CSS utilizando tailwind-merge.

Función absoluteUrl: Genera una URL absoluta concatenando una ruta relativa con la URL base de la aplicación definida en la variable de entorno NEXT_PUBLIC_APP_URL.

Una vez instalados estos paquetes y creado el archivo utils.ts se creará un nuevo componente dentro de la carpeta ya existente de Button, a este componente lo llamaré ButtonPagination.tsx Este componente será similar al Button ya existente sin embargo aqui defino algunas variantes, estilos y tamaños que tendrán y heredaran los botones con los que posteriormente armare el paginado. Aqui es donde utilizo los paquetes:

1. import { Slot } from '@radix-ui/react-slot';
2. import { cva, type VariantProps } from 'class-variance-authority';

Luego en la misma carpeta de Components, crearé un nuevo componente dentro de su respectiva carpeta tal como están estructurados los otros, llamado Pagination.tsx. Este componente contiene todos los "Subcomponentes" que se utilizaran en el paginado a realizar en la pagina de noticias, asi como estilos, tamaños, funciones, etc. Pagination.tsx importa las variantes definidas previamente en ButtonPagination.tsx tal como:

import { ButtonProps, buttonVariants } from '../Button/ButtonPagination'; A continuación procederé a crear la rama remota y local e ir subiendo las actualizaciones para que puedas ir viendo.

[emagarc]

Actualmente creada la rama remota ema/feat-142 con el primer commit.

[emagarc]

Segundo commit con el componente Pagination.tsx sus props y estilos definidos y modificada la lógica en la pagina Noticias para mostrar el paginado. El paginado se encuentra funcionando y muestra 5 noticias por página. El tercer commit va a ser sobre la pagina noticias retocando algunos estilos para dejar bien ubicado los botones y demás.

[emagarc]

Listo, modificada la pagina de noticias con un border amarillo inferior tal como tiene en otros sectores la pagina web, ademas modifique el padding tanto del contenedor de noticias como del paginado para que queden en el tamaño justo. Espero que puedas verlo y darme review y si todo esta ok, paso a planificar el Buscador.

[tomasg88]

PR 145