StevenJW/x-lab-lbq-technical-test
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix tag search, add text name search, add config around seeding

Browse Source
This commit is contained in:
Stedoss
2022-11-01 19:58:15 +00:00
parent 38bedbaa72
commit b19f46ff92
11 changed files with 58 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/leeds-beer-quest/src/components/venue-grid.tsx
View File

@@ -17,6 +17,7 @@ export function VenueGrid(props: TVenueGridProps) {
<TableCell align="left">Category</TableCell>
<TableCell align="left">Date Visited</TableCell>
<TableCell align="left">Excerpt</TableCell>
<TableCell align="left">Tags</TableCell>
<TableCell align="left">Phone</TableCell>
</TableRow>
</TableHead>
@@ -32,6 +33,7 @@ export function VenueGrid(props: TVenueGridProps) {
<TableCell align="left">{venue.category.name}</TableCell>
<TableCell align="left">{venue.dateAttended.toString()}</TableCell>
<TableCell align="left">{venue.excerpt}</TableCell>
<TableCell align="left">{venue.tags.map(t => `${t.name} `)}</TableCell>
<TableCell align="left">{venue.phone}</TableCell>
</TableRow>
))}

10
frontend/leeds-beer-quest/src/lib/api.ts
View File

@@ -5,9 +5,13 @@ export class API {
constructor(private baseAPIUrl: string) {}
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}`);
let params = "";
params += ArrayToArrayUrlParams("categories", venueFilters?.categories.map((c) => c.name) ?? []);
params += ArrayToArrayUrlParams("tags", venueFilters?.tags.map((v) => v.name) ?? [], params.length < 1);
params += venueFilters?.nameFilter ? `${(params.length < 1 ? "?" : "&")}search=${venueFilters.nameFilter}` : "";
const response = await fetch(`${this.baseAPIUrl}/venue${params}`);
console.log(`calling ${this.baseAPIUrl}/venue${params}`);
return await response.json();
}

1
frontend/leeds-beer-quest/src/lib/types.ts
View File

@@ -30,6 +30,7 @@ export type TVenue = {
}
export type TVenueFilters = {
nameFilter: string | null;
tags: TTag[];
categories: TCategory[];
}

26
frontend/leeds-beer-quest/src/pages/index.tsx
View File

@@ -1,34 +1,40 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { TextField } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { ChangeEventHandler, 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, TVenueFilters } from "../lib/types";
import { TCategory, TTag, TVenue } from "../lib/types";
export function Index() {
const [nameTextFilter, setNameTextFilter] = useState<string | null>(null);
const [filteredTags, setFilteredTags] = useState<TTag[]>([]);
const [filteredCategories, setFilteredCategories] = useState<TCategory[]>([]);
const api = new API(Environment.BaseAPIUrl);
const queryClient = useQueryClient();
const { data: venueData } = useQuery<TVenue[], Error>(["venues", filteredCategories], () => api.getVenues({categories: filteredCategories, tags: filteredTags}));
const { data: venueData } = useQuery<TVenue[], Error>(["venues", filteredCategories, filteredTags, nameTextFilter], () => api.getVenues({nameFilter: nameTextFilter, categories: filteredCategories, tags: filteredTags}));
const { data: categoryData } = useQuery<TCategory[], Error>(["categories"], api.getCategories);
const { data: tagData } = useQuery<TTag[], Error>(["tags"], api.getTags);
// useEffect(() => {
// console.log("useeffect called!");
// queryClient.invalidateQueries(["venues"]);
// }, [filteredCategories]);
const handleSearchChange = (event: any) => {
const { value } = event.target;
if (value && value.length === 0) {
setNameTextFilter(null);
}
setNameTextFilter(value as string);
}
return(
<>
<h1>Leeds Beer Quest</h1>
<div style={{ display: "flex", justifyContent: "space-around" }}>
<TextField label={"Name"} variant="outlined" onChange={handleSearchChange} />
<DropdownFilter filters={tagData ?? []} setSelectedFilters={setFilteredTags} prefillText={"Tags"} />
<DropdownFilter filters={categoryData ?? []} setSelectedFilters={setFilteredCategories} prefillText={"Categories"} />
</div>