Implemented create on UI

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml

@@ -1,11 +1,11 @@
 @model Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewModel
-<span class="cms-reaction-selection">
+<span class="cms-reaction-selection" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
     <div class="cms-reaction-selection-available-reactions">
         Pick a reaction:
         @foreach (var reaction in Model.Reactions)
         {
             <span class="mr-2">
-                <img src="@reaction.Icon" width="16" height="16" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-highlighted" : "")"/>
+                <img src="@reaction.Icon" width="16" height="16" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-highlighted" : "")"/>
             </span>
         }
     </div>
@@ -14,7 +14,7 @@
         @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
         {
             <span class="mr-2">
-                <img src="@reaction.Icon" width="20" height="20" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-highlighted" : "")"/>
+                <img src="@reaction.Icon" width="20" height="20" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-highlighted" : "")"/>
                 <span> @reaction.Count</span>
             </span>
         }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js

@@ -8,12 +8,16 @@
             $availableReactions.find('.cms-reaction-icon').each(function(){
                 var $icon = $(this);
                 $icon.click(function(){
-
+                    volo.cmsKit.reactions.reactionPublic.create({
+                        entityType: $this.attr('data-entity-type'),
+                        entityId: $this.attr('data-entity-id'),
+                        reactionName: $icon.attr('data-name')
+                    });
                 });
             });
         }
 
-        $('.cms-reaction-selection').each(initReactionSelection)
+        $('.cms-reaction-selection').each(initReactionSelection);
 
     });
 })();