fix(frontend): fix encoding of queryparameters in api calls

We had a bug where the "+" before the timezone in ISO8601 strings was
being parsed as " " in the server because it was not properly encoded.

By using URLSearchParams to create our querystring we should be fine.

frontend/src/api/api.ts

@@ -5,6 +5,7 @@ import { ListenReportOptions } from "./entities/listen-report-options";
 import { Pagination } from "./entities/pagination";
 import { PaginationOptions } from "./entities/pagination-options";
 import { User } from "./entities/user";
+import { qs } from "../util/queryString";
 
 export class UnauthenticatedError extends Error {}
 
@@ -50,9 +51,12 @@ export const getRecentListens = async (
 ): Promise<Pagination<Listen>> => {
   const { page, limit } = options;
 
-  const res = await fetch(`/api/v1/listens?page=${page}&limit=${limit}`, {
+  const res = await fetch(
+    `/api/v1/listens?${qs({ page: page.toString(), limit: limit.toString() })}`,
+    {
       headers: getDefaultHeaders(),
-  });
+    }
+  );
 
   switch (res.status) {
     case 200: {
@@ -77,9 +81,11 @@ export const getListensReport = async (
   const { timeFrame, timeStart, timeEnd } = options;
 
   const res = await fetch(
-    `/api/v1/reports/listens?timeFrame=${timeFrame}&timeStart=${formatISO(
-      timeStart
-    )}&timeEnd=${formatISO(timeEnd)}`,
+    `/api/v1/reports/listens?${qs({
+      timeFrame,
+      timeStart: formatISO(timeStart),
+      timeEnd: formatISO(timeEnd),
+    })}`,
     {
       headers: getDefaultHeaders(),
     }

frontend/src/util/queryString.ts

@@ -0,0 +1,12 @@
+interface QueryParameters {
+  [x: string]: string;
+}
+export const qs = (parameters: QueryParameters): string => {
+  const queryParams = new URLSearchParams();
+
+  Object.entries(parameters).forEach(([key, value]) =>
+    queryParams.append(key, value)
+  );
+
+  return queryParams.toString();
+};