From 22adb7b0757108415b758f90e6a69b443d3a11cd Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 8 Jan 2024 12:16:20 +0200 Subject: [PATCH 1/2] fix(clerk-js): Revalidate when user deletes organization (#2473) --- .changeset/giant-rice-crash.md | 5 +++ .../CreateOrganizationForm.tsx | 7 ++- .../ActionConfirmationPage.tsx | 43 +++++++++++++------ 3 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 .changeset/giant-rice-crash.md 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..b07f5c417a2 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx @@ -1,5 +1,5 @@ import { useWizard, Wizard } from '../../common'; -import { useCoreOrganization, useCoreUser, useOrganizationProfileContext } from '../../contexts'; +import { useCoreOrganization, useCoreUser, useCoreOrganizationList, useOrganizationProfileContext } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { localizationKeys, Text } from '../../customizables'; import { @@ -13,21 +13,38 @@ import { import { useRouter } from '../../router'; import { handleError, useFormControl } from '../../utils'; import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; +import { organizationListParams } from '../OrganizationSwitcher/utils'; -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 LeaveOrganizationForm = () => { const { organization } = useCoreOrganization(); - const user = useCoreUser(); + const { user } = useCoreUser(); + + const leaveOrg = useLeaveWithRevalidations(() => user!.leaveOrganization(organization!.id)); - if (!organization) { + 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; } From f046b618a2948419aa6bf5115bb0c2398b7afb6d Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 8 Jan 2024 12:23:56 +0200 Subject: [PATCH 2/2] fix(clerk-js): Fix issues after resolving conflicts --- .../ActionConfirmationPage.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx index b07f5c417a2..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, useCoreOrganizationList, useOrganizationProfileContext } from '../../contexts'; +import { + useCoreOrganization, + useCoreOrganizationList, + useCoreUser, + useOrganizationProfileContext, +} from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { localizationKeys, Text } from '../../customizables'; import { @@ -12,8 +17,8 @@ import { } from '../../elements'; import { useRouter } from '../../router'; import { handleError, useFormControl } from '../../utils'; -import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; import { organizationListParams } from '../OrganizationSwitcher/utils'; +import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; const useLeaveWithRevalidations = (leavePromise: (() => Promise) | undefined) => { const card = useCardState(); @@ -35,11 +40,11 @@ const useLeaveWithRevalidations = (leavePromise: (() => Promise) | undefine }); }; -export const LeaveOrganizationForm = () => { +export const LeaveOrganizationPage = () => { const { organization } = useCoreOrganization(); - const { user } = useCoreUser(); + const user = useCoreUser(); - const leaveOrg = useLeaveWithRevalidations(() => user!.leaveOrganization(organization!.id)); + const leaveOrg = useLeaveWithRevalidations(organization ? () => user.leaveOrganization(organization.id) : undefined); if (!organization || !user) { return null; @@ -73,10 +78,6 @@ export const DeleteOrganizationPage = () => { return null; } - const deleteOrg = () => { - return card.runAsync(organization.destroy()).then(navigateAfterLeaveOrganization); - }; - return (