Blog with ASP.NET Core and React/Redux. Part 4: Likes

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

Image for post
Image for post

Let’s start this part of this series by listing features we going to make as user stories.

  1. As a user, I want to be able to see recent stories, so that I can find something to read.
  2. As a user, I want to like stories, so I can show the author that content was useful for me.
Image for post
Image for post

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

Back-end

For listed features we want our back-end to have two additional endpoints. One to return recent stories and one to like or unlike specific story.

For now, we won’t bother ourselves with pagination and make endpoint return all stories. Let’s make pagination to be topic of another part:)

At first, let’s describe the view model for stories view and add configuration for Automapper.

Action in StoriesController that will return all stories.

First, we need Like entity.

Also, we need to create the new method in BlogContext class for Like entity configuration.

Updated User and Story models you can find here.

Since Like not implement IEntityBase we can’t inherit EntityBaseRepository.

Finally, action in StoriesController to toggle like for specific story.

In the previous part, we have made the script that populates the database with data from Medium. Now we can update this script so that we will have some likes in mock stories.

Front-end

On front-end part, we need to make a page where all stories will be listed and update already implemented story page with likes feature.

This page, for now, will list stories. First, let’s create a stateless component for story card.

And page itself.

We will omit other parts of the implementation of stories page since they are quite simple.

We already have the story page, and now we will update it with likes feature. Let’s add a new action, reducer part, and saga.

Finally, the updated story component.

In the next part, we will add real-time notifications for likes.

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