add react-query

frontend/src/components/ShipmentCard/index.tsx

@@ -1,5 +1,5 @@
 import { Group, NumberInput, Paper, Stack, Text } from "@mantine/core";
-import { useCallback, useState, type RefAttributes } from "react";
+import { useCallback, useState } from "react";
 
 type Product = {
     name: string;
@@ -17,7 +17,6 @@ export type ShipmentCardProps = {
 export default function ShipmentCard({title, date, product}: ShipmentCardProps) {
     
     const [ price, setPrice ] = useState<number>(0)
-
     const calculatePrice = useCallback((value: number | string ) => {
         const numberValue = Number(value)
         const price = numberValue * product.price

frontend/src/main.tsx

@@ -4,11 +4,16 @@ import { RouterProvider } from "react-router";
 import { router } from "./router.tsx";
 import { MantineProvider } from "@mantine/core";
 import '@mantine/core/styles.css';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient()
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <MantineProvider>
-      <RouterProvider router={router} />
-    </MantineProvider>
+    <QueryClientProvider client={queryClient}>
+      <MantineProvider>
+        <RouterProvider router={router} />
+      </MantineProvider>
+    </QueryClientProvider>
   </StrictMode>
 );

frontend/src/pages/ContractForm/index.tsx

@@ -2,8 +2,11 @@ import { Flex, Grid, Select, Stack, Text, TextInput, Title } from "@mantine/core
 import { t } from "../../config/i18n";
 import { IconUser } from "@tabler/icons-react";
 import ShipmentCard from "../../components/ShipmentCard";
+import { getForm } from "../../services/api";
 
 export function ContractForm() {
+    const { isPending, error, data } = getForm(1);
+    console.log(isPending, error, data);
     return (
         <Flex
             w={{base: "100%", sm: "50%", lg: "60%"}}
@@ -50,11 +53,13 @@ export function ContractForm() {
             </Stack>
             <Stack>
                 <Text>{t("products reccurent phase")}</Text>
+                {isPending ||
                 <Select
                     label={`${t("select reccurent product")} (${t("this product will be distributed for all shipments")})`}
                     placeholder={t("select reccurent product")}
-                    data={["qwe", "qweqwe", "qweqweqwe"]}
+                    data={data?.productor?.products.map(el=> el.name)}
                 />
+                }
             </Stack>
             <Stack>
                 <Text>{t("products planned phase")}</Text>

frontend/src/services/api.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+
+export function getForm(id: number) {
+    return useQuery({
+        queryKey: ['form'],
+        queryFn: () => (
+            fetch(`http://localhost:8000/forms/${id}`).then((res) => res.json())
+        ),
+    });
+}