Add frontend comments

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

@@ -15,6 +15,7 @@ export type TDropdownFilterProps = {
 export function DropdownFilter(props: TDropdownFilterProps) {
     const [selectedFilterStrings, setSelectedFilterStrings] = useState<string[]>([]);
 
+    // Handle changes to selections for the dropdown.
     const handleChange = (event: SelectChangeEvent<string[]>) => {
         const { value } = event.target;
 
@@ -27,6 +28,7 @@ export function DropdownFilter(props: TDropdownFilterProps) {
     const updateSelectedFilters = (stringFilters: string[]): void => {
         const currentFilters: TFilter[] = [];
 
+        // Dropdown returns strings, we need to find the tags related to their names here.
         stringFilters.forEach((filterString) => {
             filterString = filterString.trim();
             const foundFilter = props.filters.find((filter) => filter.name === filterString);

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

@@ -5,9 +5,12 @@ export class API {
     constructor(private baseAPIUrl: string) {}
 
     getVenues = async (venueFilters: TVenueFilters | null): Promise<TVenue[]> => {
+        // Build up the params for the request here.
         let params = "";
         params += ArrayToArrayUrlParams("categories", venueFilters?.categories.map((c) => c.name) ?? []);
         params += ArrayToArrayUrlParams("tags", venueFilters?.tags.map((v) => v.name) ?? [], params.length < 1);
+
+        // NameFilter params here, logic included to init with ? or &.
         params += venueFilters?.nameFilter ? `${params.length < 1 ? "?" : "&"}search=${venueFilters.nameFilter}` : "";
 
         const response = await fetch(`${this.baseAPIUrl}/venue${params}`);

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

@@ -2,6 +2,7 @@ export type TEnvironment = {
     BaseAPIUrl: string;
 };
 
+// Environment variables, keep constants here.
 export const Environment: TEnvironment = {
     BaseAPIUrl: "https://localhost:7021"
 };

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

@@ -1,12 +1,17 @@
+// Returns a value that represents a URL param string that supports arrays.
+// Example: ?tag=one&tag=two&tag=three
 export function ArrayToArrayUrlParams(paramName: string, params: string[], isFirstParam: boolean = true): string {
+    // If the length is 0, we don't want to return anything to mess up the URL.
     if (params.length === 0) {
         return "";
     }
 
+    // Depending on the location of the returned params, we should use the init character or the concat characer.
     let paramString = isFirstParam ? "?" : "&";
     params.forEach((param) => {
         paramString += `${paramName}=${param}&`;
     });
 
+    // All values will have '&' at the end, let's chop it off before returning.
     return paramString.slice(0, -1);
 }

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

@@ -1,6 +1,6 @@
 import { TextField } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
-import { ChangeEventHandler, useState } from "react";
+import { useState } from "react";
 import { DropdownFilter } from "../components/dropdown-filter";
 import { VenueGrid } from "../components/venue-grid";
 import { API } from "../lib/api";
@@ -22,9 +22,11 @@ export function Index() {
 
     const { data: tagData, isError: tagError } = useQuery<TTag[], Error>(["tags"], api.getTags);
 
+    // Function to handle the events from the search textbox.
     const handleSearchChange = (event: any) => {
         const { value } = event.target;
 
+        // We don't want to give it an empty string or we will get no values returned from the search.
         if (value && value.length === 0) {
             setNameTextFilter(null);
         }