Graphic details page

Making graphic list items clickable; and the editor(detail) route. In the process, we'll learn how to use React's Higher Order Components with Reagent.

Clap
0|0|

With the graphics list in place, we will now build the details page for each graphic. The details page will include an editor component that will let us draw the actual graphic. In this chapter, we'll focus on the routing aspect and not concern ourselves with the actual editor.

Graphic Details Wireframe

Parsing route params#

React Router provides various mechanisms to parse route params (:graphicId in our case). There is a higher-order-component (HOC)-based approach using withRouter HOC, and a hooks-based approach using the useParams hook. We are going to use the withRouter HOC in our app.

The withRouter HOC expects a React component as an argument. One small issue - ratoms don't work with React! However ratoms do work as children of React components. The solution is to create a transparent wrapper to the desired Reagent component and pass in the props manually. Then reactify this wrapper component, so ratoms continue to work. Let's understand this with an example:

Now x-page-container is reactified and cannot use ratoms, however, its children can safely use ratoms.

Graphics page Switch#

The details for a graphic will be available at /graphics/:graphicId route. As per our app structure, the namespace responsible for this route is app.pages.graphics.detail.

We will also need an additional Switch component in app.pages.graphics since we need to compose routes as follows:

Route Structure

Let's update our app.pages.graphics namespace to accommodate this Switch: