better handling of org cache

Author: izadoesdev

apps/dashboard/app/(main)/organizations/components/general-settings.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { BuildingsIcon, FloppyDiskIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { RightSidebar } from "@/components/right-sidebar";
 import { Button } from "@/components/ui/button";
@@ -19,7 +19,12 @@ export function GeneralSettings({
 	const [slug, setSlug] = useState(organization.slug);
 	const [isSaving, setIsSaving] = useState(false);
 
-	const { updateOrganizationAsync } = useOrganizations();
+	const { updateOrganization } = useOrganizations();
+
+	useEffect(() => {
+		setName(organization.name);
+		setSlug(organization.slug);
+	}, [organization.name, organization.slug]);
 
 	const cleanSlug = (value: string) =>
 		value
@@ -34,7 +39,7 @@ export function GeneralSettings({
 
 	const hasChanges = name !== organization.name || slug !== organization.slug;
 
-	const handleSave = async () => {
+	const handleSave = () => {
 		if (!name.trim()) {
 			toast.error("Name is required");
 			return;
@@ -45,17 +50,20 @@ export function GeneralSettings({
 		}
 
 		setIsSaving(true);
-		try {
-			await updateOrganizationAsync({
+		updateOrganization(
+			{
 				organizationId: organization.id,
 				data: { name: name.trim(), slug: slug.trim() },
-			});
-			toast.success("Settings updated");
-		} catch {
-			toast.error("Failed to update settings");
-		} finally {
-			setIsSaving(false);
-		}
+			},
+			{
+				onSuccess: () => {
+					setIsSaving(false);
+				},
+				onError: () => {
+					setIsSaving(false);
+				},
+			}
+		);
 	};
 
 	return (

apps/dashboard/app/(main)/organizations/components/organization-logo-uploader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ReactCrop, {
 	type Crop,
 	centerCrop,
@@ -33,12 +33,16 @@ export function OrganizationLogoUploader({
 	organization,
 }: OrganizationLogoUploaderProps) {
 	const {
-		uploadOrganizationLogo,
-		isUploadingOrganizationLogo,
+		updateOrganization,
+		isUpdatingOrganization,
 		deleteOrganizationLogo,
 		isDeletingOrganizationLogo,
 	} = useOrganizations();
 	const [preview, setPreview] = useState(organization.logo);
+
+	useEffect(() => {
+		setPreview(organization.logo);
+	}, [organization.logo]);
 	const [imageSrc, setImageSrc] = useState<string | null>(null);
 	const [crop, setCrop] = useState<Crop>();
 	const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
@@ -117,21 +121,19 @@ export function OrganizationLogoUploader({
 			const reader = new FileReader();
 			reader.onloadend = () => {
 				const fileData = reader.result as string;
-				uploadOrganizationLogo(
+				updateOrganization(
 					{
 						organizationId: organization.id,
-						fileData,
-						fileName: croppedFile.name,
-						fileType: croppedFile.type,
+						data: { logo: fileData },
 					},
 					{
-						onSuccess: (data) => {
-							setPreview(data.logoUrl);
+						onSuccess: () => {
+							setPreview(fileData);
 							handleModalOpenChange(false);
 							setTimeout(() => resetCropState(), 100);
 						},
 						onError: (error) => {
-							toast.error(error.message || "Failed to upload logo.");
+							toast.error(error.message || "Failed to update logo.");
 						},
 					}
 				);
@@ -251,17 +253,17 @@ export function OrganizationLogoUploader({
 						</Button>
 						<Button
 							disabled={
-								isUploadingOrganizationLogo || !imageSrc || !completedCrop
+								isUpdatingOrganization || !imageSrc || !completedCrop
 							}
 							onClick={handleUpload}
 						>
-							{isUploadingOrganizationLogo ? (
+							{isUpdatingOrganization ? (
 								<>
 									<div className="mr-2 size-3 animate-spin rounded-full border border-primary-foreground/30 border-t-primary-foreground" />
-									Uploading...
+									Updating...
 								</>
 							) : (
-								"Save and Upload"
+								"Save Logo"
 							)}
 						</Button>
 					</DialogFooter>

apps/dashboard/app/(main)/organizations/settings/danger/danger-zone-settings.tsx

@@ -37,8 +37,7 @@ export function DangerZoneSettings({
 	const [isOwner, setIsOwner] = useState<boolean | null>(null);
 	const [confirmText, setConfirmText] = useState("");
 
-	const { deleteOrganizationAsync, leaveOrganizationAsync } =
-		useOrganizations();
+	const { deleteOrganization, leaveOrganization } = useOrganizations();
 
 	useEffect(() => {
 		const checkOwnership = async () => {
@@ -63,36 +62,38 @@ export function DangerZoneSettings({
 		checkOwnership();
 	}, [organization.id, session?.user?.id]);
 
-	const handleDelete = async () => {
+	const handleDelete = () => {
 		if (confirmText !== organization.name) {
 			toast.error("Organization name does not match");
 			return;
 		}
 
 		setIsDeleting(true);
-		try {
-			await deleteOrganizationAsync(organization.id);
-			router.push("/organizations");
-		} catch {
-			toast.error("Failed to delete organization");
-		} finally {
-			setIsDeleting(false);
-			setShowDeleteDialog(false);
-			setConfirmText("");
-		}
+		deleteOrganization(organization.id, {
+			onSuccess: () => {
+				router.push("/organizations");
+				setIsDeleting(false);
+				setShowDeleteDialog(false);
+				setConfirmText("");
+			},
+			onError: () => {
+				setIsDeleting(false);
+			},
+		});
 	};
 
-	const handleLeave = async () => {
+	const handleLeave = () => {
 		setIsLeaving(true);
-		try {
-			await leaveOrganizationAsync(organization.id);
-			router.push("/organizations");
-		} catch {
-			toast.error("Failed to leave organization");
-		} finally {
-			setIsLeaving(false);
-			setShowLeaveDialog(false);
-		}
+		leaveOrganization(organization.id, {
+			onSuccess: () => {
+				router.push("/organizations");
+				setIsLeaving(false);
+				setShowLeaveDialog(false);
+			},
+			onError: () => {
+				setIsLeaving(false);
+			},
+		});
 	};
 
 	return (

apps/dashboard/components/organizations/create-organization-dialog.tsx

@@ -64,9 +64,9 @@ export function CreateOrganizationDialog({
 	onClose,
 }: CreateOrganizationDialogProps) {
 	const {
-		createOrganizationAsync,
+		createOrganization,
 		isCreatingOrganization,
-		uploadOrganizationLogoAsync,
+		setActiveOrganization,
 	} = useOrganizations();
 	// const router = useRouter();
 
@@ -232,44 +232,27 @@ export function CreateOrganizationDialog({
 			.toUpperCase()
 			.slice(0, 2);
 
-	const handleSubmit = async () => {
+	const handleSubmit = () => {
 		if (!isFormValid) {
 			return;
 		}
-		try {
-			const organization = await createOrganizationAsync({
+
+		createOrganization(
+			{
 				name: formData.name,
 				slug: formData.slug,
+				logo: preview || undefined,
 				metadata: formData.metadata,
-			});
-
-			if (logoFile && organization?.id) {
-				try {
-					const reader = new FileReader();
-					const fileData = await new Promise<string>((resolve) => {
-						reader.onloadend = () => resolve(reader.result as string);
-						reader.readAsDataURL(logoFile);
-					});
-
-					await uploadOrganizationLogoAsync({
-						organizationId: organization.id,
-						fileData,
-						fileName: logoFile.name,
-						fileType: logoFile.type,
-					});
-				} catch (logoError) {
-					toast.warning(
-						"Organization created, but logo upload failed. You can upload it later from settings."
-					);
-					console.error("Logo upload failed:", logoError);
-				}
+			},
+			{
+				onSuccess: (organization) => {
+					if (organization?.id) {
+						setActiveOrganization(organization.id);
+					}
+					handleClose();
+				},
 			}
-
-			handleClose();
-			// router.push('/organizations');
-		} catch {
-			// handled by mutation toast
-		}
+		);
 	};
 
 	return (