Effect: Port UpdateFolder

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

@@ -9,7 +9,6 @@ import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { moveVideoToFolder } from "@/actions/folders/moveVideoToFolder";
-import { updateFolder } from "@/actions/folders/updateFolder";
 import { useEffectMutation } from "@/lib/EffectRuntime";
 import { withRpc } from "@/lib/Rpcs";
 import { ConfirmationDialog } from "../../_components/ConfirmationDialog";
@@ -83,6 +82,17 @@ const FolderCard = ({
 		},
 	});
 
+	const updateFolder = useEffectMutation({
+		mutationFn: (data: Folder.FolderUpdate) =>
+			withRpc((r) => r.FolderUpdate(data)),
+		onSuccess: () => {
+			toast.success("Folder name updated successfully");
+			router.refresh();
+		},
+		onError: () => toast.error("Failed to update folder name"),
+		onSettled: () => setIsRenaming(false),
+	});
+
 	useEffect(() => {
 		if (isRenaming && nameRef.current) {
 			nameRef.current.focus();
@@ -176,17 +186,6 @@ const FolderCard = ({
 		};
 	}, [id, name, rive, isDragOver]);
 
-	const updateFolderNameHandler = async () => {
-		try {
-			await updateFolder({ folderId: id, name: updateName });
-			toast.success("Folder name updated successfully");
-		} catch (error) {
-			toast.error("Failed to update folder name");
-		} finally {
-			setIsRenaming(false);
-		}
-	};
-
 	const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -342,18 +341,22 @@ const FolderCard = ({
 								rows={1}
 								value={updateName}
 								onChange={(e) => setUpdateName(e.target.value)}
-								onBlur={async () => {
+								onBlur={() => {
 									setIsRenaming(false);
-									if (updateName.trim() !== name) {
-										await updateFolderNameHandler();
-									}
+									if (updateName.trim() !== name)
+										updateFolder.mutate({
+											id,
+											name: updateName.trim(),
+										});
 								}}
-								onKeyDown={async (e) => {
+								onKeyDown={(e) => {
 									if (e.key === "Enter") {
 										setIsRenaming(false);
-										if (updateName.trim() !== name) {
-											await updateFolderNameHandler();
-										}
+										if (updateName.trim() !== name)
+											updateFolder.mutate({
+												id,
+												name: updateName.trim(),
+											});
 									}
 								}}
 								className="w-full resize-none bg-transparent border-none focus:outline-none
@@ -364,7 +367,7 @@ const FolderCard = ({
 								onClick={(e) => {
 									e.preventDefault();
 									e.stopPropagation();
-									setIsRenaming(true);
+									setIsRenaming(false);
 								}}
 							>
 								<p className="text-[15px] truncate text-gray-12 w-full max-w-[116px] m-0 p-0 h-[22px] leading-[22px] font-normal tracking-normal">

packages/web-backend/src/Folders/FoldersRepo.ts

@@ -0,0 +1,74 @@
+import { nanoId } from "@cap/database/helpers";
+import * as Db from "@cap/database/schema";
+import { Folder } from "@cap/web-domain";
+import * as Dz from "drizzle-orm";
+import { Effect, Option } from "effect";
+import type { Schema } from "effect/Schema";
+import { Database } from "../Database.ts";
+
+export type CreateFolderInput = Omit<Schema.Type<typeof Folder.Folder>, "id">;
+
+export class FoldersRepo extends Effect.Service<FoldersRepo>()("FoldersRepo", {
+	effect: Effect.gen(function* () {
+		const db = yield* Database;
+
+		/**
+		 * Gets a `Folder` by its ID.
+		 */
+		const getById = (id: Folder.FolderId) =>
+			Effect.gen(function* () {
+				const [folder] = yield* db.execute((db) =>
+					db.select().from(Db.folders).where(Dz.eq(Db.folders.id, id)),
+				);
+
+				return Option.fromNullable(folder).pipe(
+					Option.map((f) => Folder.Folder.decodeSync(f)),
+				);
+			});
+
+		const delete_ = (id: Folder.FolderId) =>
+			db.execute((db) => db.delete(Db.folders).where(Dz.eq(Db.folders.id, id)));
+
+		const create = (data: CreateFolderInput) =>
+			Effect.gen(function* () {
+				const id = Folder.FolderId.make(nanoId());
+
+				yield* db.execute((db) =>
+					db.insert(Db.folders).values([
+						{
+							...data,
+							id,
+							parentId: Option.getOrNull(data.parentId ?? Option.none()),
+							spaceId: Option.getOrNull(data.spaceId ?? Option.none()),
+						},
+					]),
+				);
+
+				return id;
+			});
+
+		const update = (id: Folder.FolderId, data: Partial<CreateFolderInput>) =>
+			Effect.gen(function* () {
+				yield* db.execute((db) =>
+					db
+						.update(Db.folders)
+						.set({
+							...data,
+							parentId: data.parentId
+								? Option.getOrNull(data.parentId)
+								: undefined,
+							spaceId: data.spaceId
+								? Option.getOrNull(data.spaceId)
+								: undefined,
+							updatedAt: new Date(),
+						})
+						.where(Dz.eq(Db.folders.id, id)),
+				);
+
+				return yield* getById(id);
+			});
+
+		return { getById, delete: delete_, create, update };
+	}),
+	dependencies: [Database.Default],
+}) {}

packages/web-backend/src/Folders/FoldersRpcs.ts

@@ -4,7 +4,7 @@
 import { Folders } from "./index.ts";
 
 export const FolderRpcsLive = Folder.FolderRpcs.toLayer(
 	Effect.gen(function* () {
 		const folders = yield* Folders;
 
 		return {
@@ -26,6 +26,15 @@
 							() => new InternalError({ type: "database" }),
 						),
 					),
+			FolderUpdate: (data) =>
+				folders
+					.update(data.id, data)
+					.pipe(
+						Effect.catchTag(
+							"DatabaseError",
+							() => new InternalError({ type: "database" }),
+						),
+					),
 		};
 	}),
 );

packages/web-backend/src/Folders/index.ts

@@ -5,6 +5,7 @@
 import { Effect, Option } from "effect";
 import { Database, type DatabaseError } from "../Database.ts";
 import { FoldersPolicy } from "./FoldersPolicy.ts";
+import { revalidatePath } from "next/cache";
 
 // @effect-diagnostics-next-line leakingRequirements:off
 export class Folders extends Effect.Service<Folders>()("Folders", {
@@ -107,6 +108,7 @@
 
 				return new Folder.Folder(folder);
 			}),
+
 			/**
 			 * Deletes a folder and all its subfolders. Videos inside the folders will be
 			 * relocated to the root of the collection (space or My Caps) they're in
@@ -122,6 +124,75 @@
 
 				yield* deleteFolder(folder);
 			}),
+
+			update: Effect.fn("Folders.update")(function* (
+				folderId: Folder.FolderId,
+				data: Folder.FolderUpdate,
+			) {
+				const user = yield* CurrentUser;
+
+				const [folder] = yield* db
+					.execute((db) =>
+						db.select().from(Db.folders).where(Dz.eq(Db.folders.id, folderId)),
+					)
+					.pipe(Policy.withPolicy(policy.canEdit(folderId)));
+				if (!folder) return yield* new Folder.NotFoundError();
+
+				// If parentId is provided and not null, verify it exists and belongs to the same organization
+				if (data.parentId) {
+					// Check that we're not creating a circular reference
+					if (data.parentId === folderId)
+						return yield* new Folder.RecursiveDefinitionError();
+
+					const [parentFolder] = yield* db.execute((db) =>
+						db
+							.select()
+							.from(Db.folders)
+							.where(
+								Dz.and(
+									Dz.eq(Db.folders.id, data.parentId),
+									Dz.eq(Db.folders.organizationId, user.activeOrganizationId),
+								),
+							),
+					);
+
+					if (!parentFolder) return yield* new Folder.NotFoundError();
+
+					// Check for circular references in the folder hierarchy
+					let currentParentId = parentFolder.parentId;
+					while (currentParentId) {
+						if (currentParentId === folderId) {
+							return yield* new Folder.RecursiveDefinitionError();
+						}
+
+						const [nextParent] = yield* db.execute((db) =>
+							db
+								.select()
+								.from(Db.folders)
+								.where(Dz.eq(Db.folders.id, currentParentId)),
+						);
+
+						if (!nextParent) break;
+						currentParentId = nextParent.parentId;
+					}
+				}
+
+				yield* db
+					.execute((db) =>
+						db
+							.update(Db.folders)
+							.set({
+								...(data.name ? { name: data.name } : {}),
+								...(data.color ? { color: data.color } : {}),
+								...(data.parentId ? { parentId: data.parentId } : {}),
+							})
+							.where(Dz.eq(Db.folders.id, folderId)),
+					)
+					.pipe(Policy.withPolicy(policy.canEdit(folderId)));
+
+				revalidatePath(`/dashboard/caps`);
+				revalidatePath(`/dashboard/folder/${folderId}`);
+			}),
 		};
 	}),
 	dependencies: [FoldersPolicy.Default, Database.Default],

packages/web-domain/src/Folder.ts

@@ -1,5 +1,5 @@
 import { Rpc, RpcGroup } from "@effect/rpc";
-import { Schema } from "effect";
+import { Effect, Schema } from "effect";
 
 import { RpcAuthMiddleware } from "./Authentication.ts";
 import { InternalError } from "./Errors.ts";
@@ -16,6 +16,12 @@ export class NotFoundError extends Schema.TaggedError<NotFoundError>()(
 	{},
 ) {}
 
+// A folder can't be declared within itself.
+export class RecursiveDefinitionError extends Schema.TaggedError<RecursiveDefinitionError>()(
+	"RecursiveDefinitionError",
+	{},
+) {}
+
 export class Folder extends Schema.Class<Folder>("Folder")({
 	id: FolderId,
 	name: Schema.String,
@@ -24,6 +30,18 @@ export class Folder extends Schema.Class<Folder>("Folder")({
 	createdById: Schema.String,
 	spaceId: Schema.OptionFromNullOr(Schema.String),
 	parentId: Schema.OptionFromNullOr(FolderId),
+}) {
+	static decodeSync = Schema.decodeSync(Folder);
+
+	static toJS = (self: Folder) =>
+		Schema.encode(Folder)(self).pipe(Effect.orDie);
+}
+
+export class FolderUpdate extends Schema.Class<FolderUpdate>("FolderPatch")({
+	id: FolderId,
+	name: Schema.optional(Schema.String),
+	color: Schema.optional(FolderColor),
+	parentId: Schema.optional(FolderId),
 }) {}
 
 export class FolderRpcs extends RpcGroup.make(
@@ -41,4 +59,8 @@ export class FolderRpcs extends RpcGroup.make(
 		success: Folder,
 		error: Schema.Union(NotFoundError, InternalError),
 	}).middleware(RpcAuthMiddleware),
+	Rpc.make("FolderUpdate", {
+		payload: FolderUpdate,
+		error: Schema.Union(NotFoundError, RecursiveDefinitionError, InternalError),
+	}).middleware(RpcAuthMiddleware),
 ) {}