- Implement a Yelp-like application where users can create and delete both restaurants and reviews of each restaurant.
In this lab, we will practice creating and removing various items using Redux. We are working with two different resources, with each restaurant having many reviews and reviews belonging to a restaurant. Similar to the previous Redux delete lab, implement container components to connect to your Redux store - one for restaurants and one for reviews.
Hint: Container components can be nested as children just as any other component, even if they aren't actually displaying any visual content.
- Start off by working on the components for displaying restaurants. First, you'll need to create a RestaurantsContainer component that will connect to Redux and pass the appropriate props down to its children. Then you will need a RestaurantInput component that allows a user to create new restaurants. You will then want to create a Restaurants component that displays a list of restaurants, and a Restaurant component which is responsible for each restaurant (and contains the button to delete). Users should also be able to delete restaurants. To implement this, you will need to give each restaurant an ID.
Note: To implement IDs, it may be worth integrating another library in the reducer called cuid. You can see that we already imported it in the reducer file for you. The library will generate a unique id for you:
import cuid from 'cuid';
console.log(cuid());
// ch72gsb320000udocl363eofyFor simplicity with testing, restaurant data stored in Redux should have text
and id keys.
- You will also need to create a reviews resource. Similar to the components for Restaurant, users should be able to create a review that is specifically associated with the related restaurant, and those reviews should be displayed underneath the related restaurant. Because reviews are associated to specific restaurants, the ReviewsContainer should be nested within the Restaurant component. Users should also be able to delete a specific review.
Note: When building your input forms, only use basic input elements for
this lab's tests.
Since you'll need to be able to associate reviews to restaurants, and delete
specific reviews, reviews stored in Redux should have a text key for the
review content, a restaurantId key to associate and display the review with a
specific restaurant and an id key unique to the review itself.
Once all tests are passing, you'll be able to create and delete restaurants and their specific reviews. Take note of the structure of this app - containers can end up anywhere in an app, even nested way down the component tree. This set up can feel a bit counterintuitive initially since we could have a presentational component that has a container component as a child, but the benefit is that none of the non-container components have any code related to Redux! They're just firing props!
Bonus: So, we're now able to Create, Read and Delete in Redux. You have learned all you need to know to complete what is required to Update an item. Think about how this would be done. You would want to probably include an additional button with each restaurant and review that, when clicked, will open an input where a user could modify the contents of a specific item. When sent to your reducer, instead of filtering you might consider mapping — i.e. an action where all reviews are returned, but if a review's id matches, the newly submitted content is returned instead.