perf: improve optimistic updates

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

@@ -15,33 +15,67 @@ interface LabelSelectorProps {
     selected: boolean;
     leftIcon: React.ReactNode;
   }[];
-  refetchCard: () => Promise<void>;
-  handleSelectLabel: (labelPublicId: string) => void;
   isLoading: boolean;
 }
 
 export default function LabelSelector({
   cardPublicId,
   labels,
-  refetchCard,
-  handleSelectLabel,
   isLoading,
 }: LabelSelectorProps) {
+  const utils = api.useUtils();
   const { openModal } = useModal();
   const { showPopup } = usePopup();
 
   const addOrRemoveLabel = api.card.addOrRemoveLabel.useMutation({
-    onSuccess: async () => {
-      await refetchCard();
+    onMutate: async (update) => {
+      await utils.card.byId.cancel();
+
+      const previousCard = utils.card.byId.getData({ cardPublicId });
+
+      utils.card.byId.setData({ cardPublicId }, (oldCard) => {
+        if (!oldCard) return oldCard;
+
+        const hasLabel = oldCard.labels.some(
+          (label) => label.publicId === update.labelPublicId,
+        );
+
+        const labelToAdd = oldCard.labels.find(
+          (label) => label.publicId === update.labelPublicId,
+        );
+
+        const updatedLabels = hasLabel
+          ? oldCard.labels.filter(
+              (label) => label.publicId !== update.labelPublicId,
+            )
+          : [
+              ...oldCard.labels,
+              {
+                publicId: update.labelPublicId,
+                name: labelToAdd?.name ?? "",
+                colourCode: labelToAdd?.colourCode ?? "",
+              },
+            ];
+
+        return {
+          ...oldCard,
+          labels: updatedLabels,
+        };
+      });
+
+      return { previousCard };
     },
-    onError: async () => {
-      await refetchCard();
+    onError: (_error, _newList, context) => {
+      utils.card.byId.setData({ cardPublicId }, context?.previousCard);
       showPopup({
         header: "Unable to update labels",
         message: "Please try again later, or contact customer support.",
         icon: "error",
       });
     },
+    onSettled: async () => {
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
   });
 
   const selectedLabels = labels.filter((label) => label.selected);
@@ -56,7 +90,6 @@ export default function LabelSelector({
         <CheckboxDropdown
           items={labels}
           handleSelect={(_, label) => {
-            handleSelectLabel(label.key);
             addOrRemoveLabel.mutate({ cardPublicId, labelPublicId: label.key });
           }}
           handleEdit={(labelPublicId) => openModal("EDIT_LABEL", labelPublicId)}

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

@@ -11,32 +11,51 @@ interface ListSelectorProps {
     value: string;
     selected: boolean;
   }[];
-  refetchCard: () => Promise<void>;
-  handleChangeList: (newListPublicId: string, newListName: string) => void;
   isLoading: boolean;
 }
 
 export default function ListSelector({
   cardPublicId,
   lists,
-  handleChangeList,
-  refetchCard,
   isLoading,
 }: ListSelectorProps) {
+  const utils = api.useUtils();
+
   const { showPopup } = usePopup();
 
   const updateCardList = api.card.reorder.useMutation({
-    onSuccess: async () => {
-      await refetchCard();
+    onMutate: async (newList) => {
+      await utils.card.byId.cancel();
+
+      const previousCard = utils.card.byId.getData({ cardPublicId });
+
+      utils.card.byId.setData({ cardPublicId }, (oldCard) => {
+        if (!oldCard) return oldCard;
+
+        return {
+          ...oldCard,
+          list: {
+            ...oldCard.list,
+            publicId: newList.newListPublicId,
+            name: oldCard.list?.name ?? "",
+            board: oldCard.list?.board ?? null,
+          },
+        };
+      });
+
+      return { previousCard };
     },
-    onError: async () => {
-      await refetchCard();
+    onError: (_error, _newList, context) => {
+      utils.card.byId.setData({ cardPublicId }, context?.previousCard);
       showPopup({
         header: "Unable to update list",
         message: "Please try again later, or contact customer support.",
         icon: "error",
       });
     },
+    onSettled: async () => {
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
   });
 
   const selectedList = lists.find((list) => list.selected);
@@ -51,7 +70,6 @@ export default function ListSelector({
         <CheckboxDropdown
           items={lists}
           handleSelect={(_, member) => {
-            handleChangeList(member.key, member.value);
             updateCardList.mutate({
               cardPublicId,
               newListPublicId: member.key,

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

@@ -17,34 +17,70 @@ interface MemberSelectorProps {
     leftIcon: React.ReactNode;
     imageUrl: string | undefined;
   }[];
-  handleSelectMember: (memberPublicId: string) => void;
-  refetchCard: () => Promise<void>;
   isLoading: boolean;
 }
 
 export default function MemberSelector({
   cardPublicId,
   members,
-  handleSelectMember,
-  refetchCard,
   isLoading,
 }: MemberSelectorProps) {
   const router = useRouter();
+  const utils = api.useUtils();
   const { openModal } = useModal();
   const { showPopup } = usePopup();
 
   const addOrRemoveMember = api.card.addOrRemoveMember.useMutation({
-    onSuccess: async () => {
-      await refetchCard();
+    onMutate: async (update) => {
+      await utils.card.byId.cancel();
+
+      const previousCard = utils.card.byId.getData({ cardPublicId });
+
+      utils.card.byId.setData({ cardPublicId }, (oldCard) => {
+        if (!oldCard) return oldCard;
+
+        const hasMember = oldCard.members.some(
+          (member) => member.publicId === update.workspaceMemberPublicId,
+        );
+
+        const memberToAdd = oldCard.members.find(
+          (member) => member.publicId === update.workspaceMemberPublicId,
+        );
+
+        const updatedMembers = hasMember
+          ? oldCard.members.filter(
+              (member) => member.publicId !== update.workspaceMemberPublicId,
+            )
+          : [
+              ...oldCard.members,
+              {
+                publicId: update.workspaceMemberPublicId,
+                user: {
+                  id: memberToAdd?.user?.id ?? "",
+                  name: memberToAdd?.user?.name ?? "",
+                },
+              },
+            ];
+
+        return {
+          ...oldCard,
+          members: updatedMembers,
+        };
+      });
+
+      return { previousCard };
     },
-    onError: async () => {
-      await refetchCard();
+    onError: (_error, _newList, context) => {
+      utils.card.byId.setData({ cardPublicId }, context?.previousCard);
       showPopup({
         header: "Unable to update members",
         message: "Please try again later, or contact customer support.",
         icon: "error",
       });
     },
+    onSettled: async () => {
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
   });
 
   const selectedMembers = members.filter((member) => member.selected);
@@ -64,7 +100,6 @@ export default function MemberSelector({
         <CheckboxDropdown
           items={members}
           handleSelect={(_, member) => {
-            handleSelectMember(member.key);
             addOrRemoveMember.mutate({
               cardPublicId,
               workspaceMemberPublicId: member.key,