Skip to content

Use react-router for legal page tabs. #2622

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

Merged
merged 4 commits into from
Nov 30, 2023

Conversation

lindapaiste
Copy link
Collaborator

Fixes #2621

The primary purpose is to control the routing of the Legal page declaratively (with routes) rather than imperatively (history.push). The react-tabs package is fine on its own but doesn't work elegantly alongside react-router.

Changes:

  • RouterTab
    • Extracted the Tab component from DashboardTabSwitcher.jsx into a reusable RouterTab component.
    • Remove the isSelected prop and use the react-router NavLink component which automatically detects if a link is for the current page.
  • _dashboard-header.scss
    • The NavLink means that the dashboard-header__tab--selected class is now applied to the child <a> rather than the parent <li>, so I had to move around some styles in the .scss file to keep things correct.
  • Legal
    • Use the RouterTab instead of the react-tabs package.
    • Made the Legal component into a container that renders the correct content based on props, rather than switching children.
    • Move the policy fetch useEffect and the Helmet up into the parent since it is the same for all tabs.
    • Add a Loader while loading. // TODO: this is not visible and should probably be a child of the PolicyContainer.
    • PrivacyPolicy etc. are now specific instances of Legal.
  • routes.jsx
    • Render the specific page for each URL. This eliminates the need to look at the path inside the Legal component.
  • DashboardTabSwitcher
    • This should look identical but there are some minor changes to the HTML structure:
      • I swapped the div and ul tags so that the li elements are direct children of the ul.
      • There is no more h4 in each tab. Just <li><a/></li>. I don't think this matters? But now that I'm writing this I think I might put it back?
      • The active tab uses an a instead of a span.

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • has no test errors (npm run test)
  • is from a uniquely-named feature branch and is up to date with the develop branch.
  • is descriptively named and links to an issue number, i.e. Fixes #123

Copy link
Contributor

@PiyushChandra17 PiyushChandra17 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍

@raclim raclim added this to the MINOR Release for 2.10.0 milestone Nov 20, 2023
Copy link
Collaborator

@raclim raclim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great, thanks so much for working on this!

@raclim raclim merged commit 4410f84 into processing:develop Nov 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Discussion: react-tabs vs. react-router links
3 participants