ULOG #8: Adding Certified Ulogger Icon to Ulogs.Org

in ulog •  last year 




Task Request


Pull Requests


Feature: Adding the Verified Ulogger Icon

1) Defining Terms - @Ulogger's Following vs @Ulogger's Followers

To shorten the sentences in the succeeding sections, let's define terms that are consistent with the codes:

  1. @ulogger's following - the accounts that @uloggers follow; the account that you find in the link - https://ulogs.org/@uloggers/followed
  2. @ulogger's followers - the accounts that follow @uloggers
2) Planning the Solution

The logic behind this feature was simple - get a list of accounts @uloggers follow (a.k.a. @ulogger's following) then append an icon after the reputation badge for each Story in the feed.

Simple, isn't it? Yes, it's simple for those who have developed for busy and are well-versed with react-redux. I have the former but not the latter, and having 1 out of 2 is better than none.

I already had a solution in mind... it's just a matter of finding out if it will work.

3) Partial Solutions - Getting from Point A to Point B

The reason I submitted multiple PRs for this task request was to submit working codes - micro-solutions to what Terry calls micro-tasks.

As I've taught one of my former teams, sometimes we have to get ourselves from point A to point B in order to find a solution to a second problem. That lesson applied to this.

My first problem was how to get @uloggers's following (which was solved in the feature "Dynamic Interesting Uloggers") and the second was knowing where to put the logic, store the list, and use it to mark verified uloggers.

4) The Search - Looking for Similar Logic

I knew that getting @uloggers's following was the same as getting any account's following. So I just had to find where that logic's defined and where it's used. So I studied the codes and saw getFollowing in Wrapper.js and that's where I started.

5) The Design Decision

After finding my target function and understanding its call stack, I had to decide whether to just re-use it or clone and customize. I decided the latter.

The reason for this was that I will be needing the verified uloggers (@uloggers's following) list in the same place where the getFollowing list is used. And in order to avoid foreseen side-effects of using the same action type (GET_FOLLOWING) at same time and location, I opted for the clone and customize.

6) The Implementation

As mentioned previously, the first part of the solution was to get and store @uloggers's following. I was able to accomplish this by creating the getUloggersFollowingList user action in src/client/user/userActions.js and calling this action when the Wrapper component is mounted. This action dispatches the GET_ULOGGERS_FOLLOWING action type then updates the state via src/client/user/userReducer.js.

src/client/user/userActions.js :: getUloggersFollowing
export const getUloggersFollowing = () => (dispatch, getState) => {
  const state = getState();

  if (!getIsAuthenticated(state)) {
    return dispatch({ type: GET_ULOGGERS_FOLLOWING_ERROR });

  return dispatch({
    meta: 'uloggers',
    payload: {
      promise: getAllFollowing('uloggers').catch(() => dispatch({ type: GET_ULOGGERS_FOLLOWING_ERROR })),
      return {
        uloggersFollowing: {
          list: [],
          isFetching: true,
          fetched: false,
        fetchUloggersFollowListError: false,
      return {
        uloggersFollowing: {
          list: [],
          isFetching: false,
          fetched: true,
        fetchUloggersFollowListError: true,
      return {
        uloggersFollowing: {
          list: action.payload,
          isFetching: false,
          fetched: true,
        fetchUloggersFollowListError: false,

The verified uloggers list can now be acquired from the app's state via getUloggersFollowingList reducer in src/client/reducers.js and src/client/user/userReducer.js.

Once that big chunk of the code was done, what's left was to check from the list if a story's author is a verified ulogger or not and then displaying the certified ulogger icon.

I accomplished this via the isCertifiedUlogger() function in src/client/feed/StoryContainer.js which returns a boolean. This function is then used in src/client/components/Story/Story.js in which if it returns true (user is included in @uloggers's following), then it will display the <CertifiedUlogger /> icon - which is the last part of this solution - creating a new CertifiedUlogger component which includes the style for the verified ulogger icon (src/client/components/Story/Story.less).

And here's the feature in action...

Feature in Action


Lessons Learned Recap

Plan before you act. In this feature, the task seemed simple because just adds an icon. But behind it were functions I needed to see done first in my mind's eye before I started. Yes, not all were clear at the start, but this was where the second lesson came in...

Move from point A to point B to find a solution to a second problem. In this case, I needed to get myself from knowing how to get @uloggers's following to knowing how to store and access the list to add the verified icon. Solve problem #1 first and eventually, solution for problem #2 becomes clear.

GitHub Account


This post was made from https://ulogs.org

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks for the contribution, @eastmael! It's always a pleasure reading your posts, especially because I feel like I am learning something alongside you when doing so. There's definitely some good advice in there.

Only thing I can point out regarding your code is that adding some function declarations could possibly improve the readability in my opinion. Since I have been wanting to change that question to just be about the general readability of the code (of which yours is fine), I didn't want to be too nitpicky.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.

I feel like I am learning something alongside you when doing so.

Thank you @amosbastian, this means a lot an will stay with me for a long time.

As for the function declarations, you refer to function documentation? What comes to mind with the term is C/C++ wherein functions were declared in *.h files and the actual implementations in *.cpp. :)

Thank you for your review, @amosbastian!

So far this week you've reviewed 8 contributions. Keep up the good work!

Hey, @eastmael!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

casestudy for macrohard gradually shapes up. Thank you alot bro. Your help is too big. Thank you.

No worries Terry. Just trying to reciprocate a small part of the support you give/gave me.

Interesting work there it will add more charm to it :)

Thank you. I hope it does. I like the term you used for it - charm. :)

Ulog is my favourite steemit posting site and also with this community @surpassinggoogle

Posted using Partiko Android

Thank you. I use it to post my ulogs as well. :)

Hi @eastmael!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Thank you.