Adding the Restaurant detail page - Deeplinking and React portals
Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.
In this lesson, we will be adding the
RestaurantDetailPage to Storybook. It is a quite interesting page as it is interactive (you can add select items to be added to the cart), it fetches data, and presents multiple states whether the page was successfully loaded or something failed:
Analyzing the component#
Like it was mentioned in previous lessons, it's important to understand what the page needs in order to render correctly. Let's first run the app and interact with it to understand more about the
From the Home page, select a restaurant to get to the Restaurant detail page:
For reference, let's open the
src/pages/RestaurantDetailPage/RestaurantDetailPage.tsx file as well. This is a relatively complex page that does a bunch of things! Let's break it down:
RestaurantDetailPage contains lots of components that use styled-components for theming, so the styled-components decorator is necessary. Given we already added a global decorator for this in a previous lesson, there's no need to do anything as it will be applied for all stories!
State management (Redux)
In order to keep things in sync between the food items, shopping cart and the rest of the application, this page uses functionality from Redux, such as
useDispatch. We already created a decorator to add support for that in the previous lesson, so there's no need to do anything!
The page uses functionality from
react-router-dom such as
useParams (to get the restaurant ID via query params), which requires the component to be rendered with a simulated browser history in order to reproduce deeplinking. We will be adding support for it.
RestaurantDetailPage presents a modal when interacting with the menu items. Modals are dynamically projected into elements by using React portals, and we need to add support for these as well if we want modals to be shown on screen:
We will be adding support for it.
After getting the restaurant ID via query params, the page fetches detailed data about the restaurant and can result in the following states: loading (while the data is fetching), success (when data returns with status 200), not found (when response has status 404) and error (when response has status 500). We already know how to mock these requests using MSW, and we'll go over it one more time to add stories for each of these scenarios.
Creating the stories file#
Let's create the
src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx file. Let's also add the
design parameters to have a fullscreen experience and connect the Figma design.
Let's add the
design parameter at the story level this time, because every story has a different design. Also, the designs addon allows us to embed Figma prototypes which are interactive in the panel, so let's try that! Here's the design link for the default (success) state: https://www.figma.com/proto/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=169%3A510&scaling=scale-down-width&page-id=135%3A257&starting-point-node-id=135%3A258
Now let's see how it looks like on Storybook: