Skip to content

Commit eb304b1

Browse files
GorlemZGorlemZ
committed
[not compiling] tbd
1 parent b8d4b04 commit eb304b1

File tree

8 files changed

+96
-45
lines changed

8 files changed

+96
-45
lines changed

Diff for: ‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
auto-install-peers=true

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@buildo/bento-design-system": "^0.20.4",
14+
"@buildo/formo": "^2.0.2",
1415
"@tanstack/react-query": "^4.36.1",
1516
"i18next": "^23.5.1",
1617
"react": "^18.2.0",

Diff for: ‎pnpm-lock.yaml

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/api.tsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,24 @@ import { apiSecret } from "./models";
22

33
const apiKey = import.meta.env.VITE_API_KEY;
44

5-
export const getRestaurantList = async (range: number) => {
6-
const uri = `/api/search?sort_by=best_match&limit=${range}&location=Milano`;
5+
export const getRestaurantList = async ({
6+
prices,
7+
location,
8+
radius,
9+
}: {
10+
prices: boolean[];
11+
location: string;
12+
radius: number;
13+
}) => {
14+
const priceParamsString: string = prices
15+
.map((price, index) => {
16+
if (price) {
17+
return `price=${index + 1}`;
18+
}
19+
})
20+
.filter((price) => price !== "")
21+
.join("&");
22+
const uri = `/api/search?sort_by=best_match&location=${location}&radius=${radius}&${priceParamsString}`;
723
const apik = apiSecret.safeParse(apiKey);
824

925
if (apik.success) {

Diff for: ‎src/components/RestaurantPreview.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ function RestaurantPreview(props: PreviewProp) {
2222
return (
2323
<Card elevation="small" borderRadius={8} padding={16} paddingTop={24}>
2424
<Stack space={8} align={"center"}>
25-
<img src={imagePrev} width="70%" height="100%" />
25+
<img
26+
src={imagePrev}
27+
style={{ height: "200px", width: "100%", objectFit: "scale-down" }}
28+
/>
2629
<Title size="medium">{props.name}</Title>
2730
<Body size="medium">
2831
{props.address}

Diff for: ‎src/hooks.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { useQuery } from "@tanstack/react-query";
22
import { getRestaurantList } from "./api";
33
import { fromJsonToProp } from "./utils";
4+
import { PreviewList } from "./models";
45

5-
function useGetRestaurantList(range: number) {
6-
return useQuery({
7-
queryKey: ["retrieve-list", range],
8-
queryFn: async () => {
9-
const prom: JSON = await getRestaurantList(range);
6+
function useGetRestaurantList() {
7+
return useQuery(
8+
["restaurantList"],
9+
async (): Promise<PreviewList> => {
10+
const prom: JSON = await getRestaurantList();
1011
return fromJsonToProp(prom);
1112
},
12-
});
13+
{ disabled: true }
14+
);
1315
}
1416

1517
export default useGetRestaurantList;

Diff for: ‎src/models.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export const previewList = z.object({
2929
export type PreviewList = z.infer<typeof previewList>;
3030

3131
export const filterParams = z.object({
32-
range: z.number(),
32+
prices: z.array(z.boolean()),
33+
location: z.string(),
34+
radius: z.number(),
3335
});
3436
export type FiltersParams = z.infer<typeof filterParams>;

Diff for: ‎src/pages/Home.tsx

+50-35
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,33 @@ import {
88
AreaLoader,
99
Inset,
1010
Tiles,
11+
TextField,
1112
} from "@buildo/bento-design-system";
13+
import useGetRestaurantList from "../hooks";
1214
import RestaurantPreview from "../components/RestaurantPreview";
13-
import PriceFilter from "../components/PriceFilter";
14-
import LocationFilter from "../components/LocationFilter";
15-
import RangeDistanceFilter from "../components/RangeDistanceFilter";
1615
import { useTranslation } from "react-i18next";
17-
import React from "react";
18-
import useGetRestaurantList from "../hooks";
16+
import { validators, useFormo, success } from "@buildo/formo";
1917

2018
function Home() {
2119
const { t } = useTranslation();
22-
const { isLoading, isError, data } = useGetRestaurantList(10);
20+
21+
const { fieldProps, handleSubmit } = useFormo(
22+
{
23+
initialValues: {
24+
prices: [true, true, true, true],
25+
location: "Milan",
26+
radius: 0,
27+
},
28+
fieldValidators: () => ({
29+
location: validators.minLength(2, "City name is too short"),
30+
}),
31+
},
32+
{
33+
onSubmit: async (values) => success(values),
34+
}
35+
);
36+
37+
const { isLoading, isError, data } = useGetRestaurantList(filtersParams);
2338

2439
if (isLoading) {
2540
return <AreaLoader message="Loading..."></AreaLoader>;
@@ -36,29 +51,23 @@ function Home() {
3651
);
3752
}
3853

39-
const [filters, setFilters] = React.useState({
40-
prices: [false, false, false, false],
41-
location: "",
42-
range: 0,
43-
});
44-
45-
const setPricesFilter = (prices: boolean[]) =>
46-
setFilters({
47-
...filters,
48-
prices,
49-
});
54+
// const setPricesFilter = (prices: boolean[]) =>
55+
// setFilters({
56+
// ...filters,
57+
// prices,
58+
// });
5059

51-
const setRangeFilter = (range: number) =>
52-
setFilters({
53-
...filters,
54-
range,
55-
});
60+
// const setRangeFilter = (radius: number) =>
61+
// setFilters({
62+
// ...filters,
63+
// radius,
64+
// });
5665

57-
const setLocationFilter = (location: string) =>
58-
setFilters({
59-
...filters,
60-
location,
61-
});
66+
// const setLocationFilter = (location: string) =>
67+
// setFilters({
68+
// ...filters,
69+
// location,
70+
// });
6271

6372
const cards = data?.businesses.map((element) => {
6473
return <RestaurantPreview key={"home-" + element.alias} {...element} />;
@@ -71,25 +80,31 @@ function Home() {
7180
>
7281
<Box height="full" padding={24}>
7382
<Stack space={16} align="left">
74-
<PriceFilter price={filters.prices} setPrice={setPricesFilter} />
83+
{/* price filters */}
84+
7585
<Divider />
76-
<LocationFilter
77-
location={filters.location}
78-
setLocation={setLocationFilter}
86+
{/* location filters */}
87+
<TextField
88+
name="name"
89+
label={t("Location.Label")}
90+
placeholder={t("Location.Placeholder")}
91+
value={fieldProps("location").value}
92+
onChange={(e) => fieldProps("location").onChange(e)}
7993
/>
8094
<Divider />
81-
<Box width="full">
95+
{/* range filters */}
96+
{/* <Box width="full">
8297
<RangeDistanceFilter
83-
distance={filters.range}
98+
distance={filters.radius}
8499
setDistance={setRangeFilter}
85100
/>
86-
</Box>
101+
</Box> */}
87102
<Divider />
88103
<Button
89104
kind="solid"
90105
hierarchy="primary"
91106
label={t("SearchButton")}
92-
onPress={() => window.alert("" + filters.location)}
107+
onPress={handleSubmit}
93108
/>
94109
</Stack>
95110
</Box>

0 commit comments

Comments
 (0)