diff --git a/.changeset/brown-clouds-divide.md b/.changeset/brown-clouds-divide.md new file mode 100644 index 0000000000..0674f8f48d --- /dev/null +++ b/.changeset/brown-clouds-divide.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +A bug fix for prefetching data for OrganizationSwitcher and correctly displaying a notification count in the switcher as well. diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx index 8be2e4a9e0..f7a02c5cb1 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx @@ -1,6 +1,6 @@ import { forwardRef } from 'react'; -import { NotificationCountBadge, withGate } from '../../common'; +import { NotificationCountBadge, useGate } from '../../common'; import { useCoreOrganization, useCoreOrganizationList, @@ -72,32 +72,30 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( ); }), ); -const NotificationCountBadgeSwitcherTrigger = withGate( - () => { - /** - * Prefetch user invitations and suggestions - */ - const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams); - const { organizationSettings } = useEnvironment(); - const isDomainsEnabled = organizationSettings?.domains?.enabled; - const { membershipRequests } = useCoreOrganization({ - membershipRequests: isDomainsEnabled || undefined, - }); - const notificationCount = - (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0); - - return ( - ({ - marginLeft: `${t.space.$2}`, - })} - notificationCount={notificationCount} - /> - ); - }, - { - // if the user is not able to accept a request we should not notify them +const NotificationCountBadgeSwitcherTrigger = () => { + /** + * Prefetch user invitations and suggestions + */ + const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams); + const { organizationSettings } = useEnvironment(); + const { isAuthorizedUser: canAcceptRequests } = useGate({ permission: 'org:sys_memberships:manage', - }, -); + }); + const isDomainsEnabled = organizationSettings?.domains?.enabled; + const { membershipRequests } = useCoreOrganization({ + membershipRequests: (isDomainsEnabled && canAcceptRequests) || undefined, + }); + + const notificationCount = + (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0); + + return ( + ({ + marginLeft: `${t.space.$2}`, + })} + notificationCount={notificationCount} + /> + ); +}; diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx index 8be2e4a9e0..f7a02c5cb1 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx @@ -1,6 +1,6 @@ import { forwardRef } from 'react'; -import { NotificationCountBadge, withGate } from '../../common'; +import { NotificationCountBadge, useGate } from '../../common'; import { useCoreOrganization, useCoreOrganizationList, @@ -72,32 +72,30 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( ); }), ); -const NotificationCountBadgeSwitcherTrigger = withGate( - () => { - /** - * Prefetch user invitations and suggestions - */ - const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams); - const { organizationSettings } = useEnvironment(); - const isDomainsEnabled = organizationSettings?.domains?.enabled; - const { membershipRequests } = useCoreOrganization({ - membershipRequests: isDomainsEnabled || undefined, - }); - const notificationCount = - (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0); - - return ( - ({ - marginLeft: `${t.space.$2}`, - })} - notificationCount={notificationCount} - /> - ); - }, - { - // if the user is not able to accept a request we should not notify them +const NotificationCountBadgeSwitcherTrigger = () => { + /** + * Prefetch user invitations and suggestions + */ + const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams); + const { organizationSettings } = useEnvironment(); + const { isAuthorizedUser: canAcceptRequests } = useGate({ permission: 'org:sys_memberships:manage', - }, -); + }); + const isDomainsEnabled = organizationSettings?.domains?.enabled; + const { membershipRequests } = useCoreOrganization({ + membershipRequests: (isDomainsEnabled && canAcceptRequests) || undefined, + }); + + const notificationCount = + (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0); + + return ( + ({ + marginLeft: `${t.space.$2}`, + })} + notificationCount={notificationCount} + /> + ); +};