From acb156e4004beb48152c615b0afa6dd42cb27b4f Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 25 Aug 2023 01:13:19 +0300
Subject: [PATCH] fix(clerk-js): Mutate membership requests after accept or
 reject

---
 .changeset/curly-carpets-visit.md             |  2 ++
 .../OrganizationProfile/RequestToJoinList.tsx | 32 +++++++++----------
 2 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/curly-carpets-visit.md

diff --git a/.changeset/curly-carpets-visit.md b/.changeset/curly-carpets-visit.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/curly-carpets-visit.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
index d78a6e3d0f..1ec22ef807 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
@@ -7,12 +7,14 @@ import { handleError } from '../../utils';
 import { DataTable, RowContainer } from './MemberListTable';
 
 const ITEMS_PER_PAGE = 10;
+
+const membershipRequestsParams = {
+  pageSize: ITEMS_PER_PAGE,
+};
 export const RequestToJoinList = () => {
   const card = useCardState();
   const { organization, membershipRequests } = useCoreOrganization({
-    membershipRequests: {
-      pageSize: ITEMS_PER_PAGE,
-    },
+    membershipRequests: membershipRequestsParams,
   });
 
   if (!organization) {
@@ -47,26 +49,24 @@ const RequestRow = withCardStateProvider(
   (props: { request: OrganizationMembershipRequestResource; onError: ReturnType<typeof useCardState>['setError'] }) => {
     const { request, onError } = props;
     const card = useCardState();
-    const { membershipRequests } = useCoreOrganization();
-
-    const mutateSwrState = () => {
-      const unstable__mutate = (membershipRequests as any).unstable__mutate;
-      if (unstable__mutate && typeof unstable__mutate === 'function') {
-        unstable__mutate();
-      }
-    };
+    const { membershipRequests } = useCoreOrganization({
+      membershipRequests: membershipRequestsParams,
+    });
 
     const onAccept = () => {
       return card
-        .runAsync(request.accept, 'accept')
-        .then(mutateSwrState)
+        .runAsync(async () => {
+          await request.accept();
+          await (membershipRequests as any).unstable__mutate?.();
+        }, 'accept')
         .catch(err => handleError(err, [], onError));
     };
-
     const onReject = () => {
       return card
-        .runAsync(request.reject, 'reject')
-        .then(mutateSwrState)
+        .runAsync(async () => {
+          await request.reject();
+          await (membershipRequests as any).unstable__mutate?.();
+        }, 'reject')
         .catch(err => handleError(err, [], onError));
     };