From 2a380aca7e55c1f29e445d418edeabc44c879b0f Mon Sep 17 00:00:00 2001
From: Bigint <69431456+bigint@users.noreply.github.com>
Date: Thu, 20 Feb 2025 14:55:27 +0530
Subject: [PATCH] Enhance DeletePost component to handle optimistic
 transactions and update cache on post deletion

---
 .../components/Shared/Alert/DeletePost.tsx    | 41 +++++++++++++++----
 packages/types/enums.ts                       |  1 +
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/Shared/Alert/DeletePost.tsx b/apps/web/src/components/Shared/Alert/DeletePost.tsx
index e389db30ac49..6fd7570bb200 100644
--- a/apps/web/src/components/Shared/Alert/DeletePost.tsx
+++ b/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 () => {
diff --git a/packages/types/enums.ts b/packages/types/enums.ts
index 26a52066a963..d1750dee77de 100644
--- a/packages/types/enums.ts
+++ b/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",