From b63fb7f8a9f079af1f7da98396440a372ee22403 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Wed, 13 Sep 2023 15:20:28 +0200
Subject: [PATCH] feat(admin-ui): Add useRouteParams react hook

---
 .../admin-ui/src/lib/react/src/public_api.ts  |  1 +
 .../react/src/react-hooks/use-route-params.ts | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 packages/admin-ui/src/lib/react/src/react-hooks/use-route-params.ts

diff --git a/packages/admin-ui/src/lib/react/src/public_api.ts b/packages/admin-ui/src/lib/react/src/public_api.ts
index 1196a577d4..921c0b398a 100644
--- a/packages/admin-ui/src/lib/react/src/public_api.ts
+++ b/packages/admin-ui/src/lib/react/src/public_api.ts
@@ -11,6 +11,7 @@ export * from './react-hooks/use-form-control';
 export * from './react-hooks/use-injector';
 export * from './react-hooks/use-page-metadata';
 export * from './react-hooks/use-query';
+export * from './react-hooks/use-route-params';
 export * from './register-react-custom-detail-component';
 export * from './register-react-data-table-component';
 export * from './register-react-form-input-component';
diff --git a/packages/admin-ui/src/lib/react/src/react-hooks/use-route-params.ts b/packages/admin-ui/src/lib/react/src/react-hooks/use-route-params.ts
new file mode 100644
index 0000000000..029e4eeab7
--- /dev/null
+++ b/packages/admin-ui/src/lib/react/src/react-hooks/use-route-params.ts
@@ -0,0 +1,42 @@
+import { ActivatedRoute } from '@angular/router';
+import { useEffect, useState } from 'react';
+import { useInjector } from './use-injector';
+
+/**
+ * @description
+ * Provides access to the current route params and query params.
+ *
+ * @example
+ * ```ts
+ * import { useRouteParams } from '\@vendure/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function MyComponent() {
+ *     const { params, queryParams } = useRouteParams();
+ *     // ...
+ *     return <div>{ params.id }</div>;
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+export function useRouteParams() {
+    const activatedRoute = useInjector(ActivatedRoute);
+    const [params, setParams] = useState(activatedRoute.snapshot.params);
+    const [queryParams, setQueryParams] = useState(activatedRoute.snapshot.queryParams);
+
+    useEffect(() => {
+        const subscription = activatedRoute.params.subscribe(value => {
+            setParams(value);
+        });
+        subscription.add(activatedRoute.queryParams.subscribe(value => setQueryParams(value)));
+        return () => subscription.unsubscribe();
+    }, []);
+
+    activatedRoute;
+
+    return {
+        params,
+        queryParams,
+    };
+}