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
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.
2) Dynamic Expansion of Collapse Component in Ulogging
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.
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.
Lesson Learned
Learning something new comes with making mistakes. If you're not trying, you're not learning.
GitHub Account
This post was made from https://ulogs.org