From 676d23a5924f020812574c3c1df57645f659ce0e Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 23 Nov 2023 13:49:12 +0200
Subject: [PATCH] fix(clerk-js): Revalidate invitations table after invitation
 screen submit (#2195)

---
 .changeset/grumpy-suns-boil.md                       |  5 +++++
 .../OrganizationProfile/InviteMembersForm.tsx        | 12 ++++++++++--
 .../OrganizationProfile/InviteMembersForm.tsx        | 12 ++++++++++--
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/grumpy-suns-boil.md

diff --git a/.changeset/grumpy-suns-boil.md b/.changeset/grumpy-suns-boil.md
new file mode 100644
index 0000000000..de80b99723
--- /dev/null
+++ b/.changeset/grumpy-suns-boil.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Revalidate invitations table after invitation screen submit.
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
index 52a50ec204..938e377b26 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
@@ -25,7 +25,12 @@ type InviteMembersFormProps = {
 export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const { navigate } = useRouter();
   const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props;
-  const { organization } = useCoreOrganization();
+  const { organization, invitations } = useCoreOrganization({
+    invitations: {
+      pageSize: 10,
+      keepPreviousData: true,
+    },
+  });
   const card = useCardState();
   const { t, locale } = useLocalizations();
   const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);
@@ -73,7 +78,10 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
         emailAddresses: emailAddressField.value.split(','),
         role: submittedData.get('role') as MembershipRole,
       })
-      .then(onSuccess)
+      .then(async () => {
+        await invitations?.revalidate?.();
+        return onSuccess();
+      })
       .catch(err => {
         if (isClerkAPIResponseError(err)) {
           removeInvalidEmails(err.errors[0]);
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
index 52a50ec204..938e377b26 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
@@ -25,7 +25,12 @@ type InviteMembersFormProps = {
 export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const { navigate } = useRouter();
   const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props;
-  const { organization } = useCoreOrganization();
+  const { organization, invitations } = useCoreOrganization({
+    invitations: {
+      pageSize: 10,
+      keepPreviousData: true,
+    },
+  });
   const card = useCardState();
   const { t, locale } = useLocalizations();
   const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);
@@ -73,7 +78,10 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
         emailAddresses: emailAddressField.value.split(','),
         role: submittedData.get('role') as MembershipRole,
       })
-      .then(onSuccess)
+      .then(async () => {
+        await invitations?.revalidate?.();
+        return onSuccess();
+      })
       .catch(err => {
         if (isClerkAPIResponseError(err)) {
           removeInvalidEmails(err.errors[0]);