From 562309d24b5ff4a5467fc08ee7e79c948dc27faa Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 17 Sep 2024 11:19:45 +0100
Subject: [PATCH] fix: add optimistic UI for deleting member on org user table
 (#16662)

* add optimistic UI for deleting member

* Update packages/features/users/components/UserTable/DeleteMemberModal.tsx

* Remove previous Value

* Update packages/features/users/components/UserTable/DeleteMemberModal.tsx

* Update packages/features/users/components/UserTable/DeleteMemberModal.tsx

* fix onError

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
---
 .../UserTable/DeleteMemberModal.tsx           | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/features/users/components/UserTable/DeleteMemberModal.tsx b/packages/features/users/components/UserTable/DeleteMemberModal.tsx
index ee0e2b3d21..e5f1ff4b91 100644
--- a/packages/features/users/components/UserTable/DeleteMemberModal.tsx
+++ b/packages/features/users/components/UserTable/DeleteMemberModal.tsx
@@ -13,13 +13,25 @@ export function DeleteMemberModal({ state, dispatch }: { state: State; dispatch:
   const utils = trpc.useUtils();
   const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({
     onSuccess() {
-      // We don't need to wait for invalidate to finish
-      Promise.all([
-        utils.viewer.teams.get.invalidate(),
-        utils.viewer.eventTypes.invalidate(),
-        utils.viewer.organizations.listMembers.invalidate(),
-      ]);
+      // @ts-expect-error rows can't be of type never[] but oldData can be due to the filter
+      utils.viewer.organizations.listMembers.setInfiniteData({ limit: 10, searchTerm: "" }, (oldData) => {
+        if (!oldData) return oldData;
+        return {
+          ...oldData,
+          pages: oldData.pages.map((page) => ({
+            ...page,
+            rows: page.rows.filter((member) => member.id !== state.deleteMember.user?.id),
+          })),
+        };
+      });
+
+      // Existing invalidations
+      Promise.all([utils.viewer.teams.get.invalidate(), utils.viewer.eventTypes.invalidate()]);
+
       showToast(t("success"), "success");
+
+      // Close the modal after successful deletion
+      dispatch({ type: "CLOSE_MODAL" });
     },
     async onError(err) {
       showToast(err.message, "error");