From 37175a82d8668d2d9fcd500a625ecb49b1ea83e3 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 12 Apr 2024 20:22:05 -0400
Subject: [PATCH 1/3] fix type error

---
 static/app/utils/useUrlParams.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/utils/useUrlParams.tsx b/static/app/utils/useUrlParams.tsx
index 19c05cd3a9214e..9c7d7d9c9b3731 100644
--- a/static/app/utils/useUrlParams.tsx
+++ b/static/app/utils/useUrlParams.tsx
@@ -20,7 +20,7 @@ function useUrlParams(defaultKey?: string, defaultValue?: string) {
   const getParamValue = useCallback(
     (key: string) => {
       const location = browserHistory.getCurrentLocation();
-      return location.query[key] ?? defaultValue;
+      return typeof location.query[key] === 'string' ? location.query[key] : defaultValue;
     },
     [defaultValue]
   );

From cd72f86725e5625291b83a2e5c0c95cbaad69ba1 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Sat, 13 Apr 2024 02:25:35 -0400
Subject: [PATCH 2/3] better fix

---
 static/app/utils/useUrlParams.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/static/app/utils/useUrlParams.tsx b/static/app/utils/useUrlParams.tsx
index 9c7d7d9c9b3731..b0a052fb7f53dc 100644
--- a/static/app/utils/useUrlParams.tsx
+++ b/static/app/utils/useUrlParams.tsx
@@ -20,7 +20,9 @@ function useUrlParams(defaultKey?: string, defaultValue?: string) {
   const getParamValue = useCallback(
     (key: string) => {
       const location = browserHistory.getCurrentLocation();
-      return typeof location.query[key] === 'string' ? location.query[key] : defaultValue;
+      return Array.isArray(location.query[key])
+        ? location.query[key]?.[0] ?? defaultValue
+        : location.query[key] ?? defaultValue;
     },
     [defaultValue]
   );

From 8a6b121da14406c8251ff2768c125f6c7f31ffe6 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 15 Apr 2024 14:39:47 -0400
Subject: [PATCH 3/3] PR comments

---
 static/app/utils/useUrlParams.spec.tsx | 6 +++++-
 static/app/utils/useUrlParams.tsx      | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/static/app/utils/useUrlParams.spec.tsx b/static/app/utils/useUrlParams.spec.tsx
index 773dfb51a2538a..6225680d707867 100644
--- a/static/app/utils/useUrlParams.spec.tsx
+++ b/static/app/utils/useUrlParams.spec.tsx
@@ -8,7 +8,7 @@ import useUrlParams from './useUrlParams';
 jest.mock('react-router');
 jest.mock('sentry/utils/useLocation');
 
-type Query = {limit: string; page: string};
+type Query = {array: string[]; limit: string; page: string};
 
 describe('useUrlParams', () => {
   beforeEach(() => {
@@ -16,6 +16,7 @@ describe('useUrlParams', () => {
       query: {
         page: '3',
         limit: '50',
+        array: ['first', 'second'],
       },
     } as Location<Query>);
   });
@@ -25,6 +26,7 @@ describe('useUrlParams', () => {
 
     expect(result.current.getParamValue('page')).toBe('3');
     expect(result.current.getParamValue('limit')).toBe('50');
+    expect(result.current.getParamValue('array')).toBe('first');
     expect(result.current.getParamValue('foo')).toBeUndefined();
   });
 
@@ -54,6 +56,7 @@ describe('useUrlParams', () => {
 
     expect(browserHistory.push).toHaveBeenCalledWith({
       query: {
+        array: ['first', 'second'],
         page: '4',
         limit: '50',
       },
@@ -69,6 +72,7 @@ describe('useUrlParams', () => {
 
     expect(browserHistory.push).toHaveBeenCalledWith({
       query: {
+        array: ['first', 'second'],
         page: '4',
         limit: '50',
       },
diff --git a/static/app/utils/useUrlParams.tsx b/static/app/utils/useUrlParams.tsx
index b0a052fb7f53dc..bc1a752b2e4635 100644
--- a/static/app/utils/useUrlParams.tsx
+++ b/static/app/utils/useUrlParams.tsx
@@ -20,8 +20,9 @@ function useUrlParams(defaultKey?: string, defaultValue?: string) {
   const getParamValue = useCallback(
     (key: string) => {
       const location = browserHistory.getCurrentLocation();
+      // location.query.key can return string[] but we expect a singular value from this function, so we return the first string (this is picked arbitrarily) if it's string[]
       return Array.isArray(location.query[key])
-        ? location.query[key]?.[0] ?? defaultValue
+        ? location.query[key]?.at(0) ?? defaultValue
         : location.query[key] ?? defaultValue;
     },
     [defaultValue]