0

I have a lightning page displaying the feeds of a specific group in my org. I want to implement the Like/Unlike functionality for each feed. The Like and unlike works but what I am not able to do is toggling the "Like" button to "Unlike" and vice versa.For example, if I Like a feed, it is success in the cloud server but the Like button in my page need to be changed to "Unlike" without refreshing the browser. Below is the part of the code. What is the right approach ?

Component

<aura:component  access="global" controller ="ChatterFeedController">
<!--Attribute-->
<aura:attribute name = "groupattid" type="String" /> 
<aura:attribute name = "groupatt" type="String[]" />
<aura:handler name="init" action="{!c.userFeedItem}" value="{!this}"/>

   <aura:iteration items="{!v.groupatt}" var = "feed"> 
    // Header class hidden//
     <footer class="slds-post__footer">
      <ul class="slds-post__footer-actions-list slds-list--horizontal">
        <li class="slds-col slds-item slds-m-right--medium">

           <aura:renderIf isTrue="{!feed.capabilities.chatterLikes.isLikedByCurrentUser}">
           <button onclick="{!c.unliketoggle}" type="button" data-feedid="{!feed.id}" data-likeid="{!feed.capabilities.chatterLikes.myLike.id}">
            <lightning:icon iconName="utility:like"  size="small"  alternativeText="UnLike this feed"/>
            <b>UnLike</b>
           </button>     

            <aura:set attribute="else">
               <button onclick="{!c.liketoggle}" type="button" data-feedid="{!feed.id}">
                 <lightning:icon iconName="utility:like"  size="small"  alternativeText="UnLike this feed"/>
                 <b>Like</b>
               </button>      
            </aura:set>          
          </aura:renderIf>  


        </li> 
      </ul>
    </footer>

     </article> 
     </aura:iteration> 

controller

     ({
               //Like functionality
               liketoggle: function(component,event,helper){
               //console.log('Checked');
               var likepush = component.get("c.likeFeedItem");
               var feedItemID = event.currentTarget.dataset.feedid;
               var groupID = component.get("v.groupattid");

             likepush.setParams({
                               "groupId" : groupID,
                               "feedItemId" : feedItemID
                               });
             likepush.setCallback(this,function(response){
             var state = response.getState();
                    if(state==="SUCCESS"){
                    var likestatus = response.getReturnValue();
                    likestatus.capabilities.chatterLikes.isLikedByCurrentUser = true;

               } else {
                     console.log('Problem getting feed, response state: ' + state);
                } 

           });
           $A.enqueueAction(likepush);
        },

    //Unlike
    unliketoggle: function(component,event,helper){
      //console.log('Checked');
      var unlikepush = component.get("c.unlikeFeedItem");
      var LikeItemID = event.currentTarget.dataset.likeid;
      var groupID = component.get("v.groupattid");
       console.log('feedItemID-->'+feedItemID+'   GroupId-->'+groupID);
        unlikepush.setParams({
                             "groupId" : groupID,
                             "likeId" : LikeItemID
                           });
        unlikepush.setCallback(this,function(response){
        var state = response.getState();
        console.log('UnState-->'+state);
        if(state==="SUCCESS"){
          likestatus.capabilities.chatterLikes.isLikedByCurrentUser =false;
        console.log('Unlikestate: ' + state+ 'Return Value-->'+likestatus.capabilities.chatterLikes.isLikedByCurrentUser);
       // component.set("v.unlike",likestatus.capabilities.chatterLikes.isLikedByCurrentUser);
        } else {
                console.log('Problem getting feed, response state: ' + state);
            } 

     });
       $A.enqueueAction(unlikepush);
    },


})

chatterfeedcontroller.cls

    global with sharing class ChatterFeedController {

    public Id   m_subjectid                 {get;set;}
    public Id   m_communityid               {get;set;}

    public static final String communityId = Network.getNetworkId(); 

    @AuraEnabled
    global static ConnectApi.FeedElementPage getFeedData(String groupId) {
        //TODO check to see if FeedElementPage has limits
        ConnectApi.FeedElementPage feedElementPage =  ConnectApi.ChatterFeeds.getFeedElementsFromFeed(communityId,ConnectApi.FeedType.Record,groupId);
        //System.debug(JSON.serializePretty('feedElementPage-->'+feedElementPage+'feedElementPage-->'));
        System.debug('feedElementPage-->'+feedElementPage+'feedElementPage-->');
        return feedElementPage;
    }


    @AuraEnabled
    global static ConnectApi.FeedElementPage likeFeedItem(String groupId,String feedItemId) {
        ConnectApi.ChatterFeeds.likeFeedElement(communityId, feedItemId);
        return getFeedData(groupId);
    }

    @AuraEnabled 
    global static ConnectApi.FeedElementPage unlikeFeedItem(String groupId,String likeId) {
        ConnectApi.ChatterFeeds.deleteLike(communityId, likeId);
        return getFeedData(groupId);
    }

}
  • Your not updating groupatt after like and unlike and thus the boolean test for isTrue never changes. groupatt is what you are iterating over using a var of feed which you use in your aura:if. I see you are getting the value in your callback but you never update your attributes – Eric Apr 25 '17 at 22:17
  • Thanks @Eric. I did try updating the groupatt but then the whole page refreshes when clicked Like/Unlike. How to toggle just the button ? – Brav Apr 26 '17 at 20:01
2

The reason why the whole page refreshes when you set groupAtt is because the likeFeedItem or the unlikeFeedItem method returns a whole list feedData , which when setting to groupAtt would cause the aura:iteration to execute again and thus seemingly it looks like the entire DOM is refereshed.

However, if you do something as follows , you could avoid the whole DOM rendering.

Controller.js :

likepush.setCallback(this,function(response){

    var state = response.getState();
    if(state==="SUCCESS"){
        // display the unlike or like button using slds-hide 
        var cmpTarget = component.find('theclickedButton'); //use events to get the clicked button
        $A.util.addClass(cmpTarget, 'slds-hide');    
    } 
    else {
        console.log('Problem getting feed, response state: ' + state);
    } 

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.