Implement searching via categories

frontend/leeds-beer-quest/src/lib/api.ts

@@ -1,10 +1,13 @@
-import { TCategory, TTag, TVenue } from "./types";
+import { ArrayToArrayUrlParams } from "./helpers";
+import { TCategory, TTag, TVenue, TVenueFilters } from "./types";
 
 export class API {
     constructor(private baseAPIUrl: string) {}
 
-    getVenues = async (): Promise<TVenue[]> => {
-        const response = await fetch(`${this.baseAPIUrl}/venue`);
+    getVenues = async (venueFilters: TVenueFilters | null): Promise<TVenue[]> => {
+        const categoriesParams = ArrayToArrayUrlParams("categories", venueFilters?.categories.map((c) => c.name) ?? []);
+        const response = await fetch(`${this.baseAPIUrl}/venue${categoriesParams}`);
+        console.log(`calling ${this.baseAPIUrl}/venue${categoriesParams}`);
         return await response.json();
     }
 

frontend/leeds-beer-quest/src/lib/helpers.ts

@@ -0,0 +1,12 @@
+export function ArrayToArrayUrlParams(paramName: string, params: string[], isFirstParam: boolean = true): string {
+    if (params.length === 0) {
+        return "";
+    }
+
+    let paramString = isFirstParam ? "?" : "&";
+    params.forEach((param) => {
+        paramString += `${paramName}=${param}&`;
+    });
+
+    return paramString.slice(0, -1);
+}

frontend/leeds-beer-quest/src/lib/types.ts

@@ -27,4 +27,9 @@ export type TVenue = {
     starsAmenities:  number;
     starsValue:      number;
     tags:            TTag[];
+}
+
+export type TVenueFilters = {
+    tags: TTag[];
+    categories: TCategory[];
 }

frontend/leeds-beer-quest/src/pages/index.tsx

@@ -1,22 +1,29 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { DropdownFilter } from "../components/dropdown-filter";
 import { VenueGrid } from "../components/venue-grid";
 import { API } from "../lib/api";
 import { Environment } from "../lib/environment";
-import { TCategory, TTag, TVenue } from "../lib/types";
+import { TCategory, TTag, TVenue, TVenueFilters } from "../lib/types";
 
 export function Index() {
+    const [filteredTags, setFilteredTags] = useState<TTag[]>([]);
+    const [filteredCategories, setFilteredCategories] = useState<TCategory[]>([]);
+
     const api = new API(Environment.BaseAPIUrl);
 
-    const { data: venueData } = useQuery<TVenue[], Error>(["venues"], api.getVenues);
+    const queryClient = useQueryClient();
+
+    const { data: venueData } = useQuery<TVenue[], Error>(["venues", filteredCategories], () => api.getVenues({categories: filteredCategories, tags: filteredTags}));
 
     const { data: categoryData } = useQuery<TCategory[], Error>(["categories"], api.getCategories);
 
     const { data: tagData } = useQuery<TTag[], Error>(["tags"], api.getTags);
 
-    const [filteredTags, setFilteredTags] = useState<TTag[]>([]);
-    const [filteredCategories, setFilteredCategories] = useState<TCategory[]>([]);
+    // useEffect(() => {
+    //     console.log("useeffect called!");
+    //     queryClient.invalidateQueries(["venues"]);
+    // }, [filteredCategories]);
 
     return(
         <>