Enhance DeletePost component to handle optimistic transactions and up…

…date cache on post deletion

apps/web/src/components/Shared/Alert/DeletePost.tsx

@@ -1,26 +1,51 @@
+import type { ApolloCache } from "@apollo/client";
+import errorToast from "@helpers/errorToast";
 import { Errors } from "@hey/data/errors";
 import { useDeletePostMutation } from "@hey/indexer";
+import { OptimisticTxType } from "@hey/types/enums";
 import { Alert } from "@hey/ui";
 import type { FC } from "react";
 import { toast } from "react-hot-toast";
+import useTransactionLifecycle from "src/hooks/useTransactionLifecycle";
 import { useDeletePostAlertStore } from "src/store/non-persisted/alert/useDeletePostAlertStore";
 import { useAccountStatus } from "src/store/non-persisted/useAccountStatus";
+import { addSimpleOptimisticTransaction } from "src/store/persisted/useTransactionStore";
 
 const DeletePost: FC = () => {
   const { deletingPost, setShowPostDeleteAlert, showPostDeleteAlert } =
     useDeletePostAlertStore();
   const { isSuspended } = useAccountStatus();
+  const handleTransactionLifecycle = useTransactionLifecycle();
+
+  const updateCache = (cache: ApolloCache<any>) => {
+    cache.evict({
+      id: `${deletingPost?.__typename}:${deletingPost?.id}`
+    });
+  };
+
+  const onCompleted = (hash: string) => {
+    addSimpleOptimisticTransaction(hash, OptimisticTxType.DELETE_POST);
+    setShowPostDeleteAlert(false, null);
+    toast.success("Post deleted");
+  };
+
+  const onError = (error: any) => {
+    errorToast(error);
+  };
 
   const [deletePost, { loading }] = useDeletePostMutation({
-    onCompleted: () => {
-      setShowPostDeleteAlert(false, null);
-      toast.success("Post deleted");
-    },
-    update: (cache) => {
-      cache.evict({
-        id: `${deletingPost?.__typename}:${deletingPost?.id}`
+    onCompleted: async ({ deletePost }) => {
+      if (deletePost.__typename === "DeletePostResponse") {
+        return onCompleted(deletePost.hash);
+      }
+
+      return await handleTransactionLifecycle({
+        transactionData: deletePost,
+        onCompleted,
+        onError
       });
-    }
+    },
+    update: updateCache
   });
 
   const deletePublication = async () => {

packages/types/enums.ts

@@ -7,6 +7,7 @@ export enum OptimisticTxType {
   CREATE_COLLECT = "CREATE_COLLECT",
   CREATE_TIP = "CREATE_TIP",
   DISABLE_COLLECT = "DISABLE_COLLECT",
+  DELETE_POST = "DELETE_POST",
 
   // Account-related actions
   FOLLOW_ACCOUNT = "FOLLOW_ACCOUNT",