From eb304b177712be2658fc44386f8a7f281017de3d Mon Sep 17 00:00:00 2001 From: gorlemZ Date: Thu, 26 Oct 2023 15:32:51 +0200 Subject: [PATCH] [not compiling] tbd --- .npmrc | 1 + package.json | 1 + pnpm-lock.yaml | 11 ++++ src/api.tsx | 20 ++++++- src/components/RestaurantPreview.tsx | 5 +- src/hooks.tsx | 14 +++-- src/models.tsx | 4 +- src/pages/Home.tsx | 85 ++++++++++++++++------------ 8 files changed, 96 insertions(+), 45 deletions(-) create mode 100644 .npmrc diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..f87a044 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +auto-install-peers=true \ No newline at end of file diff --git a/package.json b/package.json index b0172ec..4e863f5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc7a54f..9ef3e98 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@buildo/bento-design-system': specifier: ^0.20.4 version: 0.20.4(@types/react@18.2.25)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0) + '@buildo/formo': + specifier: ^2.0.2 + version: 2.0.2(react@18.2.0) '@tanstack/react-query': specifier: ^4.36.1 version: 4.36.1(react-dom@18.2.0)(react@18.2.0) @@ -373,6 +376,14 @@ packages: - prop-types dev: false + /@buildo/formo@2.0.2(react@18.2.0): + resolution: {integrity: sha512-BcmPPcmC66cJBHmQNlqwkO6qM+5PqxKQYhGbXjdX4GISRwKSn3k+ciZslqZZjLS+s2+vyMcFZq63IpTdxcO1/Q==} + peerDependencies: + react: ^17.0.1 + dependencies: + react: 18.2.0 + dev: false + /@datepicker-react/hooks@2.8.4(react@18.2.0): resolution: {integrity: sha512-qaYJKK5sOSdqcL/OnCtyv3/Q6fRRljfeAyl5ISTPgEO0CM5xZzkGmTx40+6wvqjH5lEZH4ysS95nPyLwZS2tlw==} peerDependencies: diff --git a/src/api.tsx b/src/api.tsx index 339c6b4..4fabd69 100644 --- a/src/api.tsx +++ b/src/api.tsx @@ -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) { diff --git a/src/components/RestaurantPreview.tsx b/src/components/RestaurantPreview.tsx index c6fa5b9..29eedab 100644 --- a/src/components/RestaurantPreview.tsx +++ b/src/components/RestaurantPreview.tsx @@ -22,7 +22,10 @@ function RestaurantPreview(props: PreviewProp) { return ( - + {props.name} {props.address} diff --git a/src/hooks.tsx b/src/hooks.tsx index b2f9a13..f41a449 100644 --- a/src/hooks.tsx +++ b/src/hooks.tsx @@ -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 => { + const prom: JSON = await getRestaurantList(); return fromJsonToProp(prom); }, - }); + { disabled: true } + ); } export default useGetRestaurantList; diff --git a/src/models.tsx b/src/models.tsx index db20013..4730ca7 100644 --- a/src/models.tsx +++ b/src/models.tsx @@ -29,6 +29,8 @@ export const previewList = z.object({ export type PreviewList = z.infer; export const filterParams = z.object({ - range: z.number(), + prices: z.array(z.boolean()), + location: z.string(), + radius: z.number(), }); export type FiltersParams = z.infer; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 471ccfc..178a9b7 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -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 ; @@ -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 ; @@ -71,25 +80,31 @@ function Home() { > - + {/* price filters */} + - fieldProps("location").onChange(e)} /> - + {/* range filters */} + {/* - + */}