ULOG #5: Controlling Ulogging Segments

in ulog •  3 months ago

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

image.png

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

2) Dynamic Expansion of Collapse Component in Ulogging

ulogging-segments.gif

This was where I had a lot of trial and error (experimental fixes as what can be seen on another PR). 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

3) Other Scenario

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

Lesson Learned

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

GitHub Account

https://github.com/eastmaels

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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, 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? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

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

·

Hi. I cant add my post. Why. Broadcast error try again, missing required posting authority

·
·

You need your private active key

·
·
·

Its ok. Private key was ok. Accident or failure? Thanks!

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 !

·

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

·
·

Not a problem after all we all are not technical experts :)

extraordinary ... thank you bro.

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

Congratulations @eastmael! You have received a personal award!

1 Year on Steemit
Click on the badge to view your Board of Honor.

Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

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.

Vote for Utopian Witness!