From 5272cf8d304c3172b1ede609d1d5efbaaa3e3f6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Tue, 17 Jun 2025 18:23:45 +0200 Subject: [PATCH] pl-fe: avoid unnecessary requests when not logged in MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- packages/pl-fe/src/components/sidebar-menu.tsx | 12 +++++++++--- packages/pl-fe/src/components/sidebar-navigation.tsx | 7 ++++++- .../src/queries/accounts/use-follow-requests.ts | 1 + .../src/queries/statuses/use-interaction-requests.ts | 4 +++- .../queries/utils/make-paginated-response-query.ts | 6 ++++-- 5 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/pl-fe/src/components/sidebar-menu.tsx b/packages/pl-fe/src/components/sidebar-menu.tsx index aaa3fd4d5..f997eb5ad 100644 --- a/packages/pl-fe/src/components/sidebar-menu.tsx +++ b/packages/pl-fe/src/components/sidebar-menu.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/interactive-supports-focus */ import { useInfiniteQuery } from '@tanstack/react-query'; import clsx from 'clsx'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { Link, NavLink } from 'react-router-dom'; @@ -93,15 +93,21 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => { const { isSidebarOpen, closeSidebar } = useUiStore(); + const me = useAppSelector((state) => state.me); + + const authenticatedScheduledStatusesCountQueryOptions = useMemo(() => ({ + ...scheduledStatusesCountQueryOptions, + enabled: !!me, + }), [me]); + const getOtherAccounts = useCallback(makeGetOtherAccounts(), []); const features = useFeatures(); - const me = useAppSelector((state) => state.me); const { account } = useAccount(me || undefined); const otherAccounts = useAppSelector((state) => getOtherAccounts(state)); const { settings } = useSettingsStore(); const followRequestsCount = useFollowRequestsCount().data || 0; const interactionRequestsCount = useInteractionRequestsCount().data || 0; - const scheduledStatusCount = useInfiniteQuery(scheduledStatusesCountQueryOptions).data || 0; + const scheduledStatusCount = useInfiniteQuery(authenticatedScheduledStatusesCountQueryOptions).data || 0; const draftCount = useAppSelector((state) => Object.keys(state.draft_statuses).length); // const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count()); const [sidebarVisible, setSidebarVisible] = useState(isSidebarOpen); diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx index e7d4823d2..7b8416116 100644 --- a/packages/pl-fe/src/components/sidebar-navigation.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation.tsx @@ -46,11 +46,16 @@ const SidebarNavigation = React.memo(() => { const { account } = useOwnAccount(); const { isOpen } = useRegistrationStatus(); + const authenticatedScheduledStatusesCountQueryOptions = useMemo(() => ({ + ...scheduledStatusesCountQueryOptions, + enabled: !!account, + }), [!!account]); + const notificationCount = useAppSelector((state) => state.notifications.unread); const followRequestsCount = useFollowRequestsCount().data || 0; const interactionRequestsCount = useInteractionRequestsCount().data || 0; const dashboardCount = useAppSelector((state) => state.admin.openReports.length + state.admin.awaitingApproval.length); - const scheduledStatusCount = useInfiniteQuery(scheduledStatusesCountQueryOptions).data || 0; + const scheduledStatusCount = useInfiniteQuery(authenticatedScheduledStatusesCountQueryOptions).data || 0; const draftCount = useAppSelector((state) => Object.keys(state.draft_statuses).length); const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated; diff --git a/packages/pl-fe/src/queries/accounts/use-follow-requests.ts b/packages/pl-fe/src/queries/accounts/use-follow-requests.ts index 9f4092397..c754b19ed 100644 --- a/packages/pl-fe/src/queries/accounts/use-follow-requests.ts +++ b/packages/pl-fe/src/queries/accounts/use-follow-requests.ts @@ -29,6 +29,7 @@ const makeUseFollowRequests = (select: ((data: InfiniteData ['accountsLists', 'followRequests'], (client) => client.myAccount.getFollowRequests().then(minifyAccountList), select, + 'isLoggedIn', ); const useFollowRequests = makeUseFollowRequests((data) => data.pages.map(page => page.items).flat()); diff --git a/packages/pl-fe/src/queries/statuses/use-interaction-requests.ts b/packages/pl-fe/src/queries/statuses/use-interaction-requests.ts index b28aa065b..f54a61e38 100644 --- a/packages/pl-fe/src/queries/statuses/use-interaction-requests.ts +++ b/packages/pl-fe/src/queries/statuses/use-interaction-requests.ts @@ -4,6 +4,7 @@ import { importEntities } from 'pl-fe/actions/importer'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useClient } from 'pl-fe/hooks/use-client'; import { useFeatures } from 'pl-fe/hooks/use-features'; +import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import type { InteractionRequest, PaginatedResponse } from 'pl-api'; import type { AppDispatch } from 'pl-fe/store'; @@ -36,13 +37,14 @@ const useInteractionRequests = ( const client = useClient(); const features = useFeatures(); const dispatch = useAppDispatch(); + const { isLoggedIn } = useLoggedIn(); return useInfiniteQuery({ queryKey: ['interactionRequests'], queryFn: ({ pageParam }) => pageParam.next?.() || client.interactionRequests.getInteractionRequests().then(response => minifyInteractionRequestsList(dispatch, response)), initialPageParam: { previous: null, next: null, items: [], partial: false } as PaginatedResponse, getNextPageParam: (page) => page.next ? page : undefined, - enabled: features.interactionRequests, + enabled: isLoggedIn && features.interactionRequests, select, }); }; diff --git a/packages/pl-fe/src/queries/utils/make-paginated-response-query.ts b/packages/pl-fe/src/queries/utils/make-paginated-response-query.ts index a2ee31767..e6d9f79d0 100644 --- a/packages/pl-fe/src/queries/utils/make-paginated-response-query.ts +++ b/packages/pl-fe/src/queries/utils/make-paginated-response-query.ts @@ -1,6 +1,7 @@ import { type InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { useClient } from 'pl-fe/hooks/use-client'; +import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import type { PaginatedResponse, PlApiClient } from 'pl-api'; @@ -8,9 +9,10 @@ const makePaginatedResponseQuery = , T2, T3 = Array>( queryKey: (...params: T1) => Array, queryFn: (client: PlApiClient, params: T1) => Promise>, select?: (data: InfiniteData>) => T3, - enabled?: (...params: T1) => boolean, + enabled?: ((...params: T1) => boolean) | 'isLoggedIn', ) => (...params: T1) => { const client = useClient(); + const { isLoggedIn } = useLoggedIn(); return useInfiniteQuery({ queryKey: queryKey(...params), @@ -18,7 +20,7 @@ const makePaginatedResponseQuery = , T2, T3 = Array>( initialPageParam: { previous: null, next: null, items: [], partial: false } as Awaited>, getNextPageParam: (page) => page.next ? page : undefined, select: select ?? ((data) => data.pages.map(page => page.items).flat() as T3), - enabled: enabled?.(...params) ?? true, + enabled: enabled === 'isLoggedIn' ? isLoggedIn : (enabled?.(...params) ?? true), }); };