Skip to content
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

Merged
merged 9 commits into from
Aug 16, 2023
Merged

Fix two active navigation pills #524

merged 9 commits into from
Aug 16, 2023

Commits on May 26, 2023

  1. 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.
    michalsmiarowski committed May 26, 2023
    Configuration menu
    Copy the full SHA
    75af025 View commit details
    Browse the repository at this point in the history

Commits on Jun 12, 2023

  1. Configuration menu
    Copy the full SHA
    4cefd91 View commit details
    Browse the repository at this point in the history

Commits on Jul 10, 2023

  1. 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.
    michalsmiarowski committed Jul 10, 2023
    Configuration menu
    Copy the full SHA
    e288ce4 View commit details
    Browse the repository at this point in the history
  2. Use useMatch hook instead of matchPath

    We are not inside any loop so we can safely use `useMatch` hook.
    michalsmiarowski committed Jul 10, 2023
    Configuration menu
    Copy the full SHA
    1f37f71 View commit details
    Browse the repository at this point in the history

Commits on Jul 25, 2023

  1. 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`.
    michalsmiarowski committed Jul 25, 2023
    Configuration menu
    Copy the full SHA
    780e859 View commit details
    Browse the repository at this point in the history

Commits on Jul 26, 2023

  1. 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.
    michalsmiarowski committed Jul 26, 2023
    Configuration menu
    Copy the full SHA
    3113a7e View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    dee2428 View commit details
    Browse the repository at this point in the history

Commits on Aug 16, 2023

  1. Move parentPathBase to RouteProps

    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.
    michalsmiarowski committed Aug 16, 2023
    Configuration menu
    Copy the full SHA
    2295658 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    12b40c9 View commit details
    Browse the repository at this point in the history