fix(clerk-js): Avoid wrapping NotificationCountBadge of OrgSwitcher w…

…ith Gate (#2147) (#2157)
clerk · Nov 17, 2023 · e0bfc5a · e0bfc5a
1 parent 203def1
commit e0bfc5a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 29 deletions.
diff --git a/.changeset/brown-clouds-divide.md 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/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,33 +72,31 @@ 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 =
-      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-      (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
-
-    return (
-      <NotificationCountBadge
-        containerSx={t => ({
-          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 =
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
+
+  return (
+    <NotificationCountBadge
+      containerSx={t => ({
+        marginLeft: `${t.space.$2}`,
+      })}
+      notificationCount={notificationCount}
+    />
+  );
+};