Ch 92 create a tips section component for recipe detail page #89
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
A new file, tips.js, has been added to the API directory. This file contains a function to fetch tips from the Tasty API. This function is asynchronous and uses axios to make a GET request to the Tasty API. The function takes in three parameters: id, from, and size, with default values for from and size. The function returns the data received from the API or logs an error if the request fails. This addition will allow the application to fetch and display tips from the Tasty API, enhancing the user experience.
The new file fetch-tips-by-id.js is added to fetch tips related to a specific recipe by its id. This feature enhances the user experience by providing relevant tips for each recipe. The function is exported in the index.js file for easy access and use in other parts of the application.
…out unused useEffect The CSS classes have been reordered to follow a consistent pattern, improving readability and maintainability. The useEffect hook that was previously used to fetch favorites from local storage has been commented out as it is currently not in use, reducing unnecessary operations and improving performance.
…package The react-responsive-carousel package was added to the project to provide carousel functionality in the application. This will enhance the user interface by allowing for a more dynamic display of content. In the global.css file, unnecessary blank lines were removed to maintain clean and readable code.
…on to improve data structure Previously, the fetchTips function was returning the entire data object, which could include unnecessary information. Now, it directly returns the results property of the data object, which is the actual data we need. This change simplifies the data structure and makes it easier to handle the returned data.
…mponent The Tips component now receives the recipeId instead of the entire tips object. This change was made to reduce the amount of data being passed around and to allow the Tips component to fetch the tips it needs by itself, thereby improving data encapsulation and component independence.
A new file, tips.json, has been added to the mirageServer/endpoints/tips directory. This file contains a list of tips related to recipes. The server.js file has been updated to include a new endpoint that serves the tips.json data. This change allows the application to provide users with helpful tips related to the recipes, enhancing the user experience.
…usel The Tips component has been significantly enhanced. Instead of a static placeholder, it now fetches tips related to a specific recipe from the API and displays them in a carousel. This change provides a more interactive and informative user experience. The component also handles loading and error states, improving the robustness of the application. A new TipCard component has been introduced to display individual tips in a structured format.
✅ Deploy Preview for yumyumyesdev ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
ESLint Summary View Full Report
Report generated by eslint-plus-action |
…-for-recipe-detail-page
…-for-recipe-detail-page
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.
created tips API call and rendered them in a tips card in a carousel