From 98394ecd1a5a415ebfcd16389339a96d21bb6d70 Mon Sep 17 00:00:00 2001 From: Mikhail Gorbunov Date: Tue, 20 Aug 2024 22:46:05 +0500 Subject: [PATCH] fix(condo): DOMA-10006 add throttling --- .../GraphQlSearchInputWithCheckAll.tsx | 4 +++ .../news/components/NewsForm/BaseNewsForm.tsx | 19 +++++----- .../components/NewsForm/OldBaseNewsForm.tsx | 35 ++++++++++++------- .../news/components/RecipientCounter.tsx | 14 ++++++-- 4 files changed, 47 insertions(+), 25 deletions(-) diff --git a/apps/condo/domains/common/components/GraphQlSearchInputWithCheckAll.tsx b/apps/condo/domains/common/components/GraphQlSearchInputWithCheckAll.tsx index 9cf697e1f34..40938f26b83 100644 --- a/apps/condo/domains/common/components/GraphQlSearchInputWithCheckAll.tsx +++ b/apps/condo/domains/common/components/GraphQlSearchInputWithCheckAll.tsx @@ -105,6 +105,10 @@ export const GraphQlSearchInputWithCheckAll: React.FC = onChange(data) } + if (selectedDataLength !== allDataLength && isFunction(onCheckBoxChange)) { + onCheckBoxChange(false) + } + if (selectedDataLength === allDataLength && isFunction(onCheckBoxChange)) { onCheckBoxChange(true) } diff --git a/apps/condo/domains/news/components/NewsForm/BaseNewsForm.tsx b/apps/condo/domains/news/components/NewsForm/BaseNewsForm.tsx index d674b0bfe60..7b6ec13cd90 100644 --- a/apps/condo/domains/news/components/NewsForm/BaseNewsForm.tsx +++ b/apps/condo/domains/news/components/NewsForm/BaseNewsForm.tsx @@ -63,7 +63,10 @@ import { NewsItemSharingForm, SharingAppValues } from '@condo/domains/news/compo import SelectSharingAppControl from '@condo/domains/news/components/NewsForm/SelectSharingAppControl' import { NewsItemCard } from '@condo/domains/news/components/NewsItemCard' import { MemoizedCondoNewsPreview } from '@condo/domains/news/components/NewsPreview' -import { detectTargetedSections, RecipientCounter } from '@condo/domains/news/components/RecipientCounter' +import { + detectTargetedSections, + MemoizedRecipientCounter, +} from '@condo/domains/news/components/RecipientCounter' import { TemplatesSelect } from '@condo/domains/news/components/TemplatesSelect' import { NewsItemScopeNoInstanceType } from '@condo/domains/news/components/types' import { PROFANITY_TITLE_DETECTED_MOT_ERF_KER, PROFANITY_BODY_DETECTED_MOT_ERF_KER } from '@condo/domains/news/constants/errors' @@ -519,7 +522,7 @@ export const BaseNewsForm: React.FC = ({ const { loading: selectedPropertiesLoading, objs: selectedProperties } = Property.useAllObjects({ where: { id_in: selectedPropertiesId }, - }) + }, { fetchPolicy: 'cache-first' }) const isOnlyOnePropertySelected: boolean = useMemo(() => (selectedPropertiesId.length === 1), [selectedPropertiesId.length]) @@ -1432,13 +1435,11 @@ export const BaseNewsForm: React.FC = ({ )} - { - !!formInfoColSpan && newsItemScopesNoInstance.length > 0 && ( - - - - ) - } + + + + + diff --git a/apps/condo/domains/news/components/NewsForm/OldBaseNewsForm.tsx b/apps/condo/domains/news/components/NewsForm/OldBaseNewsForm.tsx index 68c62eb4afc..62157c1ab3f 100644 --- a/apps/condo/domains/news/components/NewsForm/OldBaseNewsForm.tsx +++ b/apps/condo/domains/news/components/NewsForm/OldBaseNewsForm.tsx @@ -45,7 +45,10 @@ import { useInputWithCounter } from '@condo/domains/common/hooks/useInputWithCou import { useValidations } from '@condo/domains/common/hooks/useValidations' import { BaseNewsFormProps } from '@condo/domains/news/components/NewsForm/BaseNewsForm' import { MemoizedCondoNewsPreview } from '@condo/domains/news/components/NewsPreview' -import { detectTargetedSections, RecipientCounter } from '@condo/domains/news/components/RecipientCounter' +import { + detectTargetedSections, + MemoizedRecipientCounter, +} from '@condo/domains/news/components/RecipientCounter' import { TemplatesTabs } from '@condo/domains/news/components/TemplatesTabs' import { NewsItemScopeNoInstanceType } from '@condo/domains/news/components/types' import { PROFANITY_TITLE_DETECTED_MOT_ERF_KER, PROFANITY_BODY_DETECTED_MOT_ERF_KER } from '@condo/domains/news/constants/errors' @@ -419,7 +422,7 @@ export const OldBaseNewsForm: React.FC = ({ const { loading: selectedPropertiesLoading, objs: selectedProperties } = Property.useAllObjects({ where: { id_in: selectedPropertiesId }, - }) + }, { fetchPolicy: 'cache-first' }) const isOnlyOnePropertySelected: boolean = useMemo(() => (selectedPropertiesId.length === 1), [selectedPropertiesId.length]) @@ -827,7 +830,15 @@ export const OldBaseNewsForm: React.FC = ({ } return [] - }, [isAllPropertiesChecked, isOnlyOnePropertySelected, selectedProperties, selectedPropertiesId.length, selectedPropertiesLoading, selectedSectionKeys, selectedUnitNameKeys]) + }, [ + selectedPropertiesLoading, + isAllPropertiesChecked, + isOnlyOnePropertySelected, + selectedProperties, + selectedPropertiesId, + selectedSectionKeys, + selectedUnitNameKeys, + ]) const dayjsTz = dayjs().format('Z') const tzInfo = useMemo(() => { @@ -1082,12 +1093,12 @@ export const OldBaseNewsForm: React.FC = ({ } @@ -1141,13 +1152,11 @@ export const OldBaseNewsForm: React.FC = ({ } - { - !!formInfoColSpan && newsItemScopesNoInstance.length > 0 && ( - - - - ) - } + + + + + diff --git a/apps/condo/domains/news/components/RecipientCounter.tsx b/apps/condo/domains/news/components/RecipientCounter.tsx index 9e6eebedd34..917bde2f52d 100644 --- a/apps/condo/domains/news/components/RecipientCounter.tsx +++ b/apps/condo/domains/news/components/RecipientCounter.tsx @@ -9,8 +9,9 @@ import intersectionWith from 'lodash/intersectionWith' import isEqual from 'lodash/isEqual' import map from 'lodash/map' import slice from 'lodash/slice' +import throttle from 'lodash/throttle' import uniq from 'lodash/uniq' -import React, { CSSProperties, useEffect, useMemo, useState } from 'react' +import React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react' import { useAuth } from '@open-condo/next/auth' import { useIntl } from '@open-condo/next/intl' @@ -237,11 +238,13 @@ export const RecipientCounter: React.FC = ({ newsItemScop }, ) + const throttledGetCounters = useCallback(throttle(getCounters, 1500), [throttle]) + useEffect(() => { const sender = getClientSideSenderInfo() const meta = { dv: 1, sender } - getCounters({ + throttledGetCounters({ variables: { data: { newsItemScopes: processedNewsItemScope, @@ -266,6 +269,9 @@ export const RecipientCounter: React.FC = ({ newsItemScop const isLoadingCounters = isCountersLoading || !counters + console.log('Recipient counter', { isLoadingCounters, isCountersLoading, counters }) + + return ( {MailingMessage}{message}} @@ -341,7 +347,7 @@ const NewsSharingRecipientCounter: React.FC<{ contextId: string, newsItemScopes: }, }, }) - }, [getCounter, contextId, newsItemScopes]) + }, [ getCounter, contextId, newsItemScopes ]) // if typeof counter !== number is used here instead of just if !counter because bool(0) => false const isLoadingCounter = isCounterLoading || typeof counter !== 'number' @@ -357,4 +363,6 @@ const NewsSharingRecipientCounter: React.FC<{ contextId: string, newsItemScopes: ) } +export const MemoizedRecipientCounter = React.memo(RecipientCounter) + export const MemoizedNewsSharingRecipientCounter = React.memo(NewsSharingRecipientCounter) \ No newline at end of file