fix(clerk-js): On accept invitation decrease the total count by one

clerk · Dec 22, 2023 · 842f8bb · 842f8bb
1 parent 1559050
commit 842f8bb
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git 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 (
     <>
       <Header.Root
@@ -157,8 +162,7 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
               })}
 
             {!userMemberships.hasNextPage &&
-              (userInvitations.count || 0) > 0 &&
-              userInvitations.data?.map(inv => {
+              userInvitationsData?.map(inv => {
                 return (
                   <InvitationPreview
                     key={inv.id}
@@ -169,8 +173,7 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
 
             {!userMemberships.hasNextPage &&
               !userInvitations.hasNextPage &&
-              (userSuggestions.count || 0) > 0 &&
-              userSuggestions.data?.map(inv => {
+              userSuggestionsData?.map(inv => {
                 return (
                   <SuggestionPreview
                     key={inv.id}

diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx
@@ -42,7 +42,7 @@ export const InvitationPreview = withCardStateProvider((props: UserOrganizationI
         })
         .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'));
           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
@@ -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 (
     <SwitcherInvitationActions
       showBorder={hasAnyData || isLoading}
@@ -233,20 +237,18 @@ export const UserInvitationSuggestionList = (props: UserInvitationSuggestionList
           ...common.unstyledScrollbar(t),
         })}
       >
-        {(userInvitations.count || 0) > 0 &&
-          userInvitations.data?.map(inv => {
-            return (
-              <InvitationPreview
-                key={inv.id}
-                invitation={inv}
-                onOrganizationClick={onOrganizationClick}
-              />
-            );
-          })}
+        {userInvitationsData?.map(inv => {
+          return (
+            <InvitationPreview
+              key={inv.id}
+              invitation={inv}
+              onOrganizationClick={onOrganizationClick}
+            />
+          );
+        })}
 
-        {(userSuggestions.count || 0) > 0 &&
-          !userInvitations.hasNextPage &&
-          userSuggestions.data?.map(suggestion => {
+        {!userInvitations.hasNextPage &&
+          userSuggestionsData?.map(suggestion => {
             return (
               <SuggestionPreview
                 key={suggestion.id}

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts b/packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts
@@ -17,11 +17,14 @@ export const organizationListParams = {
 export const populateCacheUpdateItem = <T extends { id: string }>(
   updatedItem: T,
   itemsInfinitePages: (ClerkPaginatedResponse<T> | 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 = <T extends { id: string }>(
     return {
       ...item,
       data: newData,
+      total_count: affectTotalCount === 'negative' ? prevTotalCount - 1 : prevTotalCount,
     };
   });
 };