create account

ULOG #5: Controlling Ulogging Segments by eastmael

View this thread on: hive.blogpeakd.comecency.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)
authoreastmael
permlinkulog-5-controlling-ulogging-segments
categoryulog
json_metadata{"community":"ulogs","app":"ulogs/1.0.0","format":"markdown","tags":["ulog","surpassinggoogle","philippines","development","steemdev"],"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","https://ipfs.busy.org/ipfs/QmSmoi8P443JspUu4rpHniYkqvPcVLJfrYPdi6Sbg8XaZe","https://user-images.githubusercontent.com/29425738/43788094-8ad43e4a-9aa7-11e8-85d9-e26db7b4a9b6.gif"]}
created2018-08-08 13:42:39
last_update2018-08-12 06:05:54
depth0
children12
last_payout2018-08-15 13:42:39
cashout_time1969-12-31 23:59:59
total_payout_value59.099 HBD
curator_payout_value15.778 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,773
author_reputation78,967,407,130,763
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,528,281
net_rshares53,237,430,902,013
author_curate_reward""
vote details (471)
@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)
authorjustyy
permlinkre-eastmael-ulog-5-controlling-ulogging-segments-20180808t192308898z
categoryulog
json_metadata{"tags":["ulog"],"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/"],"app":"steemit/0.1"}
created2018-08-08 19:23:09
last_update2018-08-08 19:23:09
depth1
children0
last_payout2018-08-15 19:23:09
cashout_time1969-12-31 23:59:59
total_payout_value0.624 HBD
curator_payout_value0.162 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length589
author_reputation280,616,224,641,976
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,558,874
net_rshares590,223,842,873
author_curate_reward""
vote details (10)
@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)
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
last_payout2018-08-15 14:17:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length150
author_reputation1,022,845,544,062,158
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,531,435
net_rshares12,643,175,172
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)
authoreastmael
permlinkre-rehan12-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t142420599z
categoryulog
json_metadata{"tags":["ulog"],"app":"steemit/0.1"}
created2018-08-08 14:24:24
last_update2018-08-08 14:24:24
depth2
children1
last_payout2018-08-15 14:24:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length140
author_reputation78,967,407,130,763
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,532,160
net_rshares10,346,784,865
author_curate_reward""
vote details (1)
@rehan12 ·
Not a problem after all we all are not technical experts :)
properties (22)
authorrehan12
permlinkre-eastmael-re-rehan12-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t142525993z
categoryulog
json_metadata{"tags":["ulog"],"app":"steemit/0.1"}
created2018-08-08 14:25:27
last_update2018-08-08 14:25:27
depth3
children0
last_payout2018-08-15 14:25:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length59
author_reputation1,022,845,544,062,158
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,532,278
net_rshares0
@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)
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
last_payout2018-08-19 15:54:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length488
author_reputation38,975,615,169,260
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,966,729
net_rshares0
@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)
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
last_payout2018-08-15 14:06:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length182
author_reputation527,661,560,108,742
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,530,223
net_rshares12,354,188,310
author_curate_reward""
vote details (1)
@eastmael ·
Thanks Terry.
πŸ‘  
properties (23)
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
last_payout2018-08-15 14:14:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length13
author_reputation78,967,407,130,763
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,531,073
net_rshares757,567,591
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)
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
last_payout2018-08-15 20:52:54
cashout_time1969-12-31 23:59:59
total_payout_value0.224 HBD
curator_payout_value0.072 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length90
author_reputation176,787,531,516,385
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,564,121
net_rshares222,721,648,566
author_curate_reward""
vote details (2)
@surpassinggoogle ·
You need your private active key
properties (22)
authorsurpassinggoogle
permlinkre-jozef230-re-surpassinggoogle-re-eastmael-ulog-5-controlling-ulogging-segments-20180808t234219607z
categoryulog
json_metadata{"tags":["ulog"],"app":"steemit/0.1"}
created2018-08-08 23:42:21
last_update2018-08-08 23:42:21
depth3
children1
last_payout2018-08-15 23:42:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length32
author_reputation527,661,560,108,742
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id67,576,384
net_rshares0
@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)
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
last_payout2018-08-19 16:45:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length300
author_reputation152,955,367,999,756
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,970,912
net_rshares0
@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)
authoryusran-steem
permlinkre-eastmael-ulog-5-controlling-ulogging-segments-20180808t163945601z
categoryulog
json_metadata{"tags":["ulog"],"community":"busy","app":"busy/1.0.0"}
created2018-08-08 16:39:48
last_update2018-08-08 16:39:48
depth1
children0
last_payout2018-08-15 16:39:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length135
author_reputation440,902,645,719
root_title"ULOG #5: Controlling Ulogging Segments"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,545,416
net_rshares0