![image.png](https://ipfs.busy.org/ipfs/QmWFuuaUywmyixaUjvXZMc6ayUL9LHj7UEdtSBtR9VFyGW)

#### Repository
https://github.com/surpassinggoogle/UlogsV2

#### Task Request
https://steemit.com/utopian-io/@surpassinggoogle/task-request-kindly-add-a-rule-to-the-existing-algorithm-for-suggest-interesting-uloggers-on-ulogs-org

#### Pull Requests
https://github.com/surpassinggoogle/UlogsV2/pull/111

#### 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"](https://ulogs.org/ulog/@eastmael/ulog-7-adding-dynamic-interesting-uloggers-to-ulogs-org)) 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

![verified_ulogger.gif](https://ipfs.busy.org/ipfs/QmXaR6LfZF8XfMdSZMbhPYjpntaTeHswne7WPGEkennAtJ)

#### 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<br/><div class="pull-right promo"><sub><p>This post was made from https://ulogs.org</p></sub></div>