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

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:

@ulogger's following - the accounts that @uloggers follow; the account that you find in the link - @uloggers/followed
@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({
    type: GET_ULOGGERS_FOLLOWING,
    meta: 'uloggers',
    payload: {
      promise: getAllFollowing('uloggers').catch(() => dispatch({ type: GET_ULOGGERS_FOLLOWING_ERROR })),
    },
  });
};

`src/client/user/userReducer.js`

    case actions.GET_ULOGGERS_FOLLOWING_START:
      return {
        ...state,
        uloggersFollowing: {
          ...state.uloggersFollowing,
          list: [],
          isFetching: true,
          fetched: false,
        },
        fetchUloggersFollowListError: false,
      };
    case actions.GET_ULOGGERS_FOLLOWING_ERROR:
      return {
        ...state,
        uloggersFollowing: {
          ...state.uloggersFollowing,
          list: [],
          isFetching: false,
          fetched: true,
        },
        fetchUloggersFollowListError: true,
      };
    case actions.GET_ULOGGERS_FOLLOWING_SUCCESS:
      return {
        ...state,
        uloggersFollowing: {
          ...state.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

https://github.com/eastmaels