@btst/stack 1.1.4 → 1.1.6

package/src/plugins/blog/client/components/forms/post-forms.tsx

@@ -23,8 +23,20 @@ import {
 	useCreatePost,
 	useSuspensePost,
 	useUpdatePost,
+	useDeletePost,
 } from "../../hooks/blog-hooks";
 import { slugify } from "../../../utils";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@workspace/ui/components/alert-dialog";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
@@ -404,6 +416,7 @@ type EditPostFormProps = {
 	postSlug: string;
 	onClose: () => void;
 	onSuccess: (post: { slug: string; published: boolean }) => void;
+	onDelete?: () => void;
 };
 
 const editPostFormPropsAreEqual = (
@@ -413,6 +426,7 @@ const editPostFormPropsAreEqual = (
 	if (prevProps.postSlug !== nextProps.postSlug) return false;
 	if (prevProps.onClose !== nextProps.onClose) return false;
 	if (prevProps.onSuccess !== nextProps.onSuccess) return false;
+	if (prevProps.onDelete !== nextProps.onDelete) return false;
 	return true;
 };
 
@@ -420,8 +434,10 @@ const EditPostFormComponent = ({
 	postSlug,
 	onClose,
 	onSuccess,
+	onDelete,
 }: EditPostFormProps) => {
 	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 	const { localization } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
@@ -457,6 +473,9 @@ const EditPostFormComponent = ({
 		error: updatePostError,
 	} = useUpdatePost();
 
+	const { mutateAsync: deletePost, isPending: isDeletingPost } =
+		useDeletePost();
+
 	type EditPostFormValues = z.input<typeof schema>;
 	const onSubmit = async (data: EditPostFormValues) => {
 		// Wait for mutation to complete, including refresh
@@ -489,6 +508,21 @@ const EditPostFormComponent = ({
 		});
 	};
 
+	const handleDelete = async () => {
+		if (!post?.id) return;
+
+		await deletePost({ id: post.id });
+		toast.success(localization.BLOG_FORMS_TOAST_DELETE_SUCCESS);
+		setDeleteDialogOpen(false);
+
+		// Call onDelete callback if provided, otherwise use onClose
+		if (onDelete) {
+			onDelete();
+		} else {
+			onClose();
+		}
+	};
+
 	const form = useForm<z.input<typeof schema>>({
 		resolver: zodResolver(schema),
 		defaultValues: {
@@ -508,20 +542,64 @@ const EditPostFormComponent = ({
 	}
 
 	return (
-		<PostFormBody
-			form={form}
-			onSubmit={onSubmit}
-			submitLabel={
-				isUpdatingPost
-					? localization.BLOG_FORMS_SUBMIT_UPDATE_PENDING
-					: localization.BLOG_FORMS_SUBMIT_UPDATE_IDLE
-			}
-			onCancel={onClose}
-			disabled={isUpdatingPost || featuredImageUploading}
-			errorMessage={updatePostError?.message}
-			setFeaturedImageUploading={setFeaturedImageUploading}
-			initialSlugTouched={!!post?.slug}
-		/>
+		<>
+			<PostFormBody
+				form={form}
+				onSubmit={onSubmit}
+				submitLabel={
+					isUpdatingPost
+						? localization.BLOG_FORMS_SUBMIT_UPDATE_PENDING
+						: localization.BLOG_FORMS_SUBMIT_UPDATE_IDLE
+				}
+				onCancel={onClose}
+				disabled={isUpdatingPost || featuredImageUploading}
+				errorMessage={updatePostError?.message}
+				setFeaturedImageUploading={setFeaturedImageUploading}
+				initialSlugTouched={!!post?.slug}
+			/>
+			<div className="w-full">
+				<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+					<AlertDialogTrigger asChild>
+						<Button
+							variant="destructive"
+							type="button"
+							disabled={
+								isUpdatingPost || featuredImageUploading || isDeletingPost
+							}
+							className="mt-4"
+						>
+							{localization.BLOG_FORMS_DELETE_BUTTON}
+						</Button>
+					</AlertDialogTrigger>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>
+								{localization.BLOG_FORMS_DELETE_DIALOG_TITLE}
+							</AlertDialogTitle>
+							<AlertDialogDescription>
+								{localization.BLOG_FORMS_DELETE_DIALOG_DESCRIPTION}
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel disabled={isDeletingPost}>
+								{localization.BLOG_FORMS_DELETE_DIALOG_CANCEL}
+							</AlertDialogCancel>
+							<AlertDialogAction
+								onClick={(e) => {
+									e.preventDefault();
+									void handleDelete();
+								}}
+								disabled={isDeletingPost}
+							>
+								{isDeletingPost
+									? localization.BLOG_FORMS_DELETE_PENDING
+									: localization.BLOG_FORMS_DELETE_DIALOG_CONFIRM}
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			</div>
+		</>
 	);
 };
 

package/src/plugins/blog/client/components/pages/edit-post-page.internal.tsx

@@ -44,6 +44,11 @@ export function EditPostPage({ slug }: { slug: string }) {
 		navigate(`${basePath}/blog/${post.slug}`);
 	};
 
+	const handleDelete = () => {
+		// Navigate to blog list after deletion
+		navigate(`${basePath}/blog`);
+	};
+
 	return (
 		<PageWrapper className="gap-6" testId="edit-post-page">
 			<PageHeader
@@ -54,6 +59,7 @@ export function EditPostPage({ slug }: { slug: string }) {
 				postSlug={slug}
 				onClose={handleClose}
 				onSuccess={handleSuccess}
+				onDelete={handleDelete}
 			/>
 		</PageWrapper>
 	);

package/src/plugins/blog/client/hooks/blog-hooks.tsx

@@ -438,6 +438,44 @@ export function useUpdatePost() {
 	});
 }
 
+/** Delete a post by id */
+export function useDeletePost() {
+	const { refresh, apiBaseURL, apiBasePath } =
+		usePluginOverrides<BlogPluginOverrides>("blog");
+
+	const client = createApiClient<BlogApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+
+	const queryClient = useQueryClient();
+	const queries = createBlogQueryKeys(client);
+
+	return useMutation<{ success: boolean }, Error, { id: string }>({
+		mutationKey: [...queries.posts._def, "delete"],
+		mutationFn: async ({ id }: { id: string }) => {
+			const response = await client(`@delete/posts/:id`, {
+				method: "DELETE",
+				params: { id },
+			});
+			return response.data as { success: boolean };
+		},
+		onSuccess: async () => {
+			// Invalidate all post lists and detail caches - wait for completion
+			await queryClient.invalidateQueries({
+				queryKey: queries.posts._def,
+			});
+			await queryClient.invalidateQueries({
+				queryKey: queries.drafts.list._def,
+			});
+			// Refresh server-side cache (Next.js router cache)
+			if (refresh) {
+				await refresh();
+			}
+		},
+	});
+}
+
 /**
  * Hook for searching posts by a free-text query. Uses `usePosts` under the hood.
  * Debounces the query and preserves last successful results to avoid flicker.

package/src/plugins/blog/client/localization/blog-forms.ts

@@ -25,8 +25,18 @@ export const BLOG_FORMS = {
 
 	BLOG_FORMS_TOAST_CREATE_SUCCESS: "Post created successfully",
 	BLOG_FORMS_TOAST_UPDATE_SUCCESS: "Post updated successfully",
+	BLOG_FORMS_TOAST_DELETE_SUCCESS: "Post deleted successfully",
 	BLOG_FORMS_LOADING_POST: "Loading post...",
 
+	// Delete post
+	BLOG_FORMS_DELETE_BUTTON: "Delete Post",
+	BLOG_FORMS_DELETE_DIALOG_TITLE: "Delete Post",
+	BLOG_FORMS_DELETE_DIALOG_DESCRIPTION:
+		"Are you sure you want to delete this post? This action cannot be undone.",
+	BLOG_FORMS_DELETE_DIALOG_CANCEL: "Cancel",
+	BLOG_FORMS_DELETE_DIALOG_CONFIRM: "Delete",
+	BLOG_FORMS_DELETE_PENDING: "Deleting...",
+
 	// Markdown editor
 	BLOG_FORMS_EDITOR_PLACEHOLDER: "Write something...",
 

package/src/plugins/client/index.ts

@@ -42,10 +42,14 @@ export { createClient } from "better-call/client";
  * });
  * ```
  *
- * @template TPlugin - The exact plugin definition (auto-inferred)
+ * @template TOverrides - The shape of overridable components/functions this plugin requires
+ * @template TRoutes - The exact shape of routes this plugin provides (preserves keys and route types)
  */
 export function defineClientPlugin<
-	TPlugin extends ClientPlugin<any, Record<string, Route>>,
->(plugin: TPlugin): TPlugin {
+	TOverrides = Record<string, never>,
+	TRoutes extends Record<string, Route> = Record<string, Route>,
+>(
+	plugin: ClientPlugin<TOverrides, TRoutes>,
+): ClientPlugin<TOverrides, TRoutes> {
 	return plugin;
 }