fix(clerk-js): Revalidate when user deletes organization (#2473)

.changeset/giant-rice-crash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Update user memberships when user creates, leaves or deletes an organization.

packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx

@@ -12,6 +12,7 @@ import { colors, createSlug, handleError, useFormControl } from '../../utils';
 import { InviteMembersForm } from '../OrganizationProfile/InviteMembersForm';
 import { InvitationsSentMessage } from '../OrganizationProfile/InviteMembersPage';
 import { OrganizationProfileAvatarUploader } from '../OrganizationProfile/OrganizationProfileAvatarUploader';
+import { organizationListParams } from '../OrganizationSwitcher/utils';
 
 type CreateOrganizationFormProps = {
   skipInvitationScreen: boolean;
@@ -30,7 +31,9 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
 
   const lastCreatedOrganizationRef = React.useRef<OrganizationResource | null>(null);
-  const { createOrganization, isLoaded, setActive } = useCoreOrganizationList();
+  const { createOrganization, isLoaded, setActive, userMemberships } = useCoreOrganizationList({
+    userMemberships: organizationListParams.userMemberships,
+  });
   const { organization } = useCoreOrganization();
   const [file, setFile] = React.useState<File | null>();
 
@@ -68,6 +71,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
       lastCreatedOrganizationRef.current = organization;
       await setActive({ organization });
 
+      void userMemberships.revalidate?.();
+
       if (props.skipInvitationScreen ?? organization.maxAllowedMemberships === 1) {
         return completeFlow();
       }

packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx

@@ -1,5 +1,10 @@
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useCoreUser, useOrganizationProfileContext } from '../../contexts';
+import {
+  useCoreOrganization,
+  useCoreOrganizationList,
+  useCoreUser,
+  useOrganizationProfileContext,
+} from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { localizationKeys, Text } from '../../customizables';
 import {
@@ -12,22 +17,39 @@ import {
 } from '../../elements';
 import { useRouter } from '../../router';
 import { handleError, useFormControl } from '../../utils';
+import { organizationListParams } from '../OrganizationSwitcher/utils';
 import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
-export const LeaveOrganizationPage = () => {
+const useLeaveWithRevalidations = (leavePromise: (() => Promise<any>) | undefined) => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
+  const { userMemberships, userInvitations } = useCoreOrganizationList({
+    userMemberships: organizationListParams.userMemberships,
+    userInvitations: organizationListParams.userInvitations,
+  });
+
+  return () =>
+    card
+      .runAsync(async () => {
+        await leavePromise?.();
+      })
+      .then(() => {
+        void userMemberships.revalidate?.();
+        void userInvitations.revalidate?.();
+        void navigateAfterLeaveOrganization();
+      });
+};
+
+export const LeaveOrganizationPage = () => {
   const { organization } = useCoreOrganization();
   const user = useCoreUser();
 
-  if (!organization) {
+  const leaveOrg = useLeaveWithRevalidations(organization ? () => user.leaveOrganization(organization.id) : undefined);
+
+  if (!organization || !user) {
     return null;
   }
 
-  const leave = () => {
-    return card.runAsync(user.leaveOrganization(organization.id)).then(navigateAfterLeaveOrganization);
-  };
-
   return (
     <ActionConfirmationPage
       organizationName={organization?.name}
@@ -42,24 +64,20 @@ export const LeaveOrganizationPage = () => {
       successMessage={localizationKeys(
         'organizationProfile.profilePage.dangerSection.leaveOrganization.successMessage',
       )}
-      onConfirmation={leave}
+      onConfirmation={leaveOrg}
     />
   );
 };
 
 export const DeleteOrganizationPage = () => {
-  const card = useCardState();
-  const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization } = useCoreOrganization();
+  const { organization, membership } = useCoreOrganization();
+
+  const deleteOrg = useLeaveWithRevalidations(organization?.destroy);
 
-  if (!organization) {
+  if (!organization || !membership) {
     return null;
   }
 
-  const deleteOrg = () => {
-    return card.runAsync(organization.destroy()).then(navigateAfterLeaveOrganization);
-  };
-
   return (
     <ActionConfirmationPage
       organizationName={organization?.name}