diff --git a/.changeset/giant-rice-crash.md b/.changeset/giant-rice-crash.md new file mode 100644 index 00000000000..e74a11287a9 --- /dev/null +++ b/.changeset/giant-rice-crash.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Update user memberships when user creates, leaves or deletes an organization. diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx index 9aadb1512b6..fd267cc7130 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/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(null); - const { createOrganization, isLoaded, setActive } = useCoreOrganizationList(); + const { createOrganization, isLoaded, setActive, userMemberships } = useCoreOrganizationList({ + userMemberships: organizationListParams.userMemberships, + }); const { organization } = useCoreOrganization(); const [file, setFile] = React.useState(); @@ -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(); } diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx index ceb303314e6..52b1180d7d0 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx +++ b/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) | 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 ( { 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 (