ULOG #5: Controlling Ulogging Segments by eastmael

View this thread on steempeak.com
· @eastmael · (edited)
$74.88
ULOG #5: Controlling Ulogging Segments
#### Repository
https://github.com/surpassinggoogle/UlogsV2

#### Github Issue
https://github.com/surpassinggoogle/UlogsV2/issues/41

In this recent contribution, Terry wanted to have the collapse component in the Ulogging page to dynamically change based on the user's selected menu.

Prior to this change, I used an anchor (the text you see in the URL starting with a #) to dynamically select the segment that should expand. However, after my initial experimentation, it didn't work. Since Terry indicated in the issue that it's okay for the for each segment to have it's own route, I opted to this.

Here were the content of this contribution:

### 1) Adding the Ulog sub-menu to the TopNav Component

<div class="pull-left">

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

</div>

For this change, I needed to modify the existing `TopNav` and insert the new Ulog-Segment sub-menus.

A strange issue I encountered while doing this feature was when I viewed it on mobile, the sub-menu was opening to the right of the page and was distorting the width. I'm not sure what caused it, but after some re-deploys and changes, it just resolved by itself. My suspicion is that it's related with cached files, but I no longer had the chance to investigate and verify.

[PR Link](https://github.com/surpassinggoogle/UlogsV2/pull/46)

### 2) Dynamic Expansion of Collapse Component in Ulogging

![ulogging-segments.gif](https://ipfs.busy.org/ipfs/QmSmoi8P443JspUu4rpHniYkqvPcVLJfrYPdi6Sbg8XaZe)

This was where I had a lot of trial and error (experimental fixes as what can be seen on [another PR](https://github.com/surpassinggoogle/UlogsV2/pull/48)). The initial codes had a bug wherein only the default active key can be expanded. When you try to expand the other collapsed segments, it won't. This was the reason I converted the `Ulogging` component to a `React.Component` so that I'll be able to inherit a React component's life cycle, particularly `componentDidUpdate`. 

[PR Link](https://github.com/surpassinggoogle/UlogsV2/pull/49)

### 3) Other Scenario

![](https://user-images.githubusercontent.com/29425738/43788094-8ad43e4a-9aa7-11e8-85d9-e26db7b4a9b6.gif)

This was the last item on the list because it was the simplest. It just needed some refactoring of codes to extract a common function that will load and display the Ulogging dropdown component with links to the different ulogging sections.

[PR Link](https://github.com/surpassinggoogle/UlogsV2/pull/53)

### Lesson Learned

Learning something new comes with making mistakes. If you're not trying, you're not learning.

#### 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>
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 407 others
properties (23)
post_id59,102,402
authoreastmael
permlinkulog-5-controlling-ulogging-segments
categoryulog
json_metadata{"links":["https:\/\/github.com\/surpassinggoogle\/UlogsV2","https:\/\/github.com\/surpassinggoogle\/UlogsV2\/issues\/41","https:\/\/github.com\/surpassinggoogle\/UlogsV2\/pull\/46","https:\/\/github.com\/surpassinggoogle\/UlogsV2\/pull\/48","https:\/\/github.com\/surpassinggoogle\/UlogsV2\/pull\/49","https:\/\/github.com\/surpassinggoogle\/UlogsV2\/pull\/53","https:\/\/github.com\/eastmaels","https:\/\/ulogs.org"],"image":["https:\/\/ipfs.busy.org\/ipfs\/QmcnhoQnsxCS1LsXdN3RUiTrkgnhf8ZfjHcrKcCGGBh2Yp"],"tags":["ulog","surpassinggoogle","philippines","development","steemdev"],"community":"ulogs","app":"ulogs\/1.0.0","format":"markdown"}
created2018-08-08 13:42:39
last_update2018-08-12 06:05:54
depth0
children12
net_rshares53,237,430,902,013
last_payout2018-08-15 13:42:39
cashout_time1969-12-31 23:59:59
total_payout_value59.099 SBD
curator_payout_value15.778 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length2,773
author_reputation51,681,288,563,260
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (471)
@surpassinggoogle ·
I think it is cachefiles. when I loaded it the first time during tests, it appeared like that mid upload but rendered accordingly after it loaded full and from then on. thank you bro
πŸ‘  
properties (23)
post_id59,104,140
authorsurpassinggoogle
permlinkre-eastmael-ulog-5-controlling-ulogging-segments-20180808t140646650z
categoryulog
json_metadata{"tags":["ulog"],"app":"steemit\/0.1"}
created2018-08-08 14:06:51
last_update2018-08-08 14:06:51
depth1
children4
net_rshares12,354,188,310
last_payout2018-08-15 14:06:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length182
author_reputation508,940,095,151,809
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@eastmael ·
Thanks Terry.
πŸ‘  
properties (23)
post_id59,104,859
authoreastmael
permlinkre-surpassinggoogle-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t141230500z
categoryulog
json_metadata{"tags":["ulog"],"app":"steemit\/0.1"}
created2018-08-08 14:14:15
last_update2018-08-08 14:14:15
depth2
children0
net_rshares757,567,591
last_payout2018-08-15 14:14:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length13
author_reputation51,681,288,563,260
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@jozef230 ·
$0.30
Hi. I cant add my post. Why. Broadcast error try again, missing required posting authority
πŸ‘  ,
properties (23)
post_id59,134,757
authorjozef230
permlinkre-surpassinggoogle-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t205248023z
categoryulog
json_metadata{"tags":["ulog"],"app":"steemit\/0.1"}
created2018-08-08 20:52:54
last_update2018-08-08 20:52:54
depth2
children2
net_rshares222,721,648,566
last_payout2018-08-15 20:52:54
cashout_time1969-12-31 23:59:59
total_payout_value0.224 SBD
curator_payout_value0.072 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length90
author_reputation123,658,001,174,596
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (2)
@surpassinggoogle ·
You need your private active key
properties (22)
post_id59,145,614
authorsurpassinggoogle
permlinkre-jozef230-re-surpassinggoogle-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t234219607z
categoryulog
json_metadata{"app":"steemit\/0.1","tags":["ulog"]}
created2018-08-08 23:42:21
last_update2018-08-08 23:42:21
depth3
children1
net_rshares0
last_payout2018-08-15 23:42:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length32
author_reputation508,940,095,151,809
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars0
@rehan12 ·
Yeah some of the things went up over my head but I suppose good work done mate ;)

We are good at the things that we always do !

Keep it going mate !
πŸ‘  
properties (23)
post_id59,105,174
authorrehan12
permlinkre-eastmael-ulog-5-controlling-ulogging-segments-20180808t141735106z
categoryulog
json_metadata{"tags":["ulog"],"app":"steemit\/0.1"}
created2018-08-08 14:17:36
last_update2018-08-08 14:17:36
depth1
children2
net_rshares12,643,175,172
last_payout2018-08-15 14:17:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length150
author_reputation276,128,422,051,112
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@eastmael ·
Thanks Rehan. Sorry about that, I tried to make the explanation as simple as possible but it was inevitable for me to use techical terms. :D
πŸ‘  
properties (23)
post_id59,105,832
authoreastmael
permlinkre-rehan12-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t142420599z
categoryulog
json_metadata{"app":"steemit\/0.1","tags":["ulog"]}
created2018-08-08 14:24:24
last_update2018-08-08 14:24:24
depth2
children1
net_rshares10,346,784,865
last_payout2018-08-15 14:24:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length140
author_reputation51,681,288,563,260
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@rehan12 ·
Not a problem after all we all are not technical experts :)
properties (22)
post_id59,105,935
authorrehan12
permlinkre-eastmael-re-rehan12-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t142525993z
categoryulog
json_metadata{"app":"steemit\/0.1","tags":["ulog"]}
created2018-08-08 14:25:27
last_update2018-08-08 14:25:27
depth3
children0
net_rshares0
last_payout2018-08-15 14:25:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length59
author_reputation276,128,422,051,112
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@yusran-steem ·
extraordinary ... thank you bro.<br/><div class="pull-right promo"><sub><p>This comment was made from https://ulogs.org</p></sub></div>
properties (22)
post_id59,117,867
authoryusran-steem
permlinkre-eastmael-ulog-5-controlling-ulogging-segments-20180808t163945601z
categoryulog
json_metadata{"community":"busy","tags":["ulog"],"app":"busy\/1.0.0"}
created2018-08-08 16:39:48
last_update2018-08-08 16:39:48
depth1
children0
net_rshares0
last_payout2018-08-15 16:39:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length135
author_reputation441,005,945,417
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@justyy ·
$0.79
Thank you for your contribution. It is not a good idea to have id e.g. surpassinggoogle hardcoded.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/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](https://review.utopian.io/result/3/2322223).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , , , , ,
properties (23)
post_id59,130,002
authorjustyy
permlinkre-eastmael-ulog-5-controlling-ulogging-segments-20180808t192308898z
categoryulog
json_metadata{"app":"steemit\/0.1","links":["https:\/\/join.utopian.io\/guidelines","https:\/\/review.utopian.io\/result\/3\/2322223","https:\/\/support.utopian.io\/","https:\/\/discord.gg\/uTyJkNm","https:\/\/join.utopian.io\/"],"tags":["ulog"]}
created2018-08-08 19:23:09
last_update2018-08-08 19:23:09
depth1
children0
net_rshares590,223,842,873
last_payout2018-08-15 19:23:09
cashout_time1969-12-31 23:59:59
total_payout_value0.624 SBD
curator_payout_value0.162 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length589
author_reputation2,046,968,271,807,515
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (10)
@steemitboard ·
Congratulations @eastmael! You have received a personal award!

[![](https://steemitimages.com/70x70/http://steemitboard.com/@eastmael/birthday1.png)](http://steemitboard.com/@eastmael)  1 Year on Steemit
<sub>_Click on the badge to view your Board of Honor._</sub>


> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
post_id59,498,002
authorsteemitboard
permlinksteemitboard-notify-eastmael-20180812t155444000z
categoryulog
json_metadata{"image":["https:\/\/steemitboard.com\/img\/notify.png"]}
created2018-08-12 15:54:42
last_update2018-08-12 15:54:42
depth1
children0
net_rshares0
last_payout2018-08-19 15:54:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length488
author_reputation38,705,954,145,809
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@utopian-io ·
Hey @eastmael
**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
post_id59,501,751
authorutopian-io
permlinkre-ulog-5-controlling-ulogging-segments-20180812t164508z
categoryulog
json_metadata{"app":"beem\/0.19.42"}
created2018-08-12 16:45:09
last_update2018-08-12 16:45:09
depth1
children0
net_rshares0
last_payout2018-08-19 16:45:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length300
author_reputation152,913,012,544,965
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000