fix: adding websites optimistically

Author: izadoesdev

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

@@ -2,13 +2,10 @@
 
 import {
 	ArrowRightIcon,
-	BuildingsIcon,
 	CalendarIcon,
 	CheckIcon,
 	GearIcon,
-	PlusIcon,
 	TrashIcon,
-	UsersIcon,
 } from '@phosphor-icons/react';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -29,7 +26,7 @@ import {
 import {
 	type ActiveOrganization,
 	type Organization,
-	useOrganizations,
+useOrganizations,
 } from '@/hooks/use-organizations';
 import { cn, getOrganizationInitials } from '@/lib/utils';
 import { OnboardingCard } from './onboarding-card';

apps/dashboard/app/(main)/websites/page.tsx

@@ -170,10 +170,6 @@ export default function WebsitesPage() {
 		refetch();
 	};
 
-	const handleWebsiteCreated = () => {
-		refetch();
-	};
-
 	return (
 		<div className="flex h-full flex-col">
 			{/* Enhanced header */}
@@ -283,7 +279,6 @@ export default function WebsitesPage() {
 			{/* Website Dialog */}
 			<WebsiteDialog
 				onOpenChange={setDialogOpen}
-				onSave={handleWebsiteCreated}
 				open={dialogOpen}
 			/>
 		</div>

apps/dashboard/components/website-dialog.tsx

@@ -52,7 +52,7 @@ export function WebsiteDialog({
 	open,
 	onOpenChange,
 	website,
-	onSave = () => {},
+	onSave,
 }: WebsiteDialogProps) {
 	const isEditing = !!website;
 	const { data: activeOrganization } = authClient.useActiveOrganization();
@@ -84,26 +84,26 @@ export function WebsiteDialog({
 			organizationId: activeOrganization?.id,
 		};
 
-		const promise = async () =>
-			isEditing
-				? updateWebsiteMutation.mutate({ id: website.id, name: formData.name })
-				: createWebsiteMutation.mutate(submissionData);
-
-		toast.promise(promise(), {
-			loading: 'Loading...',
-			success: (result) => {
-				onSave(result as unknown as Website);
-				onOpenChange(false);
-				return `Website ${isEditing ? 'updated' : 'created'} successfully!`;
-			},
-			error: (err: any) => {
-				const message =
-					err.data?.code === 'CONFLICT'
-						? 'A website with this domain already exists.'
-						: `Failed to ${isEditing ? 'update' : 'create'} website.`;
-				return message;
-			},
-		});
+		try {
+			if (isEditing) {
+				const result = await updateWebsiteMutation.mutateAsync({ 
+					id: website.id, 
+					name: formData.name 
+				});
+				if (onSave) onSave(result);
+				toast.success('Website updated successfully!');
+			} else {
+				const result = await createWebsiteMutation.mutateAsync(submissionData);
+				if (onSave) onSave(result);
+				toast.success('Website created successfully!');
+			}
+			onOpenChange(false);
+		} catch (error: any) {
+			const message = error.data?.code === 'CONFLICT'
+				? 'A website with this domain already exists.'
+				: `Failed to ${isEditing ? 'update' : 'create'} website.`;
+			toast.error(message);
+		}
 	});
 
 	return (

apps/dashboard/hooks/use-websites.ts

@@ -36,78 +36,42 @@ export function useWebsite(id: string) {
 export function useCreateWebsite() {
 	const utils = trpc.useUtils();
 	return trpc.websites.create.useMutation({
-		onMutate: async (newWebsite) => {
+		onSuccess: (newWebsite, variables) => {
 			const queryKey = {
-				organizationId: newWebsite.organizationId ?? undefined,
+				organizationId: variables.organizationId ?? undefined,
 			};
-			await utils.websites.list.cancel(queryKey);
-			const previousWebsites = utils.websites.list.getData(queryKey);
-
+			
 			utils.websites.list.setData(queryKey, (old) => {
-				const optimisticWebsite = {
-					...newWebsite,
-					id: crypto.randomUUID(),
-					createdAt: new Date().toISOString(),
-				} as Website;
-				return old ? [...old, optimisticWebsite] : [optimisticWebsite];
+				if (!old) return [newWebsite];
+				const exists = old.some(w => w.id === newWebsite.id);
+				return exists ? old : [...old, newWebsite];
 			});
-
-			return { previousWebsites, queryKey };
-		},
-		onError: (_, __, context) => {
-			if (context?.previousWebsites) {
-				utils.websites.list.setData(context.queryKey, context.previousWebsites);
-			}
 		},
-		onSettled: (_, __, ___, context) => {
-			utils.websites.list.invalidate(context?.queryKey);
+		onError: (error) => {
+			console.error('Failed to create website:', error);
 		},
 	});
 }
 
 export function useUpdateWebsite() {
 	const utils = trpc.useUtils();
 	return trpc.websites.update.useMutation({
-		onMutate: async (updatedWebsite) => {
+		onSuccess: (updatedWebsite) => {
 			const getByIdKey = { id: updatedWebsite.id };
-			await utils.websites.getById.cancel(getByIdKey);
-			const previousWebsite = utils.websites.getById.getData(getByIdKey);
-
 			const listKey = {
-				organizationId: previousWebsite?.organizationId ?? undefined,
+				organizationId: updatedWebsite.organizationId ?? undefined,
 			};
-			await utils.websites.list.cancel(listKey);
-			const previousWebsites = utils.websites.list.getData(listKey);
 
 			utils.websites.list.setData(listKey, (old) =>
 				old?.map((website) =>
-					website.id === updatedWebsite.id
-						? { ...website, ...updatedWebsite }
-						: website
-				)
-			);
-			utils.websites.getById.setData(getByIdKey, (old) =>
-				old ? { ...old, ...updatedWebsite } : undefined
+					website.id === updatedWebsite.id ? updatedWebsite : website
+				) ?? []
 			);
-
-			return { previousWebsites, previousWebsite, listKey };
-		},
-		onError: (_, updatedWebsite, context) => {
-			if (context?.previousWebsites && context.listKey) {
-				utils.websites.list.setData(context.listKey, context.previousWebsites);
-			}
-			if (context?.previousWebsite) {
-				utils.websites.getById.setData(
-					{ id: updatedWebsite.id },
-					context.previousWebsite
-				);
-			}
+			
+			utils.websites.getById.setData(getByIdKey, updatedWebsite);
 		},
-		onSettled: (data, __, ___, context) => {
-			utils.websites.list.invalidate(context?.listKey);
-			if (data) {
-				utils.websites.getById.invalidate({ id: data.id });
-			}
+		onError: (error) => {
+			console.error('Failed to update website:', error);
 		},
 	});
 }
@@ -117,34 +81,29 @@ export function useDeleteWebsite() {
 	return trpc.websites.delete.useMutation({
 		onMutate: async ({ id }) => {
 			const getByIdKey = { id };
-			await utils.websites.getById.cancel(getByIdKey);
 			const previousWebsite = utils.websites.getById.getData(getByIdKey);
 
 			const listKey = {
 				organizationId: previousWebsite?.organizationId ?? undefined,
 			};
+
 			await utils.websites.list.cancel(listKey);
 			const previousWebsites = utils.websites.list.getData(listKey);
 
 			utils.websites.list.setData(
 				listKey,
 				(old) => old?.filter((w) => w.id !== id) ?? []
 			);
-			utils.websites.getById.setData(getByIdKey, undefined);
 
-			return { previousWebsites, previousWebsite, listKey };
+			return { previousWebsites, listKey };
 		},
-		onError: (_, { id }, context) => {
+		onError: (_, __, context) => {
 			if (context?.previousWebsites && context.listKey) {
 				utils.websites.list.setData(context.listKey, context.previousWebsites);
 			}
-			if (context?.previousWebsite) {
-				utils.websites.getById.setData({ id }, context.previousWebsite);
-			}
 		},
-		onSettled: (_, __, { id }, context) => {
-			utils.websites.list.invalidate(context?.listKey);
-			utils.websites.getById.invalidate({ id });
+		onSuccess: (_, { id }) => {
+			utils.websites.getById.setData({ id }, undefined);
 		},
 	});
 }