Skip to content

Commit

Permalink
[not compiling] tbd
Browse files Browse the repository at this point in the history
  • Loading branch information
GorlemZ committed Oct 26, 2023
1 parent b8d4b04 commit eb304b1
Show file tree
Hide file tree
Showing 8 changed files with 96 additions and 45 deletions.
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
auto-install-peers=true
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"@buildo/bento-design-system": "^0.20.4",
"@buildo/formo": "^2.0.2",
"@tanstack/react-query": "^4.36.1",
"i18next": "^23.5.1",
"react": "^18.2.0",
Expand Down
11 changes: 11 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 18 additions & 2 deletions src/api.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,24 @@ import { apiSecret } from "./models";

const apiKey = import.meta.env.VITE_API_KEY;

export const getRestaurantList = async (range: number) => {
const uri = `/api/search?sort_by=best_match&limit=${range}&location=Milano`;
export const getRestaurantList = async ({
prices,
location,
radius,
}: {
prices: boolean[];
location: string;
radius: number;
}) => {
const priceParamsString: string = prices
.map((price, index) => {
if (price) {
return `price=${index + 1}`;
}
})
.filter((price) => price !== "")
.join("&");
const uri = `/api/search?sort_by=best_match&location=${location}&radius=${radius}&${priceParamsString}`;
const apik = apiSecret.safeParse(apiKey);

if (apik.success) {
Expand Down
5 changes: 4 additions & 1 deletion src/components/RestaurantPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ function RestaurantPreview(props: PreviewProp) {
return (
<Card elevation="small" borderRadius={8} padding={16} paddingTop={24}>
<Stack space={8} align={"center"}>
<img src={imagePrev} width="70%" height="100%" />
<img
src={imagePrev}
style={{ height: "200px", width: "100%", objectFit: "scale-down" }}
/>
<Title size="medium">{props.name}</Title>
<Body size="medium">
{props.address}
Expand Down
14 changes: 8 additions & 6 deletions src/hooks.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { useQuery } from "@tanstack/react-query";
import { getRestaurantList } from "./api";
import { fromJsonToProp } from "./utils";
import { PreviewList } from "./models";

function useGetRestaurantList(range: number) {
return useQuery({
queryKey: ["retrieve-list", range],
queryFn: async () => {
const prom: JSON = await getRestaurantList(range);
function useGetRestaurantList() {
return useQuery(
["restaurantList"],
async (): Promise<PreviewList> => {
const prom: JSON = await getRestaurantList();
return fromJsonToProp(prom);
},
});
{ disabled: true }
);
}

export default useGetRestaurantList;
4 changes: 3 additions & 1 deletion src/models.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export const previewList = z.object({
export type PreviewList = z.infer<typeof previewList>;

export const filterParams = z.object({
range: z.number(),
prices: z.array(z.boolean()),
location: z.string(),
radius: z.number(),
});
export type FiltersParams = z.infer<typeof filterParams>;
85 changes: 50 additions & 35 deletions src/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,33 @@ import {
AreaLoader,
Inset,
Tiles,
TextField,
} from "@buildo/bento-design-system";
import useGetRestaurantList from "../hooks";
import RestaurantPreview from "../components/RestaurantPreview";
import PriceFilter from "../components/PriceFilter";
import LocationFilter from "../components/LocationFilter";
import RangeDistanceFilter from "../components/RangeDistanceFilter";
import { useTranslation } from "react-i18next";
import React from "react";
import useGetRestaurantList from "../hooks";
import { validators, useFormo, success } from "@buildo/formo";

function Home() {
const { t } = useTranslation();
const { isLoading, isError, data } = useGetRestaurantList(10);

const { fieldProps, handleSubmit } = useFormo(
{
initialValues: {
prices: [true, true, true, true],
location: "Milan",
radius: 0,
},
fieldValidators: () => ({
location: validators.minLength(2, "City name is too short"),
}),
},
{
onSubmit: async (values) => success(values),
}
);

const { isLoading, isError, data } = useGetRestaurantList(filtersParams);

if (isLoading) {
return <AreaLoader message="Loading..."></AreaLoader>;
Expand All @@ -36,29 +51,23 @@ function Home() {
);
}

const [filters, setFilters] = React.useState({
prices: [false, false, false, false],
location: "",
range: 0,
});

const setPricesFilter = (prices: boolean[]) =>
setFilters({
...filters,
prices,
});
// const setPricesFilter = (prices: boolean[]) =>
// setFilters({
// ...filters,
// prices,
// });

const setRangeFilter = (range: number) =>
setFilters({
...filters,
range,
});
// const setRangeFilter = (radius: number) =>
// setFilters({
// ...filters,
// radius,
// });

const setLocationFilter = (location: string) =>
setFilters({
...filters,
location,
});
// const setLocationFilter = (location: string) =>
// setFilters({
// ...filters,
// location,
// });

const cards = data?.businesses.map((element) => {
return <RestaurantPreview key={"home-" + element.alias} {...element} />;
Expand All @@ -71,25 +80,31 @@ function Home() {
>
<Box height="full" padding={24}>
<Stack space={16} align="left">
<PriceFilter price={filters.prices} setPrice={setPricesFilter} />
{/* price filters */}

<Divider />
<LocationFilter
location={filters.location}
setLocation={setLocationFilter}
{/* location filters */}
<TextField
name="name"
label={t("Location.Label")}
placeholder={t("Location.Placeholder")}
value={fieldProps("location").value}
onChange={(e) => fieldProps("location").onChange(e)}
/>
<Divider />
<Box width="full">
{/* range filters */}
{/* <Box width="full">
<RangeDistanceFilter
distance={filters.range}
distance={filters.radius}
setDistance={setRangeFilter}
/>
</Box>
</Box> */}
<Divider />
<Button
kind="solid"
hierarchy="primary"
label={t("SearchButton")}
onPress={() => window.alert("" + filters.location)}
onPress={handleSubmit}
/>
</Stack>
</Box>
Expand Down

0 comments on commit eb304b1

Please sign in to comment.