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

…ith Gate (#2147)
clerk · Nov 17, 2023 · 1ddffb6 · 1ddffb6
1 parent deac67c
commit 1ddffb6
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 56 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/...s/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/...s/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 (
-      <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 =
+    (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
+
+  return (
+    <NotificationCountBadge
+      containerSx={t => ({
+        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
@@ -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 (
-      <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 =
+    (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
+
+  return (
+    <NotificationCountBadge
+      containerSx={t => ({
+        marginLeft: `${t.space.$2}`,
+      })}
+      notificationCount={notificationCount}
+    />
+  );
+};