Begin work on venue grid view

frontend/leeds-beer-quest/package.json

@@ -9,6 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.11",
     "@tanstack/react-query": "^4.13.4",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",

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

@@ -0,0 +1,30 @@
+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/components/venue-grid.tsx

@@ -0,0 +1,42 @@
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { TVenue } from '../lib/types';
+
+export type TVenueGridProps = {
+    venueData: TVenue[];
+};
+
+export function VenueGrid(props: TVenueGridProps) {
+    const venueData = props.venueData;
+
+    return(
+        <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell align="left">Category</TableCell>
+            <TableCell align="left">Date Visited</TableCell>
+            <TableCell align="left">Excerpt</TableCell>
+            <TableCell align="left">Phone</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {venueData.map((venue) => (
+            <TableRow
+              key={venue.name}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {venue.name}
+              </TableCell>
+              <TableCell align="left">{venue.category.name}</TableCell>
+              <TableCell align="left">{venue.dateAttended.toString()}</TableCell>
+              <TableCell align="left">{venue.excerpt}</TableCell>
+              <TableCell align="left">{venue.phone}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+    );
+}

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

@@ -1,16 +1,16 @@
-import { TTag } from "./types";
+import { TCategory, TTag, TVenue } from "./types";
 
 export class API {
     constructor(private baseAPIUrl: string) {}
 
-    getVenues = async() => {
+    getVenues = async (): Promise<TVenue[]> => {
         const response = await fetch(`${this.baseAPIUrl}/venue`);
-        await response.json();
+        return await response.json();
     }
 
-    getCategories = async() => {
+    getCategories = async (): Promise<TCategory[]> => {
         const response = await fetch(`${this.baseAPIUrl}/category`);
-        await response.json();
+        return await response.json();
     }
 
     getTags = async (): Promise<TTag[]> => {

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

@@ -1,4 +1,30 @@
 export type TTag = {
-    id: number;
+    id:   number;
     name: string;
 };
+
+export type TCategory = {
+    id:   number;
+    name: string;
+}
+
+export type TVenue = {
+    id:              number;
+    name:            string;
+    categoryId:      number;
+    category:        TCategory;
+    url:             string;
+    dateAttended:    Date;
+    excerpt:         string;
+    thumbnail:       string;
+    latitude:        number;
+    longitude:       number;
+    address:         string;
+    phone:           string;
+    twitter:         string;
+    starsBeer:       number;
+    starsAtmosphere: number;
+    starsAmenities:  number;
+    starsValue:      number;
+    tags:            TTag[];
+}

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

@@ -1,12 +1,22 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { TagSelector } from "../components/tag-selector";
+import { VenueGrid } from "../components/venue-grid";
 import { API } from "../lib/api";
 import { Environment } from "../lib/environment";
-import { TTag } from "../lib/types";
+import { TTag, TVenue } from "../lib/types";
 
 export function Index() {
     const api = new API(Environment.BaseAPIUrl);
 
-    const { isLoading, isError, data, error } = useQuery<TTag[], Error>(["tags"], api.getTags);
+    const { data: venueData } = useQuery<TVenue[], Error>(["venues"], api.getVenues);
 
-    return(<div>{data?.map(d => d.name)}</div>);
+    const { data: tagData } = useQuery<TTag[], Error>(["tags"], api.getTags);
+
+    // return(<div>{data?.map(d => `${d} |`)}</div>);
+    return(
+        <>
+        <TagSelector tags={tagData ?? []}/>
+            <VenueGrid venueData={venueData ?? []} />
+        </>
+    );
 };