add react-query

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@mantine/hooks": "^8.3.14",
         "@tabler/icons": "^3.36.1",
         "@tabler/icons-react": "^3.36.1",
+        "@tanstack/react-query": "^5.90.20",
         "capitalize": "^2.0.4",
         "dayjs": "^1.11.19",
         "i18next": "^25.8.4",
@@ -1529,6 +1530,32 @@
         "react": ">= 16"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.20.tgz",
+      "integrity": "sha512-vXBxa+qeyveVO7OA0jX1z+DeyCA4JKnThKv411jd5SORpBKgkcVnYKCiBgECvADvniBX7tobwBmg01qq9JmMJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",

frontend/package.json

@@ -16,6 +16,7 @@
     "@mantine/hooks": "^8.3.14",
     "@tabler/icons": "^3.36.1",
     "@tabler/icons-react": "^3.36.1",
+    "@tanstack/react-query": "^5.90.20",
     "capitalize": "^2.0.4",
     "dayjs": "^1.11.19",
     "i18next": "^25.8.4",

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>
+    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <MantineProvider>
-    </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())
+        ),
+    });
+}