Skip to content

Improved useMatch to support search parameters#2683

Merged
dac09 merged 28 commits intoredwoodjs:mainfrom
LBrian:router-use-match-query-params
Aug 9, 2021
Merged

Improved useMatch to support search parameters#2683
dac09 merged 28 commits intoredwoodjs:mainfrom
LBrian:router-use-match-query-params

Conversation

@LBrian
Copy link
Copy Markdown
Contributor

@LBrian LBrian commented Jun 1, 2021

Currently, route argument of useMatch could potentially includes search parameters (aka queryString) which causes path mismatch

PR for
#1460
#2362 (the issue mentioned by @dthyresson )

Comment thread packages/router/src/links.tsx Outdated
@dthyresson
Copy link
Copy Markdown
Contributor

dthyresson commented Jun 1, 2021

Looks good @LBrian - I was wondering though it people might want:

  • an option to ignore the search params and only consider the route (just /route ... ie, route search is null but location.search is not null, but location route and route paths match -- ie, ignore UTMA campaign params)
  • a way to specify which params to match (just page and tab, but not utma_campaign)

This would be the case when say, some UTMA or campaign or even timestamp params might be included in a path and thus might not match the target/specified location.

@LBrian
Copy link
Copy Markdown
Contributor Author

LBrian commented Jun 1, 2021

Looks good @LBrian - I was wondering though it people might want:

  • an option to ignore the search params and only consider the route (just /route ... ie, route search is null but location.search is not null, but location route and route paths match -- ie, ignore UTMA campaign params)
  • a way to specify which params to match (just page and tab, but note utma_campaign)

This would be the case when say, some UTMA or campaign or even timestamp params might be included in a path and thus might not match the target/specified location.

Good callout @dthyresson

  • We can ignore search parameters comparison if search is empty as external usage of useMatch can control what to input as route parameter but still good to accept options for useMatch as we can extend more in options in the future
  • This is a good suggestion and will be in options as well

@LBrian
Copy link
Copy Markdown
Contributor Author

LBrian commented Jun 2, 2021

@dthyresson Tweaked, useMatch hook now supports 2nd parameter options for advance matching and the same options can be passed by activeMatchOptions via NavLink to do the same.

Comment thread packages/router/src/links.tsx Outdated
@dthyresson
Copy link
Copy Markdown
Contributor

dthyresson commented Jun 2, 2021

@LBrian These additions look good and I think give the useMatch much needed flexibility.

I know the RW team likes to review naming, especially with core features like Router so I'd like to get their feedback on:

  • ignoreQueryString so that useMatch only matches the path (and the default case also if the location lacks params, right?)
  • matchSearchParamKeys so that useMatch will consider the route and any params specified

I also think that perhaps using the utm cases here as the examples and or tests can give some context/clarity to the use case and can use then in the Router docs:

https://ga-dev-tools.appspot.com/campaign-url-builder/

Used for keyword analysis. Use utm_campaign to identify a specific product promotion or strategic campaign.
Example: utm_campaign=spring_sale

One might match /products?utm_campaign=spring_sale and also /products?utm_campaign=winter_sale

@mojombo @peterp could we get your view on the option names:

  • ignoreQueryString so that useMatch only matches the path (and the default case also if the location lacks params, right?)
  • matchSearchParamKeys so that useMatch will consider the route and any params specified

Thanks.

@LBrian
Copy link
Copy Markdown
Contributor Author

LBrian commented Jun 2, 2021

  • ignoreQueryString so that useMatch only matches the path (and the default case also if the location lacks params, right?)

Correct

  • matchSearchParamKeys so that useMatch will consider the route and any params specified

Correct

Used for keyword analysis. Use utm_campaign to identify a specific product promotion or strategic campaign.
Example: utm_campaign=spring_sale

One might match /products?utm_campaign=spring_sale and also /products?utm_campaign=winter_sale

Good idea!

@dac09 dac09 added this to the next-release-candidate milestone Jun 4, 2021
@jtoar jtoar removed this from the next-release-candidate milestone Jun 5, 2021
@LBrian
Copy link
Copy Markdown
Contributor Author

LBrian commented Aug 5, 2021

@jtoar @dthyresson @Tobbe Ready for review, I will find some time to update docs tomorrow.

@LBrian LBrian requested a review from dthyresson August 5, 2021 12:40
Comment thread packages/router/src/__tests__/util.test.ts Outdated
Comment thread packages/router/src/__tests__/util.test.ts Outdated
Comment thread packages/router/src/links.tsx
Comment thread packages/router/src/util.ts
Comment thread packages/router/src/util.ts Outdated
Comment thread packages/router/src/util.ts Outdated
Comment thread packages/router/src/__tests__/links.test.tsx
@LBrian LBrian requested a review from Tobbe August 6, 2021 00:01
Copy link
Copy Markdown
Contributor

@Tobbe Tobbe 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 to me, but I haven't tested it, only looked at the code.

@dac09 dac09 self-assigned this Aug 9, 2021
Copy link
Copy Markdown
Contributor

@dac09 dac09 left a comment

Choose a reason for hiding this comment

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

LGTM, tested works great. Thank you for another great contribution @LBrian 🚀

@dac09
Copy link
Copy Markdown
Contributor

dac09 commented Aug 9, 2021

Oh one more thing @LBrian - fancy adding the docs for this into https://github.com/redwoodjs/redwood/blob/main/packages/router/README.md#active-links ? This readme gets pulled into redwoodjs.com

Let me know if you're happy to :), otherwise will add to my list.

@dac09 dac09 merged commit bca5975 into redwoodjs:main Aug 9, 2021
dac09 added a commit to dac09/redwood that referenced this pull request Aug 9, 2021
* 'main' of github.com:redwoodjs/redwood:
  Improved useMatch to support search parameters (redwoodjs#2683)
  Supports SDL and Scaffold generation for Float scalar types (redwoodjs#3218)
  Allow custom functions to serve binary data (redwoodjs#3219)
  Support Supabase phone and OTP auth (redwoodjs#3177)
@thedavidprice
Copy link
Copy Markdown
Contributor

Great work on this, everyone! And thanks again for your patience with us @LBrian 🚀

@LBrian
Copy link
Copy Markdown
Contributor Author

LBrian commented Aug 9, 2021

Oh one more thing @LBrian - fancy adding the docs for this into https://github.com/redwoodjs/redwood/blob/main/packages/router/README.md#active-links ? This readme gets pulled into redwoodjs.com

Let me know if you're happy to :), otherwise will add to my list.

Yap, I will do that today!

@thedavidprice
Copy link
Copy Markdown
Contributor

Hi @LBrian were you still available to work on the doc update? No pressure. Just let us know either way.

@LBrian
Copy link
Copy Markdown
Contributor Author

LBrian commented Aug 12, 2021

Hi @LBrian were you still available to work on the doc update? No pressure. Just let us know either way.

Hi @thedavidprice,

I got blocked by some Svelte issue with my project, I should be able to find sometime to do it this weekend, if I am a blocker, please feel free to take over or reassign. 😃

@LBrian
Copy link
Copy Markdown
Contributor Author

LBrian commented Aug 15, 2021

@thedavidprice Updated doc in #3241 cc @dac09

thedavidprice added a commit that referenced this pull request Aug 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow partial matches with NavLink useMatch does not match against query params

7 participants