From 40ce26eadd4fa2ffdbdcf4bec4c92bc9b62133df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Mon, 1 Jun 2020 21:17:40 +0200
Subject: [PATCH] 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          | 18 ++++++++++++------
 frontend/src/util/queryString.ts | 12 ++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/util/queryString.ts

diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
index 2d6efdc..1168647 100644
--- a/frontend/src/api/api.ts
+++ b/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}`, {
-    headers: getDefaultHeaders(),
-  });
+  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(),
     }
diff --git a/frontend/src/util/queryString.ts b/frontend/src/util/queryString.ts
new file mode 100644
index 0000000..9126006
--- /dev/null
+++ b/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();
+};