From 7bb5d3f4c61321a02ca6b802d0c5c58d277581d9 Mon Sep 17 00:00:00 2001
From: Eelco Wiersma <contact@pagebakers.nl>
Date: Sun, 17 Jul 2022 16:39:01 +0200
Subject: [PATCH] fix: use correct params type

---
 .changeset/quiet-starfishes-dance.md          |  5 ++++
 .../saas-ui-provider/src/router-provider.tsx  | 28 +++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/quiet-starfishes-dance.md

diff --git a/.changeset/quiet-starfishes-dance.md b/.changeset/quiet-starfishes-dance.md
new file mode 100644
index 000000000..66f64c7fc
--- /dev/null
+++ b/.changeset/quiet-starfishes-dance.md
@@ -0,0 +1,5 @@
+---
+'@saas-ui/provider': patch
+---
+
+Use correct params type
diff --git a/packages/saas-ui-provider/src/router-provider.tsx b/packages/saas-ui-provider/src/router-provider.tsx
index 73c7e4613..7c44e56ea 100644
--- a/packages/saas-ui-provider/src/router-provider.tsx
+++ b/packages/saas-ui-provider/src/router-provider.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import type { ParsedUrlQuery } from 'querystring'
 
 interface NavigateOptions {
   replace?: boolean
@@ -13,7 +14,7 @@ interface RouterLocation {
 export interface RouterContextValue {
   navigate: (path: string, options?: NavigateOptions) => void
   back: () => void
-  params?: URLSearchParams
+  params?: ParsedUrlQuery
   location?: RouterLocation
 }
 
@@ -49,7 +50,28 @@ export const useLocation = () => {
   return null
 }
 
-export function useActivePath(path: string) {
+export interface UseActivePathOptions {
+  /**
+   * Set to false to match the first parth of the path.
+   * eg: /contacts will match /contacts/people
+   */
+  end?: boolean
+}
+
+/**
+ * Matches the given path to the current active path.
+ * @param path string
+ * @param options UseActivePathOptions
+ * @returns boolean
+ */
+export function useActivePath(
+  path: string,
+  options: UseActivePathOptions = {}
+) {
+  const { end = true } = options
   const location = useLocation()
-  return location?.pathname === path
+  return !!React.useMemo(
+    () => location?.pathname.match(new RegExp(`${path}${end ? '$' : ''}`)),
+    [location?.pathname, path, options]
+  )
 }