ULOG #8: Adding Certified Ulogger Icon to Ulogs.Org
Repository
https://github.com/surpassinggoogle/UlogsV2
Task Request
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:
- @ulogger's following - the accounts that @uloggers follow; the account that you find in the link - https://ulogs.org/@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
This post was made from https://ulogs.org
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.
[utopian-moderator]
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.