fix: toggle website privacy

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/settings/privacy/page.tsx

@@ -6,20 +6,33 @@ import {
 	InfoIcon,
 	ShareIcon,
 } from "@phosphor-icons/react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
 import { useCallback } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { useTogglePublicWebsite, useWebsite } from "@/hooks/use-websites";
+import {
+	updateWebsiteCache,
+	useWebsite,
+	type Website,
+} from "@/hooks/use-websites";
+import { orpc } from "@/lib/orpc";
 
 export default function PrivacyPage() {
 	const params = useParams();
 	const websiteId = params.id as string;
-	const { data: websiteData, refetch } = useWebsite(websiteId);
-	const toggleMutation = useTogglePublicWebsite();
+	const { data: websiteData } = useWebsite(websiteId);
+	const queryClient = useQueryClient();
+
+	const toggleMutation = useMutation({
+		...orpc.websites.togglePublic.mutationOptions(),
+		onSuccess: (updatedWebsite: Website) => {
+			updateWebsiteCache(queryClient, updatedWebsite);
+		},
+	});
 
 	const isPublic = websiteData?.isPublic ?? false;
 	const shareableLink = websiteData
@@ -39,8 +52,7 @@ export default function PrivacyPage() {
 				error: "Failed to update privacy settings",
 			}
 		);
-		refetch();
-	}, [websiteData, websiteId, isPublic, toggleMutation, refetch]);
+	}, [websiteData, websiteId, isPublic, toggleMutation]);
 
 	const handleCopyLink = useCallback(() => {
 		if (!shareableLink) {

apps/dashboard/hooks/use-websites.ts

@@ -7,21 +7,21 @@ import type { QueryKey } from "@tanstack/react-query";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { orpc } from "@/lib/orpc";
 
-type Website = InferSelectModel<typeof websites>;
-type WebsitesListData = {
+export type Website = InferSelectModel<typeof websites>;
+export type WebsitesListData = {
 	websites: Website[];
 	chartData: Record<string, ProcessedMiniChartData>;
 };
 
-const getWebsiteByIdKey = (id: string): QueryKey =>
+export const getWebsiteByIdKey = (id: string): QueryKey =>
 	orpc.websites.getById.queryOptions({ input: { id } }).queryKey;
 
-const getWebsitesListKey = (organizationId?: string): QueryKey =>
+export const getWebsitesListKey = (organizationId?: string): QueryKey =>
 	orpc.websites.listWithCharts.queryOptions({
 		input: { organizationId },
 	}).queryKey;
 
-const updateWebsiteInList = (
+export const updateWebsiteInList = (
 	old: WebsitesListData | undefined,
 	updatedWebsite: Website
 ): WebsitesListData | undefined => {
@@ -118,7 +118,7 @@ export function useCreateWebsite() {
 	});
 }
 
-const updateWebsiteCache = (
+export const updateWebsiteCache = (
 	queryClient: ReturnType<typeof useQueryClient>,
 	updatedWebsite: Website
 ) => {
@@ -129,9 +129,6 @@ const updateWebsiteCache = (
 		updateWebsiteInList(old, updatedWebsite)
 	);
 	queryClient.setQueryData(getByIdKey, updatedWebsite);
-
-	queryClient.invalidateQueries({ queryKey: getByIdKey });
-	queryClient.invalidateQueries({ queryKey: listKey });
 };
 
 export function useUpdateWebsite() {
@@ -147,19 +144,6 @@ export function useUpdateWebsite() {
 	});
 }
 
-export function useTogglePublicWebsite() {
-	const queryClient = useQueryClient();
-	return useMutation({
-		...orpc.websites.togglePublic.mutationOptions(),
-		onSuccess: (updatedWebsite: Website) => {
-			updateWebsiteCache(queryClient, updatedWebsite);
-		},
-		onError: (error) => {
-			console.error("Failed to toggle website privacy:", error);
-		},
-	});
-}
-
 export function useDeleteWebsite() {
 	const queryClient = useQueryClient();