From 823cb49c7932ddf8f97be5fa0053c7f7fb4ac7ff Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Fri, 15 Sep 2023 18:57:35 +0300 Subject: [PATCH] elt/osago: remove react-query --- .../Components/Calculation/Form/ELT/Osago.tsx | 96 +++++++------------ apps/web/process/elt/reactions/common.ts | 2 + 2 files changed, 36 insertions(+), 62 deletions(-) diff --git a/apps/web/Components/Calculation/Form/ELT/Osago.tsx b/apps/web/Components/Calculation/Form/ELT/Osago.tsx index d53c77c..11ecde5 100644 --- a/apps/web/Components/Calculation/Form/ELT/Osago.tsx +++ b/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: handleOnClick()} />, }; } - if (column.key === 'totalFranchise') { return { ...column, diff --git a/apps/web/process/elt/reactions/common.ts b/apps/web/process/elt/reactions/common.ts index 3c4406f..47eeac5 100644 --- a/apps/web/process/elt/reactions/common.ts +++ b/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,