add web app & add concurrency

web/src/api/useSearchQuery.ts

@@ -0,0 +1,33 @@
+import { useQuery } from "@tanstack/react-query";
+
+export type Album = {
+  id: number;
+  title: string;
+  duration: number;
+  numberOfTracks: number;
+  releaseDate: string;
+  type: "ALBUM";
+  url: string;
+  cover: string;
+  vibrantColor: string;
+  explicit: boolean;
+  audioQuality: "LOSSLESS" | "LOW";
+};
+
+export type SearchQueryParams = {
+  query: string;
+};
+
+export const useSearchQuery = (params: SearchQueryParams) => {
+  return useQuery({
+    queryKey: ["search", params],
+    enabled: !!params.query,
+    queryFn: async () => {
+      const q = new URLSearchParams();
+      q.set("q", params.query);
+
+      const resp = await fetch(`/search?${q.toString()}`);
+      return (await resp.json()) as Album[];
+    },
+  });
+};