Finish filter implementation for frontend

frontend/leeds-beer-quest/src/components/dropdown-filter.tsx

@@ -1,4 +1,4 @@
-import { ListItemText, MenuItem, Select, SelectChangeEvent } from "@mui/material";
+import { InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent } from "@mui/material";
 import { useState } from "react";
 
 export type TFilter = {
@@ -7,21 +7,45 @@ export type TFilter = {
 }
 
 export type TDropdownFilterProps = {
+    prefillText: string;
     filters: TFilter[];
+    setSelectedFilters: (filters: TFilter[]) => void;
 }
 
 export function DropdownFilter(props: TDropdownFilterProps) {
-    const [selectedTags, setSelectedTags] = useState<string[]>([]);
+    const [selectedFilterStrings, setSelectedFilterStrings] = useState<string[]>([]);
 
-    const handleChange = (event: SelectChangeEvent<typeof selectedTags>) => {
+    const handleChange = (event: SelectChangeEvent<string[]>) => {
         const { value } = event.target;
-        setSelectedTags(typeof value == "string" ? value.split(",") : value);
+
+        const filterStrings = typeof value === "string" ? value.split(",") : value;
+        setSelectedFilterStrings(filterStrings);
+
+        updateSelectedFilters(filterStrings);
     };
 
+    const updateSelectedFilters = (stringFilters: string[]): void => {
+        const currentFilters: TFilter[] = [];
+
+        stringFilters.forEach((filterString) => {
+            filterString = filterString.trim();
+            const foundFilter = props.filters.find((filter) => filter.name === filterString);
+
+            if (foundFilter) {
+                currentFilters.push(foundFilter);
+            }
+        });
+
+        props.setSelectedFilters(currentFilters);
+    }
+
     return(
+        <div>
+            <InputLabel>{props.prefillText}</InputLabel>
             <Select
+            style={{ minWidth: 150, maxWidth: 300 }}
             multiple
-        value={selectedTags}
+            value={selectedFilterStrings}
             onChange={handleChange}
             renderValue={(selected) => selected.join(', ')}>
                 {props.filters.map((filter) => (
@@ -30,5 +54,6 @@ export function DropdownFilter(props: TDropdownFilterProps) {
                     </MenuItem>
                 ))}
         </Select>
+        </div>
     );
 }

frontend/leeds-beer-quest/src/components/tag-selector.tsx

@@ -1,30 +0,0 @@
-import { ListItemText, MenuItem, Select, SelectChangeEvent } from "@mui/material";
-import { useState } from "react";
-import { TTag } from "../lib/types";
-
-export type TTagSelectorProps = {
-    tags: TTag[];
-}
-
-export function TagSelector(props: TTagSelectorProps) {
-    const [selectedTags, setSelectedTags] = useState<string[]>([]);
-
-    const handleChange = (event: SelectChangeEvent<typeof selectedTags>) => {
-        const { value } = event.target;
-        setSelectedTags(typeof value == "string" ? value.split(",") : value);
-    };
-
-    return(
-        <Select
-        multiple
-        value={selectedTags}
-        onChange={handleChange}
-        renderValue={(selected) => selected.join(', ')}>
-            {props.tags.map((tag) => (
-                <MenuItem key={tag.id} value={tag.name}>
-                    <ListItemText primary={tag.name} />
-                </MenuItem>
-            ))}
-        </Select>
-    );
-}

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

@@ -1,21 +1,30 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { TagSelector } from "../components/tag-selector";
+import { 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 { TTag, TVenue } from "../lib/types";
+import { TCategory, TTag, TVenue } from "../lib/types";
 
 export function Index() {
     const api = new API(Environment.BaseAPIUrl);
 
     const { data: venueData } = useQuery<TVenue[], Error>(["venues"], api.getVenues);
 
+    const { data: categoryData } = useQuery<TCategory[], Error>(["categories"], api.getCategories);
+
     const { data: tagData } = useQuery<TTag[], Error>(["tags"], api.getTags);
 
-    // return(<div>{data?.map(d => `${d} |`)}</div>);
+    const [filteredTags, setFilteredTags] = useState<TTag[]>([]);
+    const [filteredCategories, setFilteredCategories] = useState<TCategory[]>([]);
+
     return(
         <>
-        <TagSelector tags={tagData ?? []}/>
+            <h1>Leeds Beer Quest</h1>
+            <div style={{ display: "flex", justifyContent: "space-around" }}>
+                <DropdownFilter filters={tagData ?? []} setSelectedFilters={setFilteredTags} prefillText={"Tags"} />
+                <DropdownFilter filters={categoryData ?? []} setSelectedFilters={setFilteredCategories} prefillText={"Categories"} />
+            </div>
             <VenueGrid venueData={venueData ?? []} />
         </>
     );