[DEV][FEATURE] Marlians.com - new feed "Certified" added!
Repository
https://github.com/lion-200/nitrous/tree/feature/certified_feed
Description
As a developer I am trying to be involved in different projects running on Steem. While I try to contribute to some Steem projects of @aggroed I also like to help out people who need some help in this platform.
Recently I saw a post of @surpassinggoogle where he expressed one of his wishes on the Marlians.com website. I was not really familiar with the Nitrous code, but still I gave it a go. Below you can see how I added the Certified feed according to the requirements set by @surpassinggoogle.
I know that @utopian-io stopped for now, but I still would like to share some dev work here as reference for people who might be interested in contributing in some way.
Feature: Certified feed containing posts of "@uloggers"
Requirements
This tasks includes building a new feed. This is going to be 'an independent feed'.
Currently, we have the following feeds 'trending', 'hot', 'new' and 'promoted'. We want to add one more feed. This feed labelled 'Certified' will simply display marlians.com posts from 'certified' uloggers only, in order of 'new'.
Definition of "certified uloggers":
this is simply a list that updates dynamically based on the followed-list of the @uloggers account
Implementation
The first step was to create a navigation link on the menu above with label Certified.
Because I didn't know a single line of code in this application, the first action was to search for "Promoted" and analyze how that worked, as "Certified" link would be just like "Promoted" but with a different result set of course. I added certified word in various places in the application where it makes sense, where also the word promoted appeared.
Added certified keyword to routeReges in ResolveRoute.js
CategoryFilters: /^\/(hot|trending|promoted|payout|payout_comments|created|certified)\/?$/gi,
Also added the certified word in the regex match to redirect the user to the same kind of page as promoted, hot, trending etc.
match =
path.match(
/^\/(hot|trending|promoted|payout|payout_comments|created|certified)\/?$/
) ||
path.match(
/^\/(hot|trending|promoted|payout|payout_comments|created|certified)\/([\w\d-]+)\/?$/
);
The page we are redirected to is "PostsIndex.jsx". We also need to add the "certified" key in that page to read & display the link text:
switch (topics_order) {
case 'trending': // cribbed from Header.jsx where it's repeated 2x already :P
page_title = tt('main_menu.trending');
break;
case 'created':
page_title = tt('g.new');
break;
case 'hot':
page_title = tt('main_menu.hot');
break;
case 'promoted':
page_title = tt('g.promoted');
break;
case 'certified':
page_title = tt('main_menu.certified');
break;
}
As you can see above, the actual values of the labels are retrieved from locales. In this case we simply need to add another entry in the src/app/locales/en.json to contain the word "Certified":
"main_menu": {
"hot": "Hot",
"trending": "Trending",
"certified": "Certified"
},
Now we have our link "Certified" on the top menu!
We move on to implement the desired functionality. As @surpassinggoogle defined in his task request, he wanted the posts of the followed-list of the account "uloggers". This actually means that he simply wants the "feed" page of "uloggers" account without the resteem posts.
To achieve this, I checked out the scotbot-docs written by @holger80 some time ago:
https://github.com/steem-engine-exchange/scotbot-docs/tree/master/docs/api
I saw that there was a get_feed
which would perfectly suit our needs. So I started adding the call to this method within steemApi.js file:
const feedType = urlParts[1];
const tag = urlParts[3] || '';
let discussionQuery = {
token: LIQUID_TOKEN_UPPERCASE,
limit: 20,
};
if (tag) {
discussionQuery.tag = tag;
}
let path = `get_discussions_by_${feedType}`;
if (feedType == 'certified') {
path = `get_feed`;
discussionQuery.account = CERTIFIED_POST_ACCOUNT;
}
// first call feed.
let feedData = await getScotDataAsync(path, discussionQuery);
As you can see above, I created an exception for feedType "certified" to make a call to a different method.
Another important item was to implement the same functionality for loading the next set of posts. In order to achieve this, I had to keep track of the loaded items count to fetch the next set by giving the value as start_entry_id
parameter. I achieved this by incrementing the counter each time the async method to get next set of posts was called:
let order = callNameMatch[1].toLowerCase();
let discussionQuery = {
...args[0],
token: LIQUID_TOKEN_UPPERCASE,
};
let path = `get_discussions_by_${order}`;
if (order == 'certified') {
asyncCounter = asyncCounter + 1;
path = `get_feed`;
discussionQuery.account = CERTIFIED_POST_ACCOUNT;
discussionQuery.start_entry_id = asyncCounter * fetchSize;
}
This is it!
I must admit that it was some searching and analyzing for me as a .NET C# back-end developer within this mostly in JS written application :)
Hopefully some devs among us who are new here and want to contribute, can learn from my quest :)
How to contribute for other dev work?
Go to the SteemDev discord channel if you have any questions, or check out the various steem releated repositories in github like:
https://github.com/steem-engine-exchange
https://github.com/steem-engine-exchange/nitrous
https://github.com/steem-engine-exchange/steem-engine-dex
List of commits
https://github.com/lion-200/nitrous/commit/c42aaa2557f9ed11a6708a4352c1a4c3a00b9b2a
https://github.com/lion-200/nitrous/commit/a1675ef7ec1ffa4c542eeac5314dbd2ae61f8734
https://github.com/lion-200/nitrous/commit/10c77d936824e952e7e356bf31d6b7e6838b7373
https://github.com/lion-200/nitrous/commit/81e27269c9ffa76882b7305d02d12927069dd7fb
Ways to reach me?
Steem account obviously: @lion200
Discord account: Lion_200#4199
E-mail: [email protected]
Thats epic, nice to see some new developments from tribes and putting their own stamp on the steemit condensor, this is how we improve the ecosystem by allowing more customisation, love it.