feat: optimisic card updates

apps/web/src/views/card/components/MemberSelector.tsx

@@ -5,6 +5,7 @@ import { HiMiniPlus } from "react-icons/hi2";
 import Avatar from "~/components/Avatar";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 
 interface MemberSelectorProps {
@@ -16,16 +17,19 @@ interface MemberSelectorProps {
     leftIcon: React.ReactNode;
     imageUrl: string | undefined;
   }[];
+  handleSelectMember: (memberPublicId: string) => void;
   isLoading: boolean;
 }
 
 export default function MemberSelector({
   cardPublicId,
   members,
+  handleSelectMember,
   isLoading,
 }: MemberSelectorProps) {
   const router = useRouter();
   const { openModal } = useModal();
+  const { showPopup } = usePopup();
   const utils = api.useUtils();
 
   const refetchCard = () => utils.card.byId.refetch({ cardPublicId });
@@ -34,6 +38,14 @@ export default function MemberSelector({
     onSuccess: async () => {
       await refetchCard();
     },
+    onError: async () => {
+      await refetchCard();
+      showPopup({
+        header: "Unable to update members",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
+    },
   });
 
   const selectedMembers = members.filter((member) => member.selected);
@@ -52,12 +64,13 @@ export default function MemberSelector({
       ) : (
         <CheckboxDropdown
           items={members}
-          handleSelect={(_, member) =>
+          handleSelect={(_, member) => {
+            handleSelectMember(member.key);
             addOrRemoveMember.mutate({
               cardPublicId,
               workspaceMemberPublicId: member.key,
-            })
-          }
+            });
+          }}
           handleCreate={handleInviteMember}
           createNewItemLabel="Invite member"
           asChild