fix: encode request query parameters

frontend/package.json

@@ -31,6 +31,7 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "test": "node --test",
     "preview": "vite preview",
     "dev:remote": "cross-env VITE_DEV_REMOTE=remote npm run dev"
   },

frontend/src/request/buildQueryString.js

@@ -0,0 +1,13 @@
+export function buildQueryString(options = {}) {
+  const searchParams = new URLSearchParams();
+
+  Object.entries(options).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      searchParams.set(key, value);
+    }
+  });
+
+  const queryString = searchParams.toString();
+
+  return queryString ? `?${queryString}` : '';
+}

frontend/src/request/buildQueryString.test.js

@@ -0,0 +1,37 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { buildQueryString } from './buildQueryString.js';
+
+test('returns an empty string when no options are provided', () => {
+  assert.equal(buildQueryString(), '');
+});
+
+test('encodes reserved characters and preserves their values', () => {
+  const queryString = buildQueryString({
+    q: 'ACME & Sons + Partners #1',
+    fields: 'name,email',
+  });
+  const searchParams = new URLSearchParams(queryString);
+
+  assert.equal(searchParams.get('q'), 'ACME & Sons + Partners #1');
+  assert.equal(searchParams.get('fields'), 'name,email');
+  assert.match(queryString, /%26/);
+  assert.match(queryString, /%2B/);
+  assert.match(queryString, /%23/);
+});
+
+test('preserves falsy values and omits missing values', () => {
+  const queryString = buildQueryString({
+    page: 0,
+    enabled: false,
+    filter: undefined,
+    equal: null,
+  });
+  const searchParams = new URLSearchParams(queryString);
+
+  assert.equal(searchParams.get('page'), '0');
+  assert.equal(searchParams.get('enabled'), 'false');
+  assert.equal(searchParams.has('filter'), false);
+  assert.equal(searchParams.has('equal'), false);
+});

frontend/src/request/request.js

@@ -4,6 +4,7 @@ import { API_BASE_URL } from '@/config/serverApiConfig';
 import errorHandler from './errorHandler';
 import successHandler from './successHandler';
 import storePersist from '@/redux/storePersist';
+import { buildQueryString } from './buildQueryString';
 
 function findKeyByPrefix(object, prefix) {
   for (var property in object) {
@@ -116,9 +117,7 @@ const request = {
   filter: async ({ entity, options = {} }) => {
     try {
       includeToken();
-      let filter = options.filter ? 'filter=' + options.filter : '';
-      let equal = options.equal ? '&equal=' + options.equal : '';
-      let query = `?${filter}${equal}`;
+      const query = buildQueryString(options);
 
       const response = await axios.get(entity + '/filter' + query);
       successHandler(response, {
@@ -134,11 +133,7 @@ const request = {
   search: async ({ entity, options = {} }) => {
     try {
       includeToken();
-      let query = '?';
-      for (var key in options) {
-        query += key + '=' + options[key] + '&';
-      }
-      query = query.slice(0, -1);
+      const query = buildQueryString(options);
       // headersInstance.cancelToken = source.token;
       const response = await axios.get(entity + '/search' + query);
 
@@ -155,11 +150,7 @@ const request = {
   list: async ({ entity, options = {} }) => {
     try {
       includeToken();
-      let query = '?';
-      for (var key in options) {
-        query += key + '=' + options[key] + '&';
-      }
-      query = query.slice(0, -1);
+      const query = buildQueryString(options);
 
       const response = await axios.get(entity + '/list' + query);
 
@@ -175,11 +166,7 @@ const request = {
   listAll: async ({ entity, options = {} }) => {
     try {
       includeToken();
-      let query = '?';
-      for (var key in options) {
-        query += key + '=' + options[key] + '&';
-      }
-      query = query.slice(0, -1);
+      const query = buildQueryString(options);
 
       const response = await axios.get(entity + '/listAll' + query);
 
@@ -253,11 +240,7 @@ const request = {
   summary: async ({ entity, options = {} }) => {
     try {
       includeToken();
-      let query = '?';
-      for (var key in options) {
-        query += key + '=' + options[key] + '&';
-      }
-      query = query.slice(0, -1);
+      const query = buildQueryString(options);
       const response = await axios.get(entity + '/summary' + query);
 
       successHandler(response, {