Day 22 – Already In Friend List – Working With Arrays

In a recent app I was building, I was allowing the user to build a list of ‘friends’ on stackoverflow.com. A user can add friends by viewing their detail page and clicking a button. I wanted to display a different button if they were already in their friend list and this is how I did it.

ruleset a60x513 {
  meta {
    name "adding-removing-friends-from-array"
    description <<
      adding-removing-friends-from-array
    >>
    author "Mike Grace"
    logging on
  }

  rule show_off_friends_list {
    select when pageview "example\.com"
    foreach ent:myFriends setting (friend)
    {
      prepend("body", "#{friend}<br/>");
    }
  }

  rule viewing_a_users_detail_page {
    select when pageview "http://stackoverflow\.com/users/([0-9]*)/" setting (possibleFriendId)
    pre {
      friends = ent:myFriends || [];
      friended = friends.has(possibleFriendId);
      friendMeHtml =<<
        <button id="friend-me" friendid="#{possibleFriendId}">Add as friend</button>
      >>;
      alreadyFriendHtml =<<
       <button id="unfriend-me" friendid="#{possibleFriendId}">Remove as friend</button>
      >>;
      annotation = (friended) => alreadyFriendHtml | friendMeHtml;
    }
    {
      emit <|
        app = KOBJ.get_application("a60x513");
        $K(annotation)
          .appendTo(".vcard tr:eq(0) td:eq(4)");
        $K("#friend-me").live("click", function() {
          var friend = $K(this).attr("friendid");
          app.raise_event("add_a_friend", {"friend":friend});
        });
        $K("#unfriend-me").live("click", function() {
          var friend = $K(this).attr("friendid");
          app.raise_event("remove_a_friend", {"friend":friend});
        });
      |>;
    }
  }

  rule add_a_new_friend {
    select when web add_a_friend
    pre {
      friend = event:param("friend");
      friends = ent:myFriends || [];
      newFriends = friends.union(friend);
      annotation =<<
        <h2>Friended!</h2>
      >>;
    }
    {
      emit <|
        $K("#friend-me").remove();
        $K(annotation).appendTo(".vcard tr:eq(0) td:eq(4)");
      |>;
    }
    fired {
      set ent:myFriends newFriends;
    }
  }

  rule remove_a_new_friend {
    select when web remove_a_friend
    pre {
      friend = event:param("friend");
      friends = ent:myFriends || [];
      newFriends = friends.difference(friend);
      annotation =<<
        <h2>Removed as friend</h2>
      >>;
    }
    {
      emit <|
        $K("#unfriend-me").remove();
        $K(annotation).appendTo(".vcard tr:eq(0) td:eq(4)");
      |>;
    }
    fired {
      set ent:myFriends newFriends;
    }
  }
}
  • 11-17 listing friends list on example.com for debugging
  • 20 select on a users detail page and capture their user ID setting as the variable ‘possibleFriendId’
  • 22 get array of friends from entity variable and if not yet set return empty array
  • 23 check to see if the currently viewed user is in the friends list using the sets operator of has
  • 24-29 build HTML for if a friend and not yet a friend
  • 30 set which HTML to put on the page based on if already friended or not
  • 33-45 emit JavaScript for both friending and un-friending situations
  • 54 using the sets operator of union to add friend to friends list
  • 61 remove add as friend button
  • 62 append HTML that user was friended
  • 66 set new friends list to entity variable of saved friends
  • 75 removing friend from friends list by using the sets operator difference

Before app was run on stackoverflow.com user’s detail page with bookmarklet

App run on stackoverflow.com user’s detail page with bookmarklet

Clicking on ‘add as friend’ button

App run on example.com after adding several friends on stackoverflow.com with bookmarklet

Get the bookmarklet to try it out yourself!

Gratuitous day 22 Grace face

About these ads
This entry was posted in Kynetx. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s