ULOG #25: Adding @giftgiver Delegation Support

This closes issue #259 in github. It integrates @giftgiver's delegation support to users with low RC as described in its introductory post.

@giftgiver, a project by @rishi556 to help with part of the on-boarding process for new STEEM users.

This also contains some feature requests made by Terry for Ulog Stories.

1. Repository

https://github.com/surpassinggoogle/UlogsV2

2. Task Request/Issue

https://github.com/surpassinggoogle/UlogsV2/issues/295

3. Pull Requests

https://github.com/surpassinggoogle/UlogsV2/pull/256
https://github.com/surpassinggoogle/UlogsV2/pull/257
https://github.com/surpassinggoogle/UlogsV2/pull/273

4. Testing

These were the tests manually done in Chrome:

1. Filter Tags + Ulog Stories posted in the last three days
   • Visit the home page (https://ulogs.org/ or http://localhost:3000)
     • Ulog stories displayed should contain any of the defined ulog sub-tags or ulog or ulogs
     • Ulog stories displayed should be posted in that last three days; posts older than that should not be displayed
2. @giftgiver Delegation Support
   1. Visit a post
   2. Submit a comment (user's Resource Credits (RC) should be low enough to trigger an insufficient RC error)
      • Low RC notification should display
      • If successful, @giftgiver delegation support notification should display
      • If failed, only low RC notification should display; reason for failed @giftgiver delegation should display to console

5. Implementation

5.1. Only Display Ulog Stories with Ulog Tags

1. src/client/components/Sidebar/UlogStories.js - import the supported ulog tags from helper constants, then for each post from a certified ulogger, filter out posts that do not contain any of the valid ulog tags;
   
2. src/client/components/UlogStoryEditor/UlogStoryEditorFooter.js - code refactor to use constants helper
   
3. src/client/helpers/constants.js - extracted supported ulog subtags and declared them as a constant string array
   

5.2. Only Display Ulog Stories Posted in the Last Three Days

A simple feature request from Terry to only display ulog stories posted in the last three days.

1. src/client/components/Sidebar/UlogStories.js - add date filter
   

5.3. Add @giftgiver Auto-Delegation Support

1. src/client/components/Comments/Comments.js - added the giftGiver() function that submits the POST request for delegation; the delegation request will only be triggered when the user's comment submission fails due to insufficient RC;
   
2. src/server/app.js - for server-side rendering; as advised by @rishi556, to prevent the CORS (Cross-Origin Resource Sharing) related errors, I had to add a new express server POST API support to submit the delegation request
   

6. Feature in Action

For this to work, please add the GIFT_GIVER_KEY environment variable.

STEEMCONNECT_CLIENT_ID=STEEM_CONNECT_ACCOUNT_HERE
STEEMCONNECT_REDIRECT_URL=http://localhost:3000/callback
STEEMJS_URL=https://api.steemit.com
SIGNUP_URL=https://signup.steemit.com/?ref=ulogs
WITNESS_VOTE=https://steemconnect.com/sign/account-witness-vote?witness=steemgigs&approve=true
GIFT_GIVER_KEY=GIFT_GIVER_KEY_HERE

The key used in the video below is still a test key so no actual delegation was done. I'm still waiting for the live key from @rishi556.

7. Lesson Learned

There were two issues I took time to resolve: the first was figuring out how to make cross-site requests, and the second was how to read isomorphic-fetch responses.

The second, I was able to resolve by myself, but for the first, I needed the help of @rishi556.

I raised this issue with him over discord and he simply informed me that "the request should be done server side." The lesson I learned here was:

TO GET THE RIGHT ANSWER, YOU NEED TO ASK THE RIGHT QUESTION TO THE RIGHT PERSON.

8. GitHub Account

https://github.com/eastmaels