diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx index 4d4d1d355f4..cc72035b808 100644 --- a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx @@ -121,6 +121,11 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void const handleCreateOrganizationClicked = () => { props.onCreateOrganizationClick(); }; + + // Solve weird bug with swr while running unit tests + const userInvitationsData = userInvitations.data?.filter(a => !!a); + const userSuggestionsData = userSuggestions.data?.filter(a => !!a); + return ( <> void })} {!userMemberships.hasNextPage && - (userInvitations.count || 0) > 0 && - userInvitations.data?.map(inv => { + userInvitationsData?.map(inv => { return ( void {!userMemberships.hasNextPage && !userInvitations.hasNextPage && - (userSuggestions.count || 0) > 0 && - userSuggestions.data?.map(inv => { + userSuggestionsData?.map(inv => { return ( { // Update cache in case another listener depends on it - void userInvitations?.setData?.(cachedPages => populateCacheUpdateItem(updatedItem, cachedPages)); + void userInvitations?.setData?.(cachedPages => populateCacheUpdateItem(updatedItem, cachedPages, 'negative')); setAcceptedOrganization(organization); }) .catch(err => handleError(err, [], card.setError)) diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx index c641926a60d..516104a9c07 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx @@ -148,7 +148,7 @@ const InvitationPreview = withCardStateProvider( }) .then(([updatedItem, organization]) => { // Update cache in case another listener depends on it - void userInvitations?.setData?.(cachedPages => populateCacheUpdateItem(updatedItem, cachedPages)); + void userInvitations?.setData?.(cachedPages => populateCacheUpdateItem(updatedItem, cachedPages, 'negative')); setAcceptedInvitations(old => [ ...old, { @@ -161,7 +161,7 @@ const InvitationPreview = withCardStateProvider( }; if (status === 'accepted') { - if (activeOrganization?.id === acceptedOrganization?.id) { + if (acceptedOrganization?.id && activeOrganization?.id === acceptedOrganization.id) { // Hide the Accepted invitation that looks like a membership when the organization is already active return null; } @@ -221,6 +221,10 @@ export const UserInvitationSuggestionList = (props: UserInvitationSuggestionList const isLoading = userInvitations.isLoading || userSuggestions.isLoading; const hasNextPage = userInvitations.hasNextPage || userSuggestions.hasNextPage; const hasAnyData = !!(userInvitations.count || userSuggestions.count); + + // Solve weird bug with swr while running unit tests + const userInvitationsData = userInvitations.data?.filter(a => !!a); + const userSuggestionsData = userSuggestions.data?.filter(a => !!a); return ( - {(userInvitations.count || 0) > 0 && - userInvitations.data?.map(inv => { - return ( - - ); - })} + {userInvitationsData?.map(inv => { + return ( + + ); + })} - {(userSuggestions.count || 0) > 0 && - !userInvitations.hasNextPage && - userSuggestions.data?.map(suggestion => { + {!userInvitations.hasNextPage && + userSuggestionsData?.map(suggestion => { return ( ( updatedItem: T, itemsInfinitePages: (ClerkPaginatedResponse | undefined)[] | undefined, + affectTotalCount?: 'negative', ) => { if (typeof itemsInfinitePages === 'undefined') { return [{ data: [updatedItem], total_count: 1 }]; } + const prevTotalCount = itemsInfinitePages?.[itemsInfinitePages.length - 1]?.total_count || 1; + /** * We should "preserve" an undefined page if one is found. For example if swr triggers 2 requests, page 1 & page2, and the request for page2 resolves first, at that point in memory itemsInfinitePages would look like this [undefined, {....}] * if SWR says that has fetched 2 pages but the first result of is undefined, we should not return back an array with 1 item as this will end up having cacheKeys that point nowhere. @@ -42,6 +45,7 @@ export const populateCacheUpdateItem = ( return { ...item, data: newData, + total_count: affectTotalCount === 'negative' ? prevTotalCount - 1 : prevTotalCount, }; }); };