buildo · GorlemZ · Oct 2, 2023 · Oct 19, 2023 · Oct 2, 2023 · Oct 3, 2023
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/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import { BentoProvider, Headline, Inset } from "@buildo/bento-design-system";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import Home from "./pages/Home";
+import RestaurantDetail from "./pages/RestaurantDetail";
 
 function App() {
   const { t } = useTranslation();
@@ -19,8 +20,8 @@ function App() {
           </Headline>
         </Inset>
         <Routes>
-          <Route path="/" element={<Home />} />
-          {/* <Route path="/" element={<Restaurant />} /> */}
+          <Route path="/home" element={<Home />} />
+          <Route path="/restaurat-detail/:id" element={<RestaurantDetail />} />
         </Routes>
       </BrowserRouter>
     </BentoProvider>

diff --git a/src/api.tsx b/src/api.tsx
@@ -2,8 +2,40 @@ 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: string[];
+  location: string;
+  radius: number;
+}) => {
+  const priceParamsString: string = prices.join("&");
+  const radiusParamsString: string =
+    radius == 0 ? "900" : radius.toString() + "000";
+  const uri = `/api/search?sort_by=best_match&location=${location}&radius=${radiusParamsString}&${priceParamsString}`;
+  console.log(uri);
+  const apik = apiSecret.safeParse(apiKey);
+
+  if (apik.success) {
+    return (
+      await fetch(uri, {
+        method: "get",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + apiKey,
+        },
+      })
+    ).json();
+  } else {
+    throw apik.error;
+  }
+};
+
+export const getRestaurantDetails = async (id: string) => {
+  const uri = `/api/${id}`;
   const apik = apiSecret.safeParse(apiKey);
 
   if (apik.success) {

diff --git a/src/components/RestaurantPreview.tsx b/src/components/RestaurantPreview.tsx
@@ -4,33 +4,44 @@ import {
   Title,
   Body,
   Label,
-  Box,
+  Button,
 } from "@buildo/bento-design-system";
 import { useTranslation } from "react-i18next";
-import { PreviewProp } from "../models";
+import { useNavigate } from "react-router-dom";
+import { PreviewPropComponent } from "../models";
 
-function RestaurantPreview(props: PreviewProp) {
+function RestaurantPreview(props: PreviewPropComponent) {
   const { t } = useTranslation();
-  const rating = props.rating;
+  const rating = props.vars.rating;
   const imagePrev =
-    props.imageUrl === ""
+    props.vars.imageUrl === ""
       ? "https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Barbieri_-_ViaSophia25668.jpg/1200px-Barbieri_-_ViaSophia25668.jpg"
-      : props.imageUrl;
+      : props.vars.imageUrl;
 
+  const navigate = useNavigate();
   return (
-    <Card elevation="small" borderRadius={8} paddingX={24} paddingY={40}>
-      <Stack space={8}>
-        <Box height="full" justifyContent="center" alignItems="center">
-          <img src={imagePrev} width="70%" height="100px" />
-        </Box>
+    <Card elevation="small" borderRadius={8} padding={16} paddingTop={24}>
+      <Stack space={8} align="center">
+        <img
+          src={imagePrev}
+          style={{ height: "200px", width: "100%", objectFit: "scale-down" }}
+        />
+        <Title size="medium">{props.vars.name}</Title>
+        <Body size="medium">
+          {props.vars.address}
 
-        <Title size="small">{props.name}</Title>
-        <Body size="small">
-          {props.address}
           <Label size="small" color="default">
             {t("Card.Rating", { rating })}
           </Label>
         </Body>
+        <Button
+          onPress={() => {
+            return navigate(`/restaurat-detail/${props.vars.id}`);
+          }}
+          kind="transparent"
+          label={t("Card.ButtonLabel")}
+          hierarchy="primary"
+        ></Button>
       </Stack>
     </Card>
   );

diff --git a/src/hooks.tsx b/src/hooks.tsx
@@ -1,15 +1,34 @@
 import { useQuery } from "@tanstack/react-query";
-import { getRestaurantList } from "./api";
-import { fromJsonToProp } from "./utils";
+import { getRestaurantList, getRestaurantDetails } from "./api";
+import { fromJsonToPropPreview, fromJsonToPropDetails } from "./utils";
+import { PreviewList, DetailsPropApi } from "./models";
 
-function useGetRestaurantList(range: number) {
-  return useQuery({
-    queryKey: ["retrieve-list", range],
-    queryFn: async () => {
-      const prom: JSON = await getRestaurantList(range);
-      return fromJsonToProp(prom);
+export function useGetRestaurantList(filtersParams: {
+  prices: string[];
+  location: string;
+  radius: number;
+}) {
+  return useQuery(
+    [
+      "restaurantList",
+      filtersParams.location.toString,
+      filtersParams.radius.toString,
+      filtersParams.prices.toString,
+    ],
+    async (): Promise<PreviewList> => {
+      const prom: JSON = await getRestaurantList(filtersParams);
+      return fromJsonToPropPreview(prom);
     },
-  });
+    { enabled: false }
+  );
 }
 
-export default useGetRestaurantList;
+export function useGetRestaurantDetails(id: string) {
+  return useQuery(
+    ["restaurantDetails", id],
+    async (): Promise<DetailsPropApi> => {
+      const prom: JSON = await getRestaurantDetails(id);
+      return fromJsonToPropDetails(prom);
+    }
+  );
+}
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1,6 +1,17 @@
 {
     "title": "YelpLike",
     "Card": {
-      "Rating": "Rating: {{rating}} ★"
-    }
+      "Rating": "Rating: {{rating}} ⭐",
+      "ButtonLabel":"See details"
+    },
+    "priceRangefilter":"Average price : ",
+    "Location":{
+      "Placeholder":"Type here your location ... ",
+      "Label": "Location :"
+    },
+    "RangeDistance":{
+      "Label":"Distance :"
+    },
+    "SearchButton": "Search"
+
   }
diff --git a/src/mock-data/rest_detail.json b/src/mock-data/rest_detail.json