From a1dfb2fbe60152c89f358cacccee9819768e580f Mon Sep 17 00:00:00 2001 From: Viktor Tolmachev <119614372+tolmachev21@users.noreply.github.com> Date: Wed, 29 Jan 2025 09:51:07 +0500 Subject: [PATCH] fix(condo): DOMA-11011 remove unnecessary queries (#5730) * fix(condo): DOMA-11007 save console.log * fix(condo): DOMA-11007 proof of work * fix(condo): DOMA-11007 delete console.log * fix(condo): DOMA-11007 comeback useEffect in organization * fix(condo): DOMA-11011 removed request to getAllMiniApps * fix(condo): DOMA-11011 rewrite useLazyQuery on useQuery * fix(condo): DOMA-11011 add user to all data in organization * fix(condo): DOMA-11011 add wrap for refetch * fix(condo): DOMA-11011 fix eslint --- .../components/AppDescription/B2BAppPage.tsx | 4 +- .../ConnectedAppsWithIconsProvider.tsx | 53 ++++++++----------- .../GlobalApps/GlobalAppsContainer.tsx | 4 +- apps/condo/pages/_app.tsx | 7 +-- packages/next/auth.tsx | 5 +- packages/next/organization.tsx | 26 ++++----- 6 files changed, 49 insertions(+), 50 deletions(-) diff --git a/apps/condo/domains/miniapp/components/AppDescription/B2BAppPage.tsx b/apps/condo/domains/miniapp/components/AppDescription/B2BAppPage.tsx index 54164673d5c..22b2136f391 100644 --- a/apps/condo/domains/miniapp/components/AppDescription/B2BAppPage.tsx +++ b/apps/condo/domains/miniapp/components/AppDescription/B2BAppPage.tsx @@ -53,7 +53,9 @@ export const B2BAppPage: React.FC = ({ id }) => { setModalOpen(true) }) const createContextAction = useCallback(() => { - initialAction({ organization: { connect: { id: organizationId } }, app: { connect: { id: appId } } }) + if (!userOrganization.isLoading) { + initialAction({ organization: { connect: { id: organizationId } }, app: { connect: { id: appId } } }) + } }, [initialAction, organizationId, appId]) const handleCloseModal = useCallback(() => { diff --git a/apps/condo/domains/miniapp/components/ConnectedAppsWithIconsProvider.tsx b/apps/condo/domains/miniapp/components/ConnectedAppsWithIconsProvider.tsx index 0d2a8721fc4..489dd40914d 100644 --- a/apps/condo/domains/miniapp/components/ConnectedAppsWithIconsProvider.tsx +++ b/apps/condo/domains/miniapp/components/ConnectedAppsWithIconsProvider.tsx @@ -1,8 +1,9 @@ import { SortAllMiniAppsBy } from '@app/condo/schema' import get from 'lodash/get' -import React, { createContext, useCallback, useContext, useEffect, useState } from 'react' +import React, { createContext, useCallback, useContext, useState } from 'react' -import { useLazyQuery } from '@open-condo/next/apollo' +import { useQuery } from '@open-condo/next/apollo' +import { useAuth } from '@open-condo/next/auth' import { useOrganization } from '@open-condo/next/organization' import { ALL_MENU_CATEGORIES, DEFAULT_MENU_CATEGORY } from '@condo/domains/common/constants/menuCategories' @@ -28,12 +29,27 @@ export const ConnectedWithIconsContext = createContext { + const { isAuthenticated, isLoading: isUserLoading } = useAuth() const { organization } = useOrganization() const orgId = get(organization, 'id', null) const [appsByCategories, setAppsByCategories] = useState({}) const [connectedApps, setConnectedApps] = useState>([]) - const [fetchMiniAppsQuery] = useLazyQuery(ALL_MINI_APPS_QUERY, { + const { refetch } = useQuery(ALL_MINI_APPS_QUERY, { + variables: { + data: { + dv: 1, + sender: getClientSideSenderInfo(), + organization: { id: orgId }, + where: { + connected: true, + accessible: true, + app: { icon_not: null }, + }, + sortBy: SortAllMiniAppsBy.ConnectedAtAsc, + }, + }, + skip: isUserLoading || !isAuthenticated || !orgId, onCompleted: (data) => { const apps = get(data, 'objs', []) const appsByCategories: AppsByCategories = Object.assign({}, ...ALL_MENU_CATEGORIES.map(category =>({ [category]: [] }))) @@ -50,35 +66,12 @@ export const ConnectedAppsWithIconsContextProvider: React.FC = ({ children }) => }, }) - const fetchMiniApps = useCallback(() => { - if (orgId) { - fetchMiniAppsQuery({ - variables: { - data: { - dv: 1, - sender: getClientSideSenderInfo(), - organization: { id: orgId }, - where: { - connected: true, - accessible: true, - app: { icon_not: null }, - }, - sortBy: SortAllMiniAppsBy.ConnectedAtAsc, - }, - }, - }) - } else { - setConnectedApps([]) - setAppsByCategories(Object.assign({}, ...ALL_MENU_CATEGORIES.map(category =>({ [category]: [] })))) - } - }, [orgId, fetchMiniAppsQuery]) - - useEffect(() => { - fetchMiniApps() - }, [orgId, fetchMiniApps]) + const refetchAuth = useCallback(async () => { + await refetch() + }, [refetch]) return ( - + {children} ) diff --git a/apps/condo/domains/miniapp/components/GlobalApps/GlobalAppsContainer.tsx b/apps/condo/domains/miniapp/components/GlobalApps/GlobalAppsContainer.tsx index 4c1e296f560..3864d091fab 100644 --- a/apps/condo/domains/miniapp/components/GlobalApps/GlobalAppsContainer.tsx +++ b/apps/condo/domains/miniapp/components/GlobalApps/GlobalAppsContainer.tsx @@ -27,7 +27,7 @@ export const GlobalAppsContainer: React.FC = () => { // (Provider addOrigin must be changed to addFrame or something like that) // 2. Move constants like REQUEST_FEATURE_MESSAGE_NAME, ORGANIZATION_CHANGE_MESSAGE_NAME to incoming bridge events // so miniapps can use bridge.subscribe with Type safety on them! - const { user } = useAuth() + const { user, isLoading } = useAuth() const { organization } = useOrganization() const organizationId = get(organization, 'id', null) @@ -37,7 +37,7 @@ export const GlobalAppsContainer: React.FC = () => { isHidden: false, }, sortBy: [SortB2BAppsBy.CreatedAtAsc], - }, { skip: !user || !organizationId }) + }, { skip: !user || !organizationId || isLoading }) const appUrls = objs.map(app => app.appUrl) diff --git a/apps/condo/pages/_app.tsx b/apps/condo/pages/_app.tsx index f5ed15ca685..ba05a5060ec 100644 --- a/apps/condo/pages/_app.tsx +++ b/apps/condo/pages/_app.tsx @@ -149,6 +149,7 @@ const MenuItems: React.FC = () => { const isSPPOrg = useFlag(SERVICE_PROVIDER_PROFILE) const isMarketplaceEnabled = useFlag(MARKETPLACE) + const { isAuthenticated, isLoading } = useAuth() const { link, organization } = useOrganization() const { isExpired } = useServiceSubscriptionContext() const hasSubscriptionFeature = hasFeature('subscription') @@ -159,7 +160,7 @@ const MenuItems: React.FC = () => { const orgId = get(organization, 'id', null) const orgFeatures = get(organization, 'features', []) const sppBillingId = get(sppConfig, 'BillingIntegrationId', null) - const { obj: billingCtx } = BillingContext.useObject({ where: { integration: { id: sppBillingId }, organization: { id: orgId } } }) + const { obj: billingCtx } = BillingContext.useObject({ where: { integration: { id: sppBillingId }, organization: { id: orgId } } }, { skip: !isAuthenticated || isLoading }) const anyReceiptsLoaded = Boolean(get(billingCtx, 'lastReport', null)) const hasAccessToBilling = get(role, 'canReadPayments', false) || get(role, 'canReadBillingReceipts', false) const isManagingCompany = get(organization, 'type', MANAGING_COMPANY_TYPE) === MANAGING_COMPANY_TYPE @@ -388,7 +389,7 @@ const MenuItems: React.FC = () => { } const TasksProvider = ({ children }) => { - const { user } = useAuth() + const { user, isLoading } = useAuth() // Use UI interfaces for all tasks, that are supposed to be tracked const { TicketDocumentGenerationTask: TicketDocumentGenerationTaskUIInterface } = useTicketDocumentGenerationTaskUIInterface() const { TicketExportTask: TicketExportTaskUIInterface } = useTicketExportTaskUIInterface() @@ -405,7 +406,7 @@ const TasksProvider = ({ children }) => { // Load all tasks with 'processing' status const { data, loading: isProcessingTasksLoading } = useGetProcessingTasksQuery({ variables: { userId: user?.id || null, createdAtGte: dayjs().startOf('day').toISOString() }, - skip: !user?.id, + skip: !user?.id || isLoading, }) const { records: miniAppTasks, loading: isMiniAppTasksLoading } = MiniAppTaskUIInterface.storage.useTasks( diff --git a/packages/next/auth.tsx b/packages/next/auth.tsx index cb8d895a4e9..98a18265d34 100644 --- a/packages/next/auth.tsx +++ b/packages/next/auth.tsx @@ -263,7 +263,9 @@ const _withAuthLegacy: WithAuthLegacyType = ({ ssr = false, ...opts } = {}) => P const AuthProvider: React.FC = ({ children }) => { const apolloClient = useApolloClient() - const { data, loading: userLoading, refetch } = useQuery(USER_QUERY) + const { data, loading: userLoading, refetch } = useQuery(USER_QUERY, { + notifyOnNetworkStatusChange: true, + }) const user = useMemo(() => get(data, 'authenticatedUser') || null, [data]) @@ -287,6 +289,7 @@ const AuthProvider: React.FC = ({ children }) => { }) const [signOutMutation, { loading: signOutLoading }] = useMutation(SIGNOUT_MUTATION, { + refetchQueries: [USER_QUERY], onCompleted: async () => { removeCookieEmployeeId() await apolloClient.cache.reset() diff --git a/packages/next/organization.tsx b/packages/next/organization.tsx index 42b18feaa01..4dd365bf87c 100644 --- a/packages/next/organization.tsx +++ b/packages/next/organization.tsx @@ -317,7 +317,7 @@ const OrganizationProvider: React.FC = ({ children, useInitialEmployeeId, }) => { - const auth = useAuth() + const { user, isLoading: userLoading } = useAuth() const { employeeId } = useInitialEmployeeId() const [activeEmployeeId, setActiveEmployeeId] = useState(employeeId) @@ -335,14 +335,14 @@ const OrganizationProvider: React.FC = ({ const { loading: employeeLoading, refetch, data } = useQuery(GET_ORGANIZATION_EMPLOYEE_QUERY, { variables: { - userId: auth?.user?.id || null, + userId: user?.id || null, employeeId: activeEmployeeId, }, - skip: auth.isLoading || !auth.user || !auth.user.id || !activeEmployeeId, + skip: userLoading || !user || !user.id || !activeEmployeeId, onError, }) - const isLoading = auth.isLoading || employeeLoading + const isLoading = userLoading || employeeLoading const [activeEmployee, setActiveEmployee] = useState(get(data, ['employees', 0]) || null) @@ -384,25 +384,25 @@ const OrganizationProvider: React.FC = ({ }, [data, activeEmployee]) useEffect(() => { - if (auth.isLoading) return - if (!auth.user && activeEmployee !== null) { + if (userLoading) return + if (!user && activeEmployee !== null) { setActiveEmployee(null) setActiveEmployeeId(null) } - }, [auth.user]) + }, [user]) - if (DEBUG_RERENDERS) console.log('OrganizationProvider()', activeEmployee, 'loading', employeeLoading, 'skip', (auth.isLoading || !auth.user || !activeEmployeeId)) + if (DEBUG_RERENDERS) console.log('OrganizationProvider()', activeEmployee, 'loading', employeeLoading, 'skip', (userLoading || !user || !activeEmployeeId)) return (