feat: add restore functionality for scheduled article deletions and improve toast handling

Author: kingRayhan

src/app/dashboard/_components/ArticleList.tsx

@@ -11,15 +11,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import VisibilitySensor from "@/components/VisibilitySensor";
 import { useTranslation } from "@/i18n/use-translation";
-import { formattedTime } from "@/lib/utils";
+import { actionPromisify, formattedTime } from "@/lib/utils";
 import {
   CardStackIcon,
   DotsHorizontalIcon,
   Pencil1Icon,
   PlusIcon,
+  ReloadIcon,
 } from "@radix-ui/react-icons";
 
 import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
+import { differenceInHours } from "date-fns";
 import { TrashIcon } from "lucide-react";
 import Link from "next/link";
 
@@ -37,9 +39,28 @@ const ArticleList = () => {
     },
   });
 
-  // const deleteMutation = useMutation({
-  //   mutationFn: ac
-  // })
+  const deleteMutation = useMutation({
+    mutationFn: (article_id: string) =>
+      actionPromisify(articleActions.scheduleArticleDelete(article_id), {
+        enableToast: true,
+      }),
+    onSuccess() {
+      // TODO: optimistic update
+      feedInfiniteQuery.refetch();
+    },
+  });
+
+  const restoreMutation = useMutation({
+    mutationFn: (article_id: string) =>
+      actionPromisify(
+        articleActions.restoreShceduleDeletedArticle(article_id),
+        { enableToast: true }
+      ),
+    onSuccess() {
+      // TODO: optimistic update
+      feedInfiniteQuery.refetch();
+    },
+  });
 
   const appConfirm = useAppConfirm();
 
@@ -76,6 +97,17 @@ const ArticleList = () => {
                 >
                   {article.title}
                 </Link>
+                {article?.delete_scheduled_at && (
+                  <p className="text-destructive">
+                    Article will be deleted within{" "}
+                    {differenceInHours(
+                      new Date(article?.delete_scheduled_at!),
+                      new Date()
+                    )}{" "}
+                    hours
+                  </p>
+                )}
+
                 {article.is_published && (
                   <p className="text-sm text-muted-foreground">
                     {_t("Published on")} {formattedTime(article.published_at!)}
@@ -170,19 +202,33 @@ const ArticleList = () => {
                         </span>
                       </button>
                     </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => {
-                        appConfirm.show({
-                          title: _t("Sure to delete?"),
-                          labels: {
-                            confirm: _t("Delete"),
-                          },
-                        });
-                      }}
-                    >
-                      <TrashIcon />
-                      {_t("Delete")}
-                    </DropdownMenuItem>
+                    {article.delete_scheduled_at ? (
+                      <DropdownMenuItem
+                        onClick={() => {
+                          restoreMutation.mutate(article.id);
+                        }}
+                      >
+                        <ReloadIcon />
+                        {_t("Restore")}
+                      </DropdownMenuItem>
+                    ) : (
+                      <DropdownMenuItem
+                        onClick={() => {
+                          appConfirm.show({
+                            title: _t("Sure to delete?"),
+                            labels: {
+                              confirm: _t("Delete"),
+                            },
+                            onConfirm() {
+                              deleteMutation.mutate(article.id);
+                            },
+                          });
+                        }}
+                      >
+                        <TrashIcon />
+                        {_t("Delete")}
+                      </DropdownMenuItem>
+                    )}
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>

src/backend/services/article.actions.ts

@@ -217,6 +217,36 @@ export const scheduleArticleDelete = async (
   }
 };
 
+export const restoreShceduleDeletedArticle = async (
+  article_id: string
+): Promise<ActionResponse<unknown>> => {
+  try {
+    const session_userID = await authID();
+    if (!session_userID) {
+      throw new ActionException("Unauthorized");
+    }
+
+    const [permissibleArticle] = await persistenceRepository.article.find({
+      where: and(eq("id", article_id), eq("author_id", session_userID)),
+    });
+
+    if (!permissibleArticle) {
+      throw new ActionException("Unauthorized");
+    }
+
+    const updated = await persistenceRepository.article.update({
+      where: and(eq("id", article_id), eq("author_id", session_userID)),
+      data: { delete_scheduled_at: null },
+    });
+    return {
+      success: true as const,
+      data: updated.rows[0],
+    };
+  } catch (error) {
+    return handleActionException(error);
+  }
+};
+
 /**
  * Deletes an article from the database.
  *

src/lib/utils.ts

@@ -1,8 +1,8 @@
 import { ActionResponse } from "@/backend/models/action-contracts";
 import { clsx, type ClassValue } from "clsx";
-import { toast } from "sonner";
+import toast from "react-hot-toast";
 import { twMerge } from "tailwind-merge";
-import { z, ZodAnyDef, ZodObject } from "zod";
+import { z } from "zod";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -115,7 +115,15 @@ export function filterUndefined<T>(
 
 // Improved with automatic type inference
 export const actionPromisify = async <T = any>(
-  action: Promise<ActionResponse<T>>
+  action: Promise<ActionResponse<T>>,
+  options?: {
+    enableToast?: boolean;
+    toastOptions?: {
+      loading?: string;
+      success?: string;
+      error?: string;
+    };
+  }
 ): Promise<T> => {
   const promise = new Promise<T>(async (resolve, reject) => {
     try {
@@ -145,13 +153,13 @@ export const actionPromisify = async <T = any>(
     }
   });
 
-  // if (options?.withToast) {
-  //   toast.promise(promise, {
-  //     loading: options?.messages?.loading ?? "Loading...",
-  //     success: options?.messages?.success ?? "Success!",
-  //     error: (errorMsg: string) => errorMsg || "Operation failed",
-  //   });
-  // }
+  if (options?.enableToast) {
+    toast.promise(promise, {
+      loading: options?.toastOptions?.loading ?? "Loading...",
+      success: options?.toastOptions?.success ?? "Success!",
+      error: (errorMsg: string) => errorMsg || "Operation failed",
+    });
+  }
 
   return promise;
 };