elt/osago: remove react-query

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

@@ -9,15 +9,15 @@ 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 = ({ kasko }) => kasko;
 
 const initialData = {
-  ...defaultRow,
+  ...omit(defaultRow, ['name', 'key', 'id']),
   error: null,
   kaskoSum: 0,
   paymentPeriods: [
@@ -25,72 +25,48 @@ const initialData = {
       kaskoSum: 0,
     },
   ],
-  sum: 0,
 };
 
 export const Kasko = observer(() => {
   const store = useStore();
   const { $tables, $calculation } = store;
-
   const apolloClient = useApolloClient();
-
   const { init } = helper({ apolloClient, store });
 
-  const queries = useQueries({
+  const handleOnClick = useCallback(async () => {
-    queries: $tables.elt.kasko.getRows.map((row) => {
+    $tables.elt.kasko.abortController?.abort();
-      const { id, key, name } = row;
+    $tables.elt.kasko.abortController = new AbortController();
 
-      return {
-        enabled: false,
-        initialData: { ...initialData, id, key, name },
-        queryFn: async (context: QueryFunctionContext) => {
-          const payload = await makeEltKaskoRequest({ apolloClient, store }, row);
-          const res = await getEltKasko(payload, context);
-
-          if (res) {
-            const companyRes = res?.[id];
-
-            return { ...companyRes, id, key, name };
-          }
-
-          return { ...initialData, id, key, name };
-        },
-        queryKey: ['elt', 'kasko', id],
-        refetchOnWindowFocus: false,
-        retry: false,
-      };
-    }),
-  });
-
-  async function handleOnClick() {
     const { kasko } = await init();
     $tables.elt.kasko.setRows(kasko);
-
+    const kaskoCompanyIds = sift(
-    const kaskoCompanyIds = $tables.insurance
+      $tables.insurance
         .row('kasko')
         .getOptions('insuranceCompany')
-      .map((x) => x.value);
+        .map((x) => x.value)
+    );
     const values = $calculation.$values.getValues();
 
-    queries
+    kaskoCompanyIds.forEach((key) => {
-      .filter(({ data }) => data?.key && kaskoCompanyIds.includes(data.key))
+      const row = $tables.elt.kasko.getRow(key);
-      .forEach(({ refetch, data, remove }) => {
+      if (row) {
-        remove();
+        $tables.elt.kasko.setRow({ key, status: 'fetching' });
-        if (data?.key) $tables.elt.kasko.setRow({ key: data?.key, status: 'fetching' });
+        makeEltKaskoRequest({ apolloClient, store }, row)
-
+          .then((payload) =>
-        refetch()
+            getEltKasko(payload, { signal: $tables.elt.kasko.abortController?.signal })
+          )
           .then((res) => {
-            if (res.data) {
+            if (res) {
+              const companyRes = res?.[row.id];
               const {
-                key,
                 kaskoSum = 0,
                 message,
                 skCalcId,
                 totalFranchise = 0,
                 requestId,
                 paymentPeriods,
-              } = res.data;
+              } = companyRes;
-              let { error } = res.data;
+              let { error } = companyRes;
 
               if (totalFranchise > MAX_FRANCHISE) {
                 error ||= `Франшиза по страховке превышает максимально допустимое значение: ${Intl.NumberFormat(
@@ -129,22 +105,22 @@ export const Kasko = observer(() => {
                 requestId,
                 skCalcId,
                 status: error ? 'error' : null,
-                sum: values.leasingPeriod <= 16 ? kaskoSum : paymentPeriods?.at(0)?.kaskoSum || 0,
+                sum: values.leasingPeriod <= 16 ? kaskoSum : paymentPeriods?.[0]?.kaskoSum || 0,
                 totalFranchise,
               });
             }
           })
           .catch((error) => {
-            if (data?.key)
             $tables.elt.kasko.setRow({
-                ...defaultRow,
+              ...initialData,
-                key: data?.key,
+              key,
               message: error,
               status: 'error',
             });
           });
-      });
       }
+    });
+  }, [$calculation.$values, $tables.elt.kasko, $tables.insurance, apolloClient, init, store]);
 
   function handleOnSelectRow(row: Row) {
     $tables.insurance.row('kasko').column('insuranceCompany').setValue(row.key);

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({
+  const handleOnClick = useCallback(async () => {
-    queries: $tables.elt.osago.getRows.map((row) => {
+    $tables.elt.osago.abortController?.abort();
-      const { id, key, name } = row;
+    $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 = sift(
-    const osagoCompanyIds = $tables.insurance
+      $tables.insurance
         .row('osago')
         .getOptions('insuranceCompany')
-      .map((x) => x.value);
+        .map((x) => x.value)
-
+    );
-    queries
+    osagoCompanyIds.forEach((key) => {
-      .filter(({ data }) => data?.key && osagoCompanyIds.includes(data?.key))
+      const row = $tables.elt.osago.getRow(key);
-      .forEach(({ refetch, data, remove }) => {
+      if (row) {
-        remove();
+        row.status = 'fetching';
-        if (data?.key) $tables.elt.osago.setRow({ key: data?.key, status: 'fetching' });
+        $tables.elt.osago.setRow(row);
-
+        makeEltOsagoRequest({ apolloClient, store }, row)
-        refetch()
+          .then((payload) =>
+            getEltOsago(payload, { signal: $tables.elt.osago.abortController.signal })
+          )
           .then((res) => {
-            if (res.data) {
+            if (res) {
-              const { key, numCalc, premiumSum = 0, message, skCalcId } = res.data;
+              const companyRes = res?.[row.id];
-              let { error } = res.data;
+              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,
+              ...initialData,
-                key: data?.key,
+              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/api/elt/query.ts

@@ -2,12 +2,14 @@ import type * as ELT from './types';
 import getUrls from '@/config/urls';
 import { TIMEOUT } from '@/constants/request';
 import { withHandleError } from '@/utils/axios';
-import type { QueryFunctionContext } from '@tanstack/react-query';
 import axios from 'axios';
 
 const { URL_ELT_KASKO, URL_ELT_OSAGO } = getUrls();
 
-export async function getEltOsago(payload: ELT.RequestEltOsago, { signal }: QueryFunctionContext) {
+export async function getEltOsago(
+  payload: ELT.RequestEltOsago,
+  { signal }: { signal: AbortSignal }
+) {
   return withHandleError(
     axios
       .post<ELT.ResponseEltOsago>(URL_ELT_OSAGO, payload, { signal, timeout: TIMEOUT })
@@ -15,7 +17,10 @@ export async function getEltOsago(payload: ELT.RequestEltOsago, { signal }: Quer
   );
 }
 
-export async function getEltKasko(payload: ELT.RequestEltKasko, { signal }: QueryFunctionContext) {
+export async function getEltKasko(
+  payload: ELT.RequestEltKasko,
+  { signal }: { signal: AbortSignal }
+) {
   return withHandleError(
     axios
       .post<ELT.ResponseEltKasko>(URL_ELT_KASKO, payload, { signal, timeout: TIMEOUT })

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,
@@ -100,6 +102,8 @@ export default function reactions(context: ProcessContext) {
       if (initialValues) {
         $tables.elt.kasko.setRows(initialValues.kasko);
       }
+
+      $tables.elt.kasko.abortController?.abort();
     },
     {
       delay: 10,

apps/web/stores/tables/elt/policy.ts

@@ -17,6 +17,8 @@ export default class PolicyStore {
   private rows: IObservableArray<ELT.Row>;
   private selectedKey: string | null = null;
 
+  public abortController = new AbortController();
+
   constructor({ rootStore, validationConfig }: ConstructorInput) {
     this.rows = observable<ELT.Row>([]);
     makeAutoObservable(this);
@@ -55,6 +57,10 @@ export default class PolicyStore {
     if (index >= 0) this.rows[index] = { ...this.rows[index], ...row };
   };
 
+  public getRow(key: string) {
+    return this.rows.find((x) => x.key === key);
+  }
+
   public get getRows() {
     return toJS(this.rows);
   }