Refactor to use React Query mutations

apps/web/app/(org)/dashboard/_components/Notifications/NotificationHeader.tsx

@@ -1,39 +1,34 @@
 import { faCheckDouble } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import clsx from "clsx";
-import { useState } from "react";
 import { toast } from "sonner";
 import { markAsRead } from "@/actions/notifications/mark-as-read";
 
 export const NotificationHeader = () => {
-	const [loading, setLoading] = useState(false);
 	const queryClient = useQueryClient();
-
-	const markAsReadHandler = async () => {
-		try {
-			setLoading(true);
-			await markAsRead();
+	const mutation = useMutation({
+		mutationFn: () => markAsRead(),
+		onSuccess: () => {
 			toast.success("Notifications marked as read");
 			queryClient.invalidateQueries({
 				queryKey: ["notifications"],
 			});
-		} catch (error) {
+		},
+		onError: (error) => {
 			console.error("Error marking notifications as read:", error);
 			toast.error("Failed to mark notifications as read");
-		} finally {
-			setLoading(false);
-		}
-	};
+		},
+	});
 
 	return (
 		<div className="flex justify-between items-center px-6 py-3 rounded-t-xl border bg-gray-3 border-gray-4">
 			<p className="text-md text-gray-12">Notifications</p>
 			<div
-				onClick={markAsReadHandler}
+				onClick={() => mutation.mutate()}
 				className={clsx(
 					"flex gap-1 items-center transition-opacity duration-200 cursor-pointer hover:opacity-70",
-					loading ? "opacity-50 cursor-not-allowed" : "",
+					mutation.isPending ? "opacity-50 cursor-not-allowed" : "",
 				)}
 			>
 				<FontAwesomeIcon

apps/web/app/(org)/dashboard/caps/Caps.tsx

@@ -244,21 +244,21 @@ export const Caps = ({
 
 			return yield* fiber.await.pipe(Effect.flatten);
 		}),
-		onSuccess: Effect.fn(function* () {
+		onSuccess: () => {
 			setSelectedCaps([]);
 			router.refresh();
-		}),
+		},
 	});
 
 	const deleteCap = useEffectMutation({
 		mutationFn: (id: Video.VideoId) => withRpc((r) => r.VideoDelete(id)),
-		onSuccess: Effect.fn(function* () {
+		onSuccess: () => {
 			toast.success("Cap deleted successfully");
 			router.refresh();
-		}),
-		onError: Effect.fn(function* () {
+		},
+		onError: () => {
 			toast.error("Failed to delete cap");
-		}),
+		},
 	});
 
 	if (count === 0) return <EmptyCapState />;

apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx

