Kevin lopez alvarez prueba frontend epayco #11
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Installed Tailwind CSS, PostCSS, and Autoprefixer. Configured tailwind.config.js to include project paths. Added postcss.config.js for Tailwind processing. Created and configured index.css with Tailwind directives (@tailwind base, @tailwind components, @tailwind utilities). Imported Tailwind CSS into main.tsx. Verified Tailwind CSS setup with a basic UI in App.tsx. Added extension recommendation for Tailwind CSS IntelliSense in VS Code.
- Added type files for Input, Textarea, Button, Form, and ItemList. - Refactored components to use separated types. - Improved maintainability and extensibility.
…ly added item - Show the full list of items if no new item is added. - Display only the newly added item when a new item is successfully created.
- Moved ItemList to molecules for better granularity. - Centralized shared types and kept local types near their components. - Improved project structure for maintainability and scalability.
- Moved API calls (fetchItems, addItem) to a centralized module (items.api.ts). - Refactored hooks (useItems, useAddItem) to consume API module. - Improved modularity, testability, and scalability.
…ontent area - Created Layout component in templates directory. - Added fixed navbar for consistent navigation.
- Implemented loading spinner while adding a new item using mutation.isLoading. - Differentiated between loading states for fetching items and adding items. - Updated Home component to conditionally display loading spinner during add operation. - Enhanced user experience with clear loading feedback for form submissions.
…ling - Added a border-bottom to the <h3> element for better visual separation. - Ensured text in <h3> and <p> wraps correctly with 'break-words'. - Improved overall readability and aesthetics of the Item component.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Configuración Inicial del Proyecto:
Se estableció la estructura base del proyecto utilizando React y TypeScript.
Se integró Tailwind CSS para el manejo de estilos.
Implementación de Componentes Atómicos:
Se crearon componentes básicos como Button, Input, Textarea y Loading, ubicándolos en la carpeta atoms.
Cada componente se diseñó para ser reutilizable y mantener una responsabilidad única.
Se añadió un borde inferior al título (h3) en el componente Item para mejorar la separación visual.
Se ajustó el manejo de texto en Item para evitar desbordamientos, permitiendo que el texto se ajuste automáticamente con saltos de línea (break-words).
Desarrollo de Moléculas:
Se implementó el componente Item, que representa un ítem individual.
Se construyó el componente ItemList, una molécula que organiza y muestra múltiples instancias del componente Item.
El componente ItemList tiene la responsabilidad de renderizar una lista de ítems sin agregar lógica adicional.
Creación de Organismos:
Se desarrolló el componente Form, un organismo que combina los átomos Input, Textarea y Button.
El Form maneja la validación y envío de datos mediante react-hook-form.
Además, gestiona errores dinámicos y lógica avanzada como eventos de onSubmit.
Separación de Tipos y Propiedades:
Se definieron tipos específicos para cada componente en archivos separados dentro de la carpeta types.
Por ejemplo:
Item.types.ts: Define los tipos para el componente Item.
ItemList.types.ts: Define los tipos para la molécula ItemList.
Form.types.ts: Contiene los tipos relacionados con las propiedades del formulario.
Refactorización de Hooks:
Se crearon los hooks useItems y useAddItem para manejar la lógica de obtención y adición de ítems, respectivamente.
Se separó la lógica de llamadas a la API en un módulo api/items.api.ts, siguiendo el principio de responsabilidad única.
Actualización del Componente Principal (Home):
Se refactorizó el componente Home para utilizar los hooks useItems y useAddItem.
Se implementó la funcionalidad para que, al agregar un nuevo ítem, este sea el único listado en pantalla.
Se añadió un botón para volver a mostrar la lista completa de ítems, que aparece únicamente después de agregar un nuevo ítem.
Se integró un indicador de carga (Loading) mientras se realiza la acción de agregar un ítem.