elt/kasko: add abortController

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

@@ -11,6 +11,7 @@ import { defaultRow } from '@/stores/tables/elt/default-values';
 import { useApolloClient } from '@apollo/client';
 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;
@@ -32,7 +33,10 @@ export const Kasko = observer(() => {
   const apolloClient = useApolloClient();
   const { init } = helper({ apolloClient, store });
 
-  async function handleOnClick() {
+  const handleOnClick = useCallback(async () => {
+    $tables.elt.kasko.abortController?.abort();
+    $tables.elt.kasko.abortController = new AbortController();
+
     const { kasko } = await init();
     $tables.elt.kasko.setRows(kasko);
     const kaskoCompanyIds = sift(
@@ -48,7 +52,9 @@ export const Kasko = observer(() => {
       if (row) {
         $tables.elt.kasko.setRow({ key, status: 'fetching' });
         makeEltKaskoRequest({ apolloClient, store }, row)
-          .then((payload) => getEltKasko(payload))
+          .then((payload) =>
+            getEltKasko(payload, { signal: $tables.elt.kasko.abortController?.signal })
+          )
           .then((res) => {
             if (res) {
               const companyRes = res?.[row.id];
@@ -114,7 +120,7 @@ export const Kasko = observer(() => {
           });
       }
     });
-  }
+  }, [$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/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,10 +17,13 @@ export async function getEltOsago(payload: ELT.RequestEltOsago, { signal }: Quer
   );
 }
 
-export async function getEltKasko(payload: ELT.RequestEltKasko) {
+export async function getEltKasko(
+  payload: ELT.RequestEltKasko,
+  { signal }: { signal: AbortSignal }
+) {
   return withHandleError(
     axios
-      .post<ELT.ResponseEltKasko>(URL_ELT_KASKO, payload, { timeout: TIMEOUT })
+      .post<ELT.ResponseEltKasko>(URL_ELT_KASKO, payload, { signal, timeout: TIMEOUT })
       .then(({ data }) => data)
   );
 }

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

@@ -100,6 +100,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);