elt/osago: remove react-query

apps/web/Components/Calculation/Form/ELT/Osago.tsx

@@ -9,75 +9,51 @@ import helper from '@/process/elt/lib/helper';
 import { useStore } from '@/stores/hooks';
 import { defaultRow } from '@/stores/tables/elt/default-values';
 import { useApolloClient } from '@apollo/client';
-import type { QueryFunctionContext } from '@tanstack/react-query';
-import { useQueries } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
+import { omit, sift } from 'radash';
+import { useCallback } from 'react';
 import { Flex } from 'ui/grid';
 
 const storeSelector: StoreSelector = ({ osago }) => osago;
 
 const initialData = {
-  ...defaultRow,
+  ...omit(defaultRow, ['name', 'key', 'id']),
   error: null,
   premiumSum: 0,
-  sum: 0,
 };
 
 export const Osago = observer(() => {
   const store = useStore();
   const { $tables } = store;
-
   const apolloClient = useApolloClient();
-
   const { init } = helper({ apolloClient, store });
 
-  const queries = useQueries({
-    queries: $tables.elt.osago.getRows.map((row) => {
-      const { id, key, name } = row;
+  const handleOnClick = useCallback(async () => {
+    $tables.elt.osago.abortController?.abort();
+    $tables.elt.osago.abortController = new AbortController();
 
-      return {
-        enabled: false,
-        initialData: { ...initialData, id, key, name },
-        queryFn: async (context: QueryFunctionContext) => {
-          const payload = await makeEltOsagoRequest({ apolloClient, store }, row);
-          const res = await getEltOsago(payload, context);
-
-          if (res) {
-            const companyRes = res?.[id];
-
-            return { ...companyRes, id, key, name };
-          }
-
-          return { ...initialData, id, key, name };
-        },
-        queryKey: ['elt', 'osago', id],
-        refetchOnWindowFocus: false,
-        retry: false,
-      };
-    }),
-  });
-
-  async function handleOnClick() {
     const { osago } = await init();
     $tables.elt.osago.setRows(osago);
-
-    const osagoCompanyIds = $tables.insurance
-      .row('osago')
-      .getOptions('insuranceCompany')
-      .map((x) => x.value);
-
-    queries
-      .filter(({ data }) => data?.key && osagoCompanyIds.includes(data?.key))
-      .forEach(({ refetch, data, remove }) => {
-        remove();
-        if (data?.key) $tables.elt.osago.setRow({ key: data?.key, status: 'fetching' });
-
-        refetch()
+    const osagoCompanyIds = sift(
+      $tables.insurance
+        .row('osago')
+        .getOptions('insuranceCompany')
+        .map((x) => x.value)
+    );
+    osagoCompanyIds.forEach((key) => {
+      const row = $tables.elt.osago.getRow(key);
+      if (row) {
+        row.status = 'fetching';
+        $tables.elt.osago.setRow(row);
+        makeEltOsagoRequest({ apolloClient, store }, row)
+          .then((payload) =>
+            getEltOsago(payload, { signal: $tables.elt.osago.abortController.signal })
+          )
           .then((res) => {
-            if (res.data) {
-              const { key, numCalc, premiumSum = 0, message, skCalcId } = res.data;
-              let { error } = res.data;
-
+            if (res) {
+              const companyRes = res?.[row.id];
+              const { numCalc, premiumSum = 0, message, skCalcId } = companyRes;
+              let { error } = companyRes;
               if (premiumSum > MAX_INSURANCE) {
                 error ||= `Сумма по страховке превышает максимально допустимое значение по стоимости ОСАГО: ${Intl.NumberFormat(
                   'ru',
@@ -87,7 +63,6 @@ export const Osago = observer(() => {
                   }
                 ).format(MAX_INSURANCE)}`;
               }
-
               if (premiumSum < MIN_INSURANCE) {
                 error ||= `Сумма по страховке не должна быть меньше допустимого значения по стоимости ОСАГО: ${Intl.NumberFormat(
                   'ru',
@@ -97,7 +72,6 @@ export const Osago = observer(() => {
                   }
                 ).format(MIN_INSURANCE)}`;
               }
-
               $tables.elt.osago.setRow({
                 key,
                 message: error || message,
@@ -109,16 +83,16 @@ export const Osago = observer(() => {
             }
           })
           .catch((error) => {
-            if (data?.key)
-              $tables.elt.osago.setRow({
-                ...defaultRow,
-                key: data?.key,
-                message: error,
-                status: 'error',
-              });
+            $tables.elt.osago.setRow({
+              ...initialData,
+              key,
+              message: error,
+              status: 'error',
+            });
           });
-      });
-  }
+      }
+    });
+  }, [$tables.elt.osago, $tables.insurance, apolloClient, init, store]);
 
   function handleOnSelectRow(row: Row) {
     $tables.insurance.row('osago').column('insuranceCompany').setValue(row.key);
@@ -133,14 +107,12 @@ export const Osago = observer(() => {
         title: 'Страховая компания ОСАГО',
       };
     }
-
     if (column.key === 'status') {
       return {
         ...column,
         title: <ReloadButton storeSelector={storeSelector} onClick={() => handleOnClick()} />,
       };
     }
-
     if (column.key === 'totalFranchise') {
       return {
         ...column,

apps/web/process/elt/reactions/common.ts

@@ -47,6 +47,8 @@ export default function reactions(context: ProcessContext) {
       if (initialValues) {
         $tables.elt.osago.setRows(initialValues.osago);
       }
+
+      $tables.elt.osago.abortController?.abort();
     },
     {
       delay: 10,