React to reactions

[petermasking]

Currently, we can react to posts. Next, we want to enable reactions to reactions as well. For the visualization, we've considered common options like nesting and expanding, but we've decided to go with a different approach. Since reactions can take up a lot of space (especially comic reactions), we want to treat reactions the same way as posts. This means you can click on a reaction to view its responses on a separate page. From there, you can navigate back to its parent (either a post or another reaction).

Implementation

In the domain we need to modify the reaction data model. Currently, it can only be coupled to a post. In the new situation it can be coupled to either a post or a reaction.

type DataModel = BaseDataModel &
{
    readonly postId?: string; // Make optional
    readonly reactionId?: string; // Added
    /* the rest*/
};

In the web-ui we need to add some routes and components.

<Route path="/post/:postId/highlight/:highlightId" element={protect(<PostHighlight />)} />
<Route path="/reaction/:reactionId" element={protect(<ReactionDetails />)} />
<Route path="/reaction/:reactionId/highlight/:highlightId" element={protect(<ReactionHighlight />)} />

The highlight components opens a post/reaction and load the highlighted reaction similar to the current ReactionDetails implementation. Note that the first route replaces the current /post/:postId/reaction/:reactionId route. This means that the current ReactionDetails component needs to be renamed to PostHighlight. The new ReactionDetails implementation will be similar to the PostDetails component.