From 2b1e9dd8cb942b398979ff3d9a6b5e6b7c0d5821 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Tue, 30 Jul 2024 16:07:56 +0200
Subject: [PATCH] Allow query params with value undefined in api calls

---
 lms/static/scripts/frontend_apps/utils/api.ts    |  4 ++--
 .../frontend_apps/utils/dashboard/hooks.ts       | 16 ++++++----------
 .../scripts/frontend_apps/utils/test/url-test.js |  1 +
 lms/static/scripts/frontend_apps/utils/url.ts    |  9 +++++++--
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/lms/static/scripts/frontend_apps/utils/api.ts b/lms/static/scripts/frontend_apps/utils/api.ts
index 34c615e54d..56d36ded20 100644
--- a/lms/static/scripts/frontend_apps/utils/api.ts
+++ b/lms/static/scripts/frontend_apps/utils/api.ts
@@ -45,7 +45,7 @@ export type APICallOptions = {
   path: string;
 
   /** Query parameters. */
-  params?: Record<string, string | string[]>;
+  params?: Record<string, string | string[] | undefined>;
 
   /** JSON-serializable body of request. */
   data?: object;
@@ -186,7 +186,7 @@ export function urlPath(strings: TemplateStringsArray, ...params: string[]) {
  */
 export function useAPIFetch<T = unknown>(
   path: string | null,
-  params?: Record<string, string | string[]>,
+  params?: Record<string, string | string[] | undefined>,
 ): FetchResult<T> {
   const {
     api: { authToken },
diff --git a/lms/static/scripts/frontend_apps/utils/dashboard/hooks.ts b/lms/static/scripts/frontend_apps/utils/dashboard/hooks.ts
index 11f1aa3bee..34170f4bc2 100644
--- a/lms/static/scripts/frontend_apps/utils/dashboard/hooks.ts
+++ b/lms/static/scripts/frontend_apps/utils/dashboard/hooks.ts
@@ -36,16 +36,12 @@ export function useDashboardFilters(): UseDashboardFilters {
   const [, navigate] = useLocation();
   const updateFilters = useCallback(
     ({ courseIds, assignmentIds, studentIds }: Partial<DashboardFilters>) => {
-      const newQueryParams = { ...queryParams };
-      if (courseIds) {
-        newQueryParams.course_id = courseIds;
-      }
-      if (assignmentIds) {
-        newQueryParams.assignment_id = assignmentIds;
-      }
-      if (studentIds) {
-        newQueryParams.student_id = studentIds;
-      }
+      const newQueryParams = {
+        ...queryParams,
+        course_id: courseIds,
+        assignment_id: assignmentIds,
+        student_id: studentIds,
+      };
 
       navigate(recordToQueryString(newQueryParams), { replace: true });
     },
diff --git a/lms/static/scripts/frontend_apps/utils/test/url-test.js b/lms/static/scripts/frontend_apps/utils/test/url-test.js
index ac7a120c2f..7aafe62c90 100644
--- a/lms/static/scripts/frontend_apps/utils/test/url-test.js
+++ b/lms/static/scripts/frontend_apps/utils/test/url-test.js
@@ -47,6 +47,7 @@ describe('recordToSearchParams', () => {
     const result = recordToSearchParams({
       foo: 'bar',
       baz: ['1', '2', '3'],
+      ignored: undefined,
     });
 
     assert.equal(result.toString(), 'foo=bar&baz=1&baz=2&baz=3');
diff --git a/lms/static/scripts/frontend_apps/utils/url.ts b/lms/static/scripts/frontend_apps/utils/url.ts
index ed8190311f..e7686b1aa4 100644
--- a/lms/static/scripts/frontend_apps/utils/url.ts
+++ b/lms/static/scripts/frontend_apps/utils/url.ts
@@ -34,10 +34,15 @@ export function replaceURLParams<Param>(
  * Any param which is an array will be appended for every one of its values.
  */
 export function recordToSearchParams(
-  params: Record<string, string | string[]>,
+  params: Record<string, string | string[] | undefined>,
 ): URLSearchParams {
   const queryParams = new URLSearchParams();
   Object.entries(params).forEach(([name, value]) => {
+    // Skip params if their value is undefined
+    if (value === undefined) {
+      return;
+    }
+
     if (Array.isArray(value)) {
       value.forEach(v => queryParams.append(name, v));
     } else {
@@ -59,7 +64,7 @@ export function recordToSearchParams(
  *    { foo: 'bar', something: ['hello', 'world'] } -> '?foo=bar&something=hello&something=world'
  */
 export function recordToQueryString(
-  params: Record<string, string | string[]>,
+  params: Record<string, string | string[] | undefined>,
 ): string {
   const queryString = recordToSearchParams(params).toString();
   return queryString.length > 0 ? `?${queryString}` : '';