fix editing spaces and member count display

Author: ameer2468

apps/web/actions/organization/create-space.ts

@@ -5,6 +5,7 @@ import { getCurrentUser } from "@cap/database/auth/session";
 import { nanoId } from "@cap/database/helpers";
 import { spaceMembers, spaces } from "@cap/database/schema";
 import {
+	type ImageUpload,
 	Space,
 	SpaceMemberId,
 	type SpaceMemberRole,
@@ -65,21 +66,50 @@ export async function createSpace(
 
 		// Generate the space ID early so we can use it in the file path
 		const spaceId = Space.SpaceId.make(nanoId());
+		let iconUrl: ImageUpload.ImageUrlOrKey | null = null;
+
+		await db().transaction(async (tx) => {
+			// Create the space first
+			await tx.insert(spaces).values({
+				id: spaceId,
+				name,
+				organizationId: user.activeOrganizationId,
+				createdById: user.id,
+				iconUrl: null,
+			});
 
-		// Create the space first
-		await db().insert(spaces).values({
-			id: spaceId,
-			name,
-			organizationId: user.activeOrganizationId,
-			createdById: user.id,
-			iconUrl: null,
-			createdAt: new Date(),
-			updatedAt: new Date(),
+			// --- Member Management Logic ---
+			// Collect member user IDs from formData
+			const memberUserIds: string[] = [];
+			for (const entry of formData.getAll("members[]")) {
+				if (typeof entry === "string" && entry.length > 0) {
+					memberUserIds.push(entry);
+				}
+			}
+
+			// Always add the creator as Admin (if not already in the list)
+			if (!memberUserIds.includes(user.id)) {
+				memberUserIds.push(user.id);
+			}
+
+			// Create space members
+			if (memberUserIds.length > 0) {
+				const spaceMembersToInsert = memberUserIds.map((userId) => {
+					// Creator is always Admin, others are member
+					const role: SpaceMemberRole = userId === user.id ? "Admin" : "member";
+					return {
+						id: SpaceMemberId.make(nanoId()),
+						spaceId,
+						userId: User.UserId.make(userId),
+						role,
+					};
+				});
+
+				await tx.insert(spaceMembers).values(spaceMembersToInsert);
+			}
 		});
 
-		// Upload icon if provided
 		const iconFile = formData.get("icon") as File | null;
-		let iconUrl = null;
 
 		if (iconFile) {
 			try {
@@ -89,50 +119,16 @@ export async function createSpace(
 				iconUrl = result.iconUrl;
 			} catch (error) {
 				console.error("Error uploading space icon:", error);
-				// Don't fail the space creation if icon upload fails
-				// The space is already created, just without an icon
-			}
-		}
-
-		// --- Member Management Logic ---
-		// Collect member user IDs from formData
-		const memberUserIds: string[] = [];
-		for (const entry of formData.getAll("members[]")) {
-			if (typeof entry === "string" && entry.length > 0) {
-				memberUserIds.push(entry);
 			}
 		}
 
-		// Always add the creator as Admin (if not already in the list)
-		if (!memberUserIds.includes(user.id)) {
-			memberUserIds.push(user.id);
-		}
-
-		// Create space members
-		if (memberUserIds.length > 0) {
-			const spaceMembersToInsert = memberUserIds.map((userId) => {
-				// Creator is always Admin, others are member
-				const role: SpaceMemberRole = userId === user.id ? "Admin" : "member";
-				return {
-					id: SpaceMemberId.make(nanoId()),
-					spaceId,
-					userId: User.UserId.make(userId),
-					role,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				};
-			});
-
-			await db().insert(spaceMembers).values(spaceMembersToInsert);
-		}
-
 		revalidatePath("/dashboard");
 
 		return {
 			success: true,
 			spaceId,
-			name,
 			iconUrl,
+			name,
 		};
 	} catch (error) {
 		console.error("Error creating space:", error);

apps/web/actions/organization/update-space.ts

@@ -2,14 +2,18 @@
 
 import { db } from "@cap/database";
 import { getCurrentUser } from "@cap/database/auth/session";
-import { nanoIdLength } from "@cap/database/helpers";
+import { nanoId } from "@cap/database/helpers";
 import { spaceMembers, spaces } from "@cap/database/schema";
 import { S3Buckets } from "@cap/web-backend";
-import { Space, type User } from "@cap/web-domain";
+import {
+	Space,
+	SpaceMemberId,
+	type SpaceMemberRole,
+	type User,
+} from "@cap/web-domain";
 import { and, eq } from "drizzle-orm";
 import { Effect, Option } from "effect";
 import { revalidatePath } from "next/cache";
-import { v4 as uuidv4 } from "uuid";
 import { runPromise } from "@/lib/server";
 import { uploadSpaceIcon } from "./upload-space-icon";
 
@@ -22,40 +26,64 @@ export async function updateSpace(formData: FormData) {
 	const members = formData.getAll("members[]") as User.UserId[];
 	const iconFile = formData.get("icon") as File | null;
 
+	// Get the space to check authorization
+	const [space] = await db()
+		.select({
+			createdById: spaces.createdById,
+			organizationId: spaces.organizationId,
+		})
+		.from(spaces)
+		.where(eq(spaces.id, id))
+		.limit(1);
+
+	if (!space) {
+		return { success: false, error: "Space not found" };
+	}
+
+	// Check if user is the creator or a member of the space
+	const isCreator = space.createdById === user.id;
 	const [membership] = await db()
 		.select()
 		.from(spaceMembers)
-		.where(and(eq(spaceMembers.spaceId, id), eq(spaceMembers.userId, user.id)));
+		.where(and(eq(spaceMembers.spaceId, id), eq(spaceMembers.userId, user.id)))
+		.limit(1);
 
-	if (!membership) return { success: false, error: "Unauthorized" };
+	if (!isCreator && !membership) {
+		return { success: false, error: "Unauthorized" };
+	}
 
 	// Update space name
 	await db().update(spaces).set({ name }).where(eq(spaces.id, id));
 
-	// Update members (simple replace for now)
+	// Update members - ensure creator is always included
+	const memberIds = Array.from(new Set([...members, space.createdById]));
+
 	await db().delete(spaceMembers).where(eq(spaceMembers.spaceId, id));
-	if (members.length > 0) {
-		await db()
-			.insert(spaceMembers)
-			.values(
-				members.map((userId) => ({
-					id: uuidv4().substring(0, nanoIdLength),
+	await db()
+		.insert(spaceMembers)
+		.values(
+			memberIds.map((userId) => {
+				const role: SpaceMemberRole =
+					userId === space.createdById ? "Admin" : "member";
+				return {
+					id: SpaceMemberId.make(nanoId()),
 					spaceId: id,
 					userId,
-				})),
-			);
-	}
+					role,
+				};
+			}),
+		);
 
 	// Handle icon removal if requested
 	if (formData.get("removeIcon") === "true") {
 		// Remove icon from S3 and set iconUrl to null
 		const spaceArr = await db().select().from(spaces).where(eq(spaces.id, id));
-		const space = spaceArr[0];
-		if (space?.iconUrl) {
+		const spaceData = spaceArr[0];
+		if (spaceData?.iconUrl) {
 			// Extract the S3 key (it might already be a key or could be a legacy URL)
-			const key = space.iconUrl.startsWith("organizations/")
-				? space.iconUrl
-				: space.iconUrl.match(/organizations\/.+/)?.[0];
+			const key = spaceData.iconUrl.startsWith("organizations/")
+				? spaceData.iconUrl
+				: spaceData.iconUrl.match(/organizations\/.+/)?.[0];
 
 			if (key) {
 				try {
@@ -74,5 +102,6 @@ export async function updateSpace(formData: FormData) {
 	}
 
 	revalidatePath("/dashboard");
+	revalidatePath(`/dashboard/spaces/${id}`);
 	return { success: true };
 }

apps/web/app/(org)/dashboard/_components/Navbar/SpaceDialog.tsx

@@ -18,6 +18,7 @@ import type { ImageUpload } from "@cap/web-domain";
 import { faLayerGroup } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -131,6 +132,7 @@ const formSchema = z.object({
 
 export const NewSpaceForm: React.FC<NewSpaceFormProps> = (props) => {
 	const { edit = false, space } = props;
+	const router = useRouter();
 
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
@@ -203,11 +205,19 @@ export const NewSpaceForm: React.FC<NewSpaceFormProps> = (props) => {
 							if (selectedFile === null && space.iconUrl) {
 								formData.append("removeIcon", "true");
 							}
-							await updateSpace(formData);
+							const result = await updateSpace(formData);
+							if (!result.success) {
+								throw new Error(result.error || "Failed to update space");
+							}
 							toast.success("Space updated successfully");
+							router.refresh();
 						} else {
-							await createSpace(formData);
+							const result = await createSpace(formData);
+							if (!result.success) {
+								throw new Error(result.error || "Failed to create space");
+							}
 							toast.success("Space created successfully");
+							router.refresh();
 						}
 
 						form.reset();

apps/web/app/(org)/dashboard/spaces/[spaceId]/actions.ts

@@ -3,7 +3,7 @@
 import { db } from "@cap/database";
 import { getCurrentUser } from "@cap/database/auth/session";
 import { nanoIdLength } from "@cap/database/helpers";
-import { spaceMembers } from "@cap/database/schema";
+import { spaceMembers, spaces } from "@cap/database/schema";
 import { Space, User } from "@cap/web-domain";
 import { eq, inArray } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
@@ -170,25 +170,41 @@ export async function setSpaceMembers(
 	}
 	const { spaceId, userIds, role } = validation.data;
 
+	// Get the space creator to ensure they're always included
+	const [space] = await db()
+		.select({ createdById: spaces.createdById })
+		.from(spaces)
+		.where(eq(spaces.id, spaceId))
+		.limit(1);
+
+	if (!space) {
+		throw new Error("Space not found");
+	}
+
+	// Ensure creator is always included in the member list
+	const allMemberIds = Array.from(new Set([...userIds, space.createdById]));
+
 	// Remove all current members
 	await db().delete(spaceMembers).where(eq(spaceMembers.spaceId, spaceId));
 
-	// Insert new members if any
-	if (userIds.length > 0) {
-		const now = new Date();
-		const values = userIds.map((userId) => ({
+	// Insert new members (always at least the creator)
+	const now = new Date();
+	const values = allMemberIds.map((userId) => {
+		// Creator is always Admin, others get the specified role
+		const memberRole = userId === space.createdById ? "Admin" : role;
+		return {
 			id: User.UserId.make(uuidv4().substring(0, nanoIdLength)),
 			spaceId,
 			userId,
-			role,
+			role: memberRole,
 			createdAt: now,
 			updatedAt: now,
-		}));
-		await db().insert(spaceMembers).values(values);
-	}
+		};
+	});
+	await db().insert(spaceMembers).values(values);
 
 	revalidatePath(`/dashboard/spaces/${spaceId}`);
-	return { success: true, count: userIds.length };
+	return { success: true, count: allMemberIds.length };
 }
 
 const batchRemoveSpaceMembersSchema = z.object({

apps/web/app/(org)/dashboard/spaces/[spaceId]/components/MembersIndicator.tsx

@@ -16,6 +16,7 @@ import { type Space, User } from "@cap/web-domain";
 import { faPlus, faUserGroup } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -44,6 +45,7 @@ export const MembersIndicator = ({
 	onAddVideos,
 }: MembersIndicatorProps) => {
 	const { user } = useDashboardContext();
+	const router = useRouter();
 	const [open, setOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -81,6 +83,7 @@ export const MembersIndicator = ({
 				role: "member",
 			});
 			toast.success("Members updated!");
+			router.refresh();
 		} catch (error) {
 			console.error("Failed to update members:", error);
 			toast.error("Failed to update members");