@@ -17,6 +17,7 @@ import {
 	faVideo,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -27,7 +28,7 @@ import { ConfirmationDialog } from "@/app/(org)/dashboard/_components/Confirmati
 import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
 import { Tooltip } from "@/components/Tooltip";
 import { VideoThumbnail } from "@/components/VideoThumbnail";
-import { EffectRuntime } from "@/lib/EffectRuntime";
+import { useEffectMutation } from "@/lib/EffectRuntime";
 import { withRpc } from "@/lib/Rpcs";
 import { PasswordDialog } from "../PasswordDialog";
 import { SharingDialog } from "../SharingDialog";
@@ -97,31 +98,50 @@ export const CapCard = ({
 	);
 	const [copyPressed, setCopyPressed] = useState(false);
 	const [isDragging, setIsDragging] = useState(false);
-	const [isDownloading, setIsDownloading] = useState(false);
 	const { isSubscribed, setUpgradeModalOpen } = useDashboardContext();
 
 	const [confirmOpen, setConfirmOpen] = useState(false);
-	const [removing, setRemoving] = useState(false);
 
 	const router = useRouter();
 
-	const handleDeleteClick = (e: React.MouseEvent) => {
-		e.stopPropagation();
-		setConfirmOpen(true);
-	};
-
-	const confirmRemoveCap = async () => {
-		if (!onDelete) return;
-		try {
-			setRemoving(true);
-			await onDelete();
-		} catch (error) {
+	const downloadMutation = useMutation({
+		mutationFn: async () => {
+			const response = await downloadVideo(cap.id);
+			if (response.success && response.downloadUrl) {
+				const fetchResponse = await fetch(response.downloadUrl);
+				const blob = await fetchResponse.blob();
+
+				const blobUrl = window.URL.createObjectURL(blob);
+				const link = document.createElement("a");
+				link.href = blobUrl;
+				link.download = response.filename;
+				link.style.display = "none";
+				document.body.appendChild(link);
+				link.click();
+				document.body.removeChild(link);
+
+				window.URL.revokeObjectURL(blobUrl);
+			} else {
+				throw new Error("Failed to get download URL");
+			}
+		},
+	});
+
+	const deleteMutation = useMutation({
+		mutationFn: async () => {
+			await onDelete?.();
+		},
+		onError: (error) => {
 			console.error("Error deleting cap:", error);
-		} finally {
-			setRemoving(false);
+		},
+		onSettled: () => {
 			setConfirmOpen(false);
-		}
-	};
+		},
+	});
+
+	const duplicateMutation = useEffectMutation({
+		mutationFn: () => withRpc((r) => r.VideoDuplicate(cap.id)),
+	});
 
 	const handleSharingUpdated = () => {
 		router.refresh();
@@ -197,45 +217,18 @@ export const CapCard = ({
 	};
 
 	const handleDownload = async () => {
-		if (isDownloading) return;
-
-		setIsDownloading(true);
-
-		try {
-			toast.promise(
-				downloadVideo(cap.id).then(async (response) => {
-					if (response.success && response.downloadUrl) {
-						const fetchResponse = await fetch(response.downloadUrl);
-						const blob = await fetchResponse.blob();
-
-						const blobUrl = window.URL.createObjectURL(blob);
-						const link = document.createElement("a");
-						link.href = blobUrl;
-						link.download = response.filename;
-						link.style.display = "none";
-						document.body.appendChild(link);
-						link.click();
-						document.body.removeChild(link);
-
-						window.URL.revokeObjectURL(blobUrl);
-					}
-				}),
-				{
-					loading: "Preparing download...",
-					success: "Download started successfully",
-					error: (error) => {
-						if (error instanceof Error) {
-							return error.message;
-						}
-						return "Failed to download video - please try again.";
-					},
-				},
-			);
-		} catch (error) {
-			console.error("Download error:", error);
-		} finally {
-			setIsDownloading(false);
-		}
+		if (downloadMutation.isPending) return;
+
+		toast.promise(downloadMutation.mutateAsync(), {
+			loading: "Preparing download...",
+			success: "Download started successfully",
+			error: (error) => {
+				if (error instanceof Error) {
+					return error.message;
+				}
+				return "Failed to download video - please try again.";
+			},
+		});
 	};
 
 	const handleCardClick = (e: React.MouseEvent) => {
@@ -308,7 +301,7 @@ export const CapCard = ({
 						<CapCardButtons
 							capId={cap.id}
 							copyPressed={copyPressed}
-							isDownloading={isDownloading}
+							isDownloading={downloadMutation.isPending}
 							customDomain={customDomain}
 							domainVerified={domainVerified}
 							handleCopy={handleCopy}
@@ -340,17 +333,14 @@ export const CapCard = ({
 
 							<DropdownMenuContent align="end" sideOffset={5}>
 								<DropdownMenuItem
-									onClick={async () => {
-										try {
-											await EffectRuntime.runPromise(
-												withRpc((r) => r.VideoDuplicate(cap.id)),
-											);
-											toast.success("Cap duplicated successfully");
-											router.refresh();
-										} catch (error) {
-											toast.error("Failed to duplicate cap");
-										}
-									}}
+									onClick={() =>
+										toast.promise(duplicateMutation.mutateAsync(), {
+											loading: "Duplicating cap...",
+											success: "Cap duplicated successfully",
+											error: "Failed to duplicate cap",
+										})
+									}
+									disabled={duplicateMutation.isPending}
 									className="flex gap-2 items-center rounded-lg"
 								>
 									<FontAwesomeIcon className="size-3" icon={faCopy} />
@@ -376,7 +366,8 @@ export const CapCard = ({
 								</DropdownMenuItem>
 								<DropdownMenuItem
 									onClick={(e) => {
-										handleDeleteClick(e);
+										e.stopPropagation();
+										setConfirmOpen(true);
 									}}
 									className="flex gap-2 items-center rounded-lg"
 								>
@@ -392,8 +383,8 @@ export const CapCard = ({
 							description={`Are you sure you want to delete the cap "${cap.name}"? This action cannot be undone.`}
 							confirmLabel="Delete"
 							cancelLabel="Cancel"
-							loading={removing}
-							onConfirm={confirmRemoveCap}
+							loading={deleteMutation.isPending}
+							onConfirm={() => deleteMutation.mutate()}
 							onCancel={() => setConfirmOpen(false)}
 						/>
 					</div>

apps/web/app/(org)/dashboard/caps/components/Folder.tsx

@@ -3,6 +3,7 @@ import type { Folder } from "@cap/web-domain";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Fit, Layout, useRive } from "@rive-app/react-canvas";
+import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
 import { Effect } from "effect";
 import Link from "next/link";
@@ -45,6 +46,7 @@ const FolderCard = ({
 	const [isDragOver, setIsDragOver] = useState(false);
 	const [isMovingVideo, setIsMovingVideo] = useState(false);
 	const { activeOrganization } = useDashboardContext();
+
 	// Use a ref to track drag state to avoid re-renders during animation
 	const dragStateRef = useRef({
 		isDragging: false,
@@ -73,16 +75,14 @@ const FolderCard = ({
 
 	const deleteFolder = useEffectMutation({
 		mutationFn: (id: Folder.FolderId) => withRpc((r) => r.FolderDelete(id)),
-		onSuccess: Effect.fn(function* () {
+		onSuccess: () => {
 			router.refresh();
 			toast.success("Folder deleted successfully");
-		}),
-		onError: Effect.fn(function* () {
-			toast.error("Failed to delete folder");
-		}),
-		onSettled: Effect.fn(function* () {
 			setConfirmDeleteFolderOpen(false);
-		}),
+		},
+		onError: () => {
+			toast.error("Failed to delete folder");
+		},
 	});
 
 	useEffect(() => {

apps/web/app/(org)/dashboard/caps/components/SelectedCapsBar.tsx

@@ -25,10 +25,6 @@ export const SelectedCapsBar = ({
 }: SelectedCapsBarProps) => {
 	const [confirmOpen, setConfirmOpen] = useState(false);
 
-	const handleDeleteClick = () => {
-		setConfirmOpen(true);
-	};
-
 	const handleConfirmDelete = async () => {
 		await deleteSelectedCaps();
 		setConfirmOpen(false);
@@ -71,7 +67,7 @@ export const SelectedCapsBar = ({
 						</Button>
 						<Button
 							variant="destructive"
-							onClick={handleDeleteClick}
+							onClick={() => setConfirmOpen(true)}
 							disabled={isDeleting}
 							className="size-[40px] min-w-[unset] p-0"
 							spinner={isDeleting}