fix fetching on submit

GorlemZ · federico-ercoles · commit 25b64b41f5e4 · 2023-10-27T10:53:19.000+02:00
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=true
diff --git 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
diff --git 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}000&${priceParamsString}`;
   const apik = apiSecret.safeParse(apiKey);
 
   if (apik.success) {
diff --git a/src/components/RestaurantPreview.tsx b/src/components/RestaurantPreview.tsx
@@ -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}
diff --git a/src/hooks.tsx b/src/hooks.tsx
@@ -1,15 +1,21 @@
 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(filtersParams: {
+  prices: boolean[];
+  location: string;
+  radius: number;
+}) {
+  return useQuery(
+    ["restaurantList"],
+    async (): Promise<PreviewList> => {
+      const prom: JSON = await getRestaurantList(filtersParams);
       return fromJsonToProp(prom);
     },
-  });
+    { enabled: false }
+  );
 }
 
 export default useGetRestaurantList;
diff --git a/src/models.tsx b/src/models.tsx
@@ -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>;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -8,18 +8,43 @@ import {
   AreaLoader,
   Inset,
   Tiles,
+  TextField,
+  SliderField,
 } 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";
+import { useEffect } from "react";
 
 function Home() {
   const { t } = useTranslation();
-  const { isLoading, isError, data } = useGetRestaurantList(10);
+  const initialValues = {
+    prices: [true, true, true, true],
+    location: "Milan",
+    radius: 0,
+  };
+
+  const { fieldProps, handleSubmit, values } = useFormo(
+    {
+      initialValues,
+      fieldValidators: () => ({
+        location: validators.minLength(2, "City name is too short"),
+      }),
+    },
+    {
+      onSubmit: async (values) => {
+        refetch();
+        return success(values);
+      },
+    }
+  );
+
+  useEffect(() => {
+    refetch();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const { isLoading, isError, data, refetch } = useGetRestaurantList(values);
 
   if (isLoading) {
     return <AreaLoader message="Loading..."></AreaLoader>;
@@ -36,30 +61,6 @@ function Home() {
     );
   }
 
-  const [filters, setFilters] = React.useState({
-    prices: [false, false, false, false],
-    location: "",
-    range: 0,
-  });
-
-  const setPricesFilter = (prices: boolean[]) =>
-    setFilters({
-      ...filters,
-      prices,
-    });
-
-  const setRangeFilter = (range: number) =>
-    setFilters({
-      ...filters,
-      range,
-    });
-
-  const setLocationFilter = (location: string) =>
-    setFilters({
-      ...filters,
-      location,
-    });
-
   const cards = data?.businesses.map((element) => {
     return <RestaurantPreview key={"home-" + element.alias} {...element} />;
   });
@@ -71,25 +72,33 @@ 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
+            {...fieldProps("location")}
+            label={t("Location.Label")}
+            placeholder={t("Location.Placeholder")}
           />
           <Divider />
+          {/* range filters */}
           <Box width="full">
-            <RangeDistanceFilter
-              distance={filters.range}
-              setDistance={setRangeFilter}
+            <SliderField
+              type="single"
+              label={t("RangeDistance.Label")}
+              minValue={0}
+              maxValue={10}
+              step={1}
+              {...fieldProps("radius")}
             />
           </Box>
           <Divider />
           <Button
             kind="solid"
             hierarchy="primary"
             label={t("SearchButton")}
-            onPress={() => window.alert("" + filters.location)}
+            onPress={handleSubmit}
           />
         </Stack>
       </Box>
