feat(frontend): render simple listen report

frontend/src/api/api.ts

@@ -1,4 +1,7 @@
+import { formatISO, parseISO } from "date-fns";
 import { Listen } from "./entities/listen";
+import { ListenReportItem } from "./entities/listen-report-item";
+import { ListenReportOptions } from "./entities/listen-report-options";
 import { Pagination } from "./entities/pagination";
 import { PaginationOptions } from "./entities/pagination-options";
 import { User } from "./entities/user";
@@ -67,3 +70,33 @@ export const getRecentListens = async (
   console.log("getRecentListens", { listens });
   return listens;
 };
+
+export const getListensReport = async (
+  options: ListenReportOptions
+): Promise<ListenReportItem[]> => {
+  const { timeFrame, timeStart, timeEnd } = options;
+
+  const res = await fetch(
+    `/api/v1/reports/listens?timeFrame=${timeFrame}&timeStart=${formatISO(
+      timeStart
+    )}&timeEnd=${formatISO(timeEnd)}`,
+    {
+      headers: getDefaultHeaders(),
+    }
+  );
+
+  switch (res.status) {
+    case 200: {
+      break;
+    }
+    case 401: {
+      throw new UnauthenticatedError(`No token or token expired`);
+    }
+    default: {
+      throw new Error(`Unable to getRecentListens: ${res.status}`);
+    }
+  }
+
+  const rawItems: { count: number; date: string }[] = (await res.json()).items;
+  return rawItems.map(({ count, date }) => ({ count, date: parseISO(date) }));
+};

frontend/src/api/entities/listen-report-item.ts

@@ -0,0 +1,4 @@
+export interface ListenReportItem {
+  date: Date;
+  count: number;
+}

frontend/src/api/entities/listen-report-options.ts

@@ -0,0 +1,5 @@
+export interface ListenReportOptions {
+  timeFrame: "day" | "week" | "month" | "year";
+  timeStart: Date;
+  timeEnd: Date;
+}