ULOG #24: Completing Ulog Stories

in #ulog5 years ago (edited)

This contribution closes the "Ulog Stories" section from this task request by @surpassinggoogle.

This displays the ulog stories from certified uloggers on the right side bar. The aim of this feature is to showcase their stories. This is aligned with site's objective of being a conscious effort to "mine the human" into its "awesomest version".

1. Repository

https://github.com/surpassinggoogle/UlogsV2

2. Task Request/Issue

https://steemit.com/utopian-io/@surpassinggoogle/task-request-we-modified-our-task-request-to-add-core-features-and-communities-to-ulogs-org-simplifying-the-1-5-task-drastically
https://github.com/surpassinggoogle/UlogsV2/issues/185

3. Pull Requests

https://github.com/surpassinggoogle/UlogsV2/pull/243
https://github.com/surpassinggoogle/UlogsV2/pull/245
https://github.com/surpassinggoogle/UlogsV2/pull/249

4. Testing

These were the tests manually done in Chrome:

  1. Visit the ulog.org home page (user should be logged in)
    • Ulog Stories should display on the right side bar
    • Ulog Stories should be sorted from newest to oldest
    • Only five stories should be initially displayed
    • Only stories from certified uloggers should be displayed
  2. Click the View button
    • it should open the corresponding ulog story as a normal post from the certified ulogger
  3. Click the View More button
    • An additional five (5) Ulog Stories should be displayed

5. Implementation

The main PR for this contribution was PR 249. The other PRs were slight modifications on existing features like adding the info text on the Ulog Story Quick Editor for non-certified uloggers.

  1. src/client/components/Sidebar/UlogStories.js - the main function here is getUlogStories() which is called when the component is mounted; this was where I had to do trial and error. Eventually, the logic I used was:
    1. Get first the list of certified uloggers
    2. Get their latest five posts
    3. Push them into an object array [{ author, permlink, created}]
    4. Then in render(), sort the array from newest to oldest based on the posts's created field
      image.png
  2. src/client/components/Sidebar/UlogStory.js - a new UlogStory component that displays the post when the View button is clicked
    image.png

6. Feature in Action

ulog-stories.gif

7. Lesson Learned

The main issue I encountered in doing this was figuring out how to get the ulog stories from selected authors (certified uloggers) only.

Due to my unfamiliarity in using the different STEEM APIs, I had to do trial and error to figure out the correct combination of API calls to get the result I needed. The two main functions I used were getDiscussionsByBlog and getDiscussionsByCreated. My main reference was the STEEM Dev Portal - Condenser API - API Definitions.

There were other issues I encountered, but the above stood out because of the time and effort I spent in it.

8. GitHub Account

https://github.com/eastmaels

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

Sort:  

Good to see you are still helping out with the task requests! There's not that much code, but let's have a look:

  • Some inconsistencies in formatting, style, using var etc -- you should use a linter.
ulogStoriesArr.sort((a, b) => {
      var keyA = new Date(a.created),
          keyB = new Date(b.created);
      if(keyA > keyB) return -1;
      if(keyA < keyB) return 1;
      return 0;
    });
  • Code above could be turned into a one liner.

I don't use React myself, so can't really give more feedback unfortunately.


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? Chat with us on Discord.

[utopian-moderator]

Thank you Amos for the feedback. I'll consider these on succeeding contributions.

I did try the one liner, return b-a but I wasn't comfortable / convinced of the result, so I took the longer route.

Posted using Partiko Android

Thank you for your review, @amosbastian! Keep up the good work!

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

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!

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70625.87
ETH 3563.07
USDT 1.00
SBD 4.71