Blog with ASP.NET Core and React/Redux. Part 6: Collaborative editing

This is part of the series “Blog with ASP.NET Core and React/Redux”.

Image for post
Image for post

Often when you work on a story, you want to share your draft with somebody with better writing skills, so that he can go over the content and fix errors.

Image for post
Image for post

All code for this part you can find in front-end and back-end repositories.

Back-end

From back-end side, we want two new endpoints — one for sharing and one to get stories that shared with you. And of course, we want our back-end to send notifications when somebody changes the content of the story.

To add shares, we will go through the same steps as we deed with likes since we have the same many-to-many relationship here. We will create a Share model and update accordingly User and Story models.

ShareRepository will inherit EntityBaseRepository and will have one more additional method. If you followed up to this point you may remember that previously EntityBaseRepository required an entity to have Id field and it was not convenient since we have entities where two keys together work as a primary key(Like and Share) so I made some changes.

So we need two new endpoints. Let’s add them.

There is nothing new — very similar to what we had in toggle like and drafts actions.

Front-end

On front-end part, we will update saga where we receive notifications.

When we receive notification about changes in a shared draft this part of editor reducer will be triggered:

This way, when somebody changes part of the story, we will see the effect of real-time collaboration.

Other changes on front-end part include shared tab in your stories page and share dialog in editor page. But we will not cover them here.

For now, this is the last part of the series. Thanks, those who followed me up to this point.

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store