-
Notifications
You must be signed in to change notification settings - Fork 26
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix two active navigation pills #524
Commits on May 26, 2023
-
Fix two active navigation pills
There was a UI bug where it displayed two navigation pills as active instead of one. For example when clicking on `How it works` link in tbtc both `Bridge` and `How it works` links were active. We've fixed that by adding a new method - `addActiveStatusToPills` - which adds `isActive` property to each of the link. If there are two or more links that are active (based on `useMatch` hook) then we only keep the active status for the last one.
Configuration menu - View commit details
-
Copy full SHA for 75af025 - Browse repository at this point
Copy the full SHA 75af025View commit details
Commits on Jun 12, 2023
-
Configuration menu - View commit details
-
Copy full SHA for 4cefd91 - Browse repository at this point
Copy the full SHA 4cefd91View commit details
Commits on Jul 10, 2023
-
Refactor the fix for two active pills
The previous fix used hooks inside loops which should not be done (see https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level). As a workaround I decided to refactor the fix. Now we gather all resolved paths for all the pills that are in the menu using `resolvePath` function and we pass those paths to each pill component. Inside the component we check if `useMatch` hook returns anything for the given pill and if yes then we check if is is because it has asterisk (`*`) in it's path. If yes, then we first have to check if the url match any of the other pills using our array of resolved paths. If not then we can safely assume that this pill can be active.
Configuration menu - View commit details
-
Copy full SHA for e288ce4 - Browse repository at this point
Copy the full SHA e288ce4View commit details -
Use
useMatch
hook instead ofmatchPath
We are not inside any loop so we can safely use `useMatch` hook.
Configuration menu - View commit details
-
Copy full SHA for 1f37f71 - Browse repository at this point
Copy the full SHA 1f37f71View commit details
Commits on Jul 25, 2023
-
Use parentPath property to fix the issue
I've manage to resolve the issue using `resolvePath` and `matchPath` functions instead of `useMatch` and `useResolvedPath` hooks. For that I had to introduce a new property - `parentPath` - that is passed to `SubNavigationPills` component and will be used as a `pathnaemBase` for the `resolvePath` function. If more than one pill is active then the one with the longest `pathnameBase` from the `matchPath` function will be active. This will happen when there are two paths with asterisk, for example: `tBTC/*`, `tBTC/how-it-work/*`. For the path `tBTC/how-it-work/overview` we want only the second one to be active so we are picking the one with the longest `pathnameBase`. In the first case the pathnameBase is `tBTC` and in the second one it's `tBTC/how-it-works`.
Configuration menu - View commit details
-
Copy full SHA for 780e859 - Browse repository at this point
Copy the full SHA 780e859View commit details
Commits on Jul 26, 2023
-
Fix navigation for preview links
The navigation did not work in preview links because the branch name was in the url. This resulted in `window.location.pathname` returning wrong pathname.
Configuration menu - View commit details
-
Copy full SHA for 3113a7e - Browse repository at this point
Copy the full SHA 3113a7eView commit details -
Configuration menu - View commit details
-
Copy full SHA for dee2428 - Browse repository at this point
Copy the full SHA dee2428View commit details
Commits on Aug 16, 2023
-
Move
parentPathBase
toRouteProps
Having `parentPathBase` in `ParentComponent` type (but not in `RouteProps`) actually complicated more thing than it resolves. I've decided to put it in `RouteProps` as an optional parameter. Then we assing the correct `parentPathBase` to a specific `RouteProps` object inside `renderPageComponent` function. This way we don't have to pass `parentPathBase` parameter to all PageComponents manually all the way to `SubNavigaionPillsProps` because we already have it in `links` parameter.
Configuration menu - View commit details
-
Copy full SHA for 2295658 - Browse repository at this point
Copy the full SHA 2295658View commit details -
Configuration menu - View commit details
-
Copy full SHA for 12b40c9 - Browse repository at this point
Copy the full SHA 12b40c9View commit details