Challenge focused on enhancing skills in ReactJS, React Query, React Hook Form and Chakra UI. The application already boasts various functionalities and stylings. The main objective was to add some code snippets to ensure the proper functioning of the image upload feature.
- Infinite Queries: Employed in this application to load images stored in the database. The loading mechanism is implemented with a single click on a button.
- Mutations: Typically used for data retrieval, mutations are responsible for creating/editing/removing data. In the application, they are utilized for registering a new image in the database.
- Invalidations: Used to manually mark a query as stale and force data refresh. Applied in this application to mark the image listing query as stale when the mutation to register a new image is successfully executed.
- useForm: Implementation of input registration for the image registration form, including input validations and error handling.
- Modal and Toast
- src/pages/index.tsx;
- src/components/Form/FormAddImage.tsx;
- src/components/Modal/ViewImage.tsx;
- src/components/CardList.tsx.
- Axios request with param
- Get and return next page param
- Format and flat data array
- Render loading screen
- Render error screen
- Render load more button if data has next page
- Required, less than 10 MB, and accepted formats validations
- Required, min and max length validations
- Required, max length validations
- Mutation API post request
- OnSuccess mutation
- Show error toast if image URL does not exist
- Execute async mutation
- Show success toast
- Show error toast if submit failed
- Clean form, states, and close modal
- Register image input with validations
- Send title errors
- Register title input with validations
- Send description errors
- Register description input with validations
- Modal with image and external link
- Modal useDisclosure
- Selected image URL state
- Function handle view image
- Card grid
- ModalViewImage
The detailed description of the challenge can be found at:
