Implemented register and view news reactions.

src/Microservices/Services/News/NewsAggregator.News.Mvc/Components/NewsReactions.cs

@@ -0,0 +1,24 @@
+using MediatR;
+using Microsoft.AspNetCore.Mvc;
+using NewsAggregator.News.UseCases.Queries;
+
+namespace NewsAggregator.News.Mvc.Components
+{
+    public class NewsReactions : ViewComponent
+    {
+        private readonly IMediator _mediator;
+
+        public NewsReactions(IMediator mediator)
+        {
+            _mediator = mediator;
+        }
+
+        public async Task<IViewComponentResult> InvokeAsync(Guid newsId, 
+            CancellationToken cancellationToken = default)
+        {
+            var reactions = await _mediator.Send(new GetNewsReactionsQuery(newsId), cancellationToken);
+
+            return View(reactions);
+        }
+    }
+}

src/Microservices/Services/News/NewsAggregator.News.Mvc/Controllers/NewsController.cs

@@ -1,6 +1,7 @@
 using MediatR;
 using Microsoft.AspNetCore.Mvc;
 using NewsAggregator.News.DTOs;
+using NewsAggregator.News.Extensions;
 using NewsAggregator.News.Messages;
 using NewsAggregator.News.UseCases.Queries;
 using System.ComponentModel.DataAnnotations;
@@ -32,12 +33,20 @@ public async Task<IActionResult> GetNewsPageByIdAsync([Required][FromRoute(Name
         {
             var news = await _mediator.Send(new GetNewsByIdQuery(id), cancellationToken);
 
-            await _mediator.Publish(new NewsViewed(id, 
-                HttpContext.Request.Headers.FirstOrDefault(header => header.Key == "X-Real-IP").Value.FirstOrDefault() 
-                    ?? HttpContext.Connection.RemoteIpAddress?.ToString() 
-                        ?? string.Empty));
+            await _mediator.Publish(new NewsViewed(id, HttpContext.GetConnectionIpAddress()));
 
             return View("News", news);
         }
+
+        [HttpPost]
+        [Route("{newsId:guid:required}/sendNewsReaction")]
+        public async Task<IActionResult> SendNewsReactionAsync([Required][FromRoute(Name = "newsId")] Guid newsId,
+            [Required][FromQuery(Name = "reactionId")] Guid reactionId, CancellationToken cancellationToken = default)
+        {
+            await _mediator.Publish(new NewsReacted(newsId, reactionId, HttpContext.GetConnectionIpAddress()),
+                cancellationToken);
+
+            return Ok();
+        }
     }
 }

src/Microservices/Services/News/NewsAggregator.News.Mvc/Views/News/News.cshtml

@@ -90,6 +90,38 @@
         video[itemprop="video"] {
             width: 100%;
         }
+
+        .news-reactions {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+            .news-reactions .news-reactions__reaction {
+                margin: 5px;
+                padding: 5px;
+                gap: 5px;
+                min-width: 150px;
+                max-width: 150px;
+                cursor: pointer;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid var(--bs-border-color);
+                border-radius: 5px;
+                font-weight: bold;
+                font-size: 20px;
+            }
+
+            .news-reactions .news-reactions__reaction .news-reactions__reaction__counter {
+                    overflow: hidden;
+                    -webkit-line-clamp: 1;
+                    text-overflow: ellipsis;
+                    line-clamp: 1;
+                    -webkit-box-orient: vertical;
+            }
     </style>
 }
 
@@ -161,6 +193,7 @@
                 </div>
             }
         </article>
+        <vc:news-reactions news-id="@Model.Id" />
     </div>
     <div class="col-md-4">
         <div>

src/Microservices/Services/News/NewsAggregator.News.Mvc/Views/Shared/Components/NewsReactions/Default.cshtml

@@ -0,0 +1,13 @@
+@model IReadOnlyCollection<NewsReactionDto>
+
+<div class="news-reactions">
+    @foreach (var reaction in Model)
+    {
+        <div class="news-reactions__reaction" data-reaction-newsId="@reaction.NewsId" data-reaction-id="@reaction.ReactionId">
+            <i class="bi @reaction.ReactionIconClass" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="@reaction.ReactionTitle" style="color: @reaction.ReactionIconColor"></i>
+            <span class="news-reactions__reaction__counter" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="@(reaction.Count.ToString("N0", new CultureInfo("en-US")))">
+                @reaction.Count.ToString("N0", new CultureInfo("en-US"))
+            </span>
+        </div>
+    }
+</div>

src/Microservices/Services/News/NewsAggregator.News.Mvc/Views/Shared/Components/NewsReactions/Default.cshtml.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace NewsAggregator.News.Mvc.Views.Shared.Components.NewsReactions
+{
+    public class DefaultModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}

src/Microservices/Services/News/NewsAggregator.News.Mvc/Views/Shared/_Scripts.cshtml

@@ -1,10 +1,12 @@
 <script src="~/lib/jquery/dist/jquery.min.js"></script>
+<script src="~/lib/axios/dist/axios.min.js"></script>
 <script src="~/lib/moment/dist/moment.min.js"></script>
 <script src="~/lib/signalr/dist/signalr.min.js"></script>
 <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 <script src="~/js/search-news-modal.js"></script>
 <script src="~/js/pagination.js"></script>
 <script src="~/js/hotline.js"></script>
 <script src="~/js/time-converter.js"></script>
+<script src="~/js/news-reaction.js"></script>
 <script src="~/js/site.js"></script>
 <script src="~/js/color-modes.js"></script>

src/Microservices/Services/News/NewsAggregator.News.Mvc/Views/Shared/_Styles.cshtml

@@ -1,5 +1,7 @@
 <link rel="stylesheet" href="@("https://cdn.jsdelivr.net/npm/@docsearch/css@3")" asp-append-version="true" />
 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
+<link rel="stylesheet" href="@("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css")" />
+<link rel="stylesheet" href="~/lib/bootstrap/dist/" />
 <link rel="stylesheet" href="~/css/custom.css" asp-append-version="true" />
 <link rel="stylesheet" href="@("https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap")" asp-append-version="true" />
 <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

src/Microservices/Services/News/NewsAggregator.News.Mvc/wwwroot/js/news-reaction.js

@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', function (e) {
+    var newsReactionsContainer = document.querySelector('div.news-reactions');
+    var newsReactions = newsReactionsContainer?.querySelectorAll('div.news-reactions__reaction[data-reaction-newsId][data-reaction-id]');
+
+    if (newsReactions) {
+        newsReactions.forEach(function (newsReactionElement) {
+            newsReactionElement.addEventListener('click', async function () {
+                var newsId = newsReactionElement.getAttribute('data-reaction-newsId');
+                var reactionId = newsReactionElement.getAttribute('data-reaction-id');
+
+                try {
+                    await axios.post(`http://${window.location.hostname}/news/${newsId}/sendNewsReaction?reactionId=${reactionId}`);
+                    alert('Sending a reaction to the news was successful.');
+                } catch (error) {
+                    alert('An error occurred when sending a reaction to the news');
+                }
+            });
+        });
+    }
+});

src/Microservices/Services/News/NewsAggregator.News/DTOs/NewsReactionDto.cs

@@ -0,0 +1,17 @@
+namespace NewsAggregator.News.DTOs
+{
+    public class NewsReactionDto
+    {
+        public Guid NewsId { get; set; }
+
+        public Guid ReactionId { get; set; }
+
+        public string ReactionTitle { get; set; }
+
+        public string? ReactionIconClass { get; set; }
+
+        public string? ReactionIconColor { get; set; }
+
+        public int Count { get; set; }
+    }
+}