cleanup providers;

Author: izadoesdev

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

@@ -1,104 +1,104 @@
 "use client";
 
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import {
 	BuildingsIcon,
 	EnvelopeIcon,
 	GearIcon,
 	GlobeIcon,
 	KeyIcon,
-	PlusIcon,
-	UserPlusIcon,
 	UsersIcon,
 	WarningIcon,
 } from "@phosphor-icons/react";
+import { useAtomValue } from "jotai";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { CreateOrganizationDialog } from "@/components/organizations/create-organization-dialog";
 import { InviteMemberDialog } from "@/components/organizations/invite-member-dialog";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useOrganizations } from "@/hooks/use-organizations";
+import {
+	activeOrganizationAtom,
+	isLoadingOrganizationsAtom,
+} from "@/stores/jotai/organizationsAtoms";
+
+type PageInfo = {
+	title: string;
+	description: string;
+	icon: PhosphorIcon;
+	requiresOrg?: boolean;
+};
+
+const PAGE_INFO_MAP: Record<string, PageInfo> = {
+	"/organizations": {
+		title: "Organizations",
+		description: "Manage your organizations and team collaboration",
+		icon: BuildingsIcon,
+	},
+	"/organizations/members": {
+		title: "Team Members",
+		description: "Manage team members and their roles",
+		icon: UsersIcon,
+		requiresOrg: true,
+	},
+	"/organizations/invitations": {
+		title: "Pending Invitations",
+		description: "View and manage pending team invitations",
+		icon: EnvelopeIcon,
+		requiresOrg: true,
+	},
+	"/organizations/settings": {
+		title: "General Settings",
+		description: "Manage organization name, slug, and basic settings",
+		icon: GearIcon,
+		requiresOrg: true,
+	},
+	"/organizations/settings/websites": {
+		title: "Website Management",
+		description: "Manage websites associated with this organization",
+		icon: GlobeIcon,
+		requiresOrg: true,
+	},
+	"/organizations/settings/api-keys": {
+		title: "API Keys",
+		description: "Create and manage API keys for this organization",
+		icon: KeyIcon,
+		requiresOrg: true,
+	},
+	"/organizations/settings/danger": {
+		title: "Danger Zone",
+		description: "Irreversible and destructive actions",
+		icon: WarningIcon,
+		requiresOrg: true,
+	},
+};
+
+const DEFAULT_PAGE_INFO: PageInfo = {
+	title: "Organizations",
+	description: "Manage your organizations and team collaboration",
+	icon: BuildingsIcon,
+};
 
 export function OrganizationProvider({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
-	const { activeOrganization, isLoading } = useOrganizations();
+	// Subscribe directly to atoms - no hook overhead
+	const activeOrganization = useAtomValue(activeOrganizationAtom);
+	const isLoading = useAtomValue(isLoadingOrganizationsAtom);
+
 	const pathname = usePathname();
 	const [showCreateDialog, setShowCreateDialog] = useState(false);
 	const [showInviteMemberDialog, setShowInviteMemberDialog] = useState(false);
 
-	const getPageInfo = () => {
-		if (pathname === "/organizations") {
-			return {
-				title: "Organizations",
-				description: "Manage your organizations and team collaboration",
-				icon: BuildingsIcon,
-			};
-		}
-		if (pathname === "/organizations/members") {
-			return {
-				title: "Team Members",
-				description: "Manage team members and their roles",
-				icon: UsersIcon,
-				requiresOrg: true,
-			};
-		}
-		if (pathname === "/organizations/invitations") {
-			return {
-				title: "Pending Invitations",
-				description: "View and manage pending team invitations",
-				icon: EnvelopeIcon,
-				requiresOrg: true,
-			};
-		}
-		if (pathname === "/organizations/settings") {
-			return {
-				title: "General Settings",
-				description: "Manage organization name, slug, and basic settings",
-				icon: GearIcon,
-				requiresOrg: true,
-			};
-		}
-		if (pathname === "/organizations/settings/websites") {
-			return {
-				title: "Website Management",
-				description: "Manage websites associated with this organization",
-				icon: GlobeIcon,
-				requiresOrg: true,
-			};
-		}
-		if (pathname === "/organizations/settings/api-keys") {
-			return {
-				title: "API Keys",
-				description: "Create and manage API keys for this organization",
-				icon: KeyIcon,
-				requiresOrg: true,
-			};
-		}
-		if (pathname === "/organizations/settings/danger") {
-			return {
-				title: "Danger Zone",
-				description: "Irreversible and destructive actions",
-				icon: WarningIcon,
-				requiresOrg: true,
-			};
-		}
-		return {
-			title: "Organizations",
-			description: "Manage your organizations and team collaboration",
-			icon: BuildingsIcon,
-		};
-	};
-
 	const {
 		title,
 		description,
 		icon: Icon,
 		requiresOrg,
-	} = getPageInfo();
+	} = useMemo(() => PAGE_INFO_MAP[pathname] ?? DEFAULT_PAGE_INFO, [pathname]);
 
 	if (isLoading) {
 		return (

apps/dashboard/app/layout.tsx

@@ -133,7 +133,6 @@ export default function RootLayout({
 				trackAttributes={true}
 				trackErrors={true}
 				trackPerformance={true}
-				trackScreenViews={true}
 				trackWebVitals={true}
 			/>
 			<body className="flex h-full min-h-screen flex-col bg-background text-foreground antialiased">

apps/dashboard/app/providers.tsx

@@ -2,7 +2,11 @@
 
 import { authClient } from "@databuddy/auth/client";
 import { FlagsProvider } from "@databuddy/sdk/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+	QueryClient,
+	QueryClientProvider,
+	useQuery,
+} from "@tanstack/react-query";
 import { AutumnProvider } from "autumn-js/react";
 import { ThemeProvider } from "next-themes";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
@@ -62,8 +66,20 @@ export default function Providers({ children }: { children: React.ReactNode }) {
 	);
 }
 
+// Query key for session - shared with other components for deduplication
+export const SESSION_QUERY_KEY = ["auth", "session"] as const;
+
 function FlagsProviderWrapper({ children }: { children: React.ReactNode }) {
-	const { data: session, isPending } = authClient.useSession();
+	const { data: session, isPending } = useQuery({
+		queryKey: SESSION_QUERY_KEY,
+		queryFn: async () => {
+			const result = await authClient.getSession();
+			return result.data;
+		},
+		staleTime: 2 * 60 * 1000, // 2 minutes
+		gcTime: 5 * 60 * 1000, // 5 minutes
+	});
+
 	return (
 		<FlagsProvider
 			clientId="3ed1fce1-5a56-4cb6-a977-66864f6d18e3"

apps/dashboard/components/providers/organizations-provider.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { authClient } from "@databuddy/auth/client";
-import { useAtom } from "jotai";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { type ReactNode, useEffect } from "react";
 import {
 	activeOrganizationAtom,
@@ -14,38 +15,62 @@ export type Organization = NonNullable<
 	ReturnType<typeof authClient.useListOrganizations>["data"]
 >[number];
 
+export const AUTH_QUERY_KEYS = {
+	session: ["auth", "session"] as const,
+	organizations: ["auth", "organizations"] as const,
+	activeOrganization: ["auth", "activeOrganization"] as const,
+} as const;
+
 export function OrganizationsProvider({ children }: { children: ReactNode }) {
-	const { data: organizationsData, isPending: isLoadingOrgs } =
-		authClient.useListOrganizations();
-	const { data: activeOrganization, isPending: isLoadingActive } =
-		authClient.useActiveOrganization();
+	const setOrganizations = useSetAtom(organizationsAtom);
+	const setActiveOrganization = useSetAtom(activeOrganizationAtom);
+	const setIsLoading = useSetAtom(isLoadingOrganizationsAtom);
+
+	// Fetch organizations with TanStack Query (cached & deduplicated)
+	const { data: organizationsData, isPending: isLoadingOrgs } = useQuery({
+		queryKey: AUTH_QUERY_KEYS.organizations,
+		queryFn: async () => {
+			const result = await authClient.organization.list();
+			return result.data ?? [];
+		},
+		staleTime: 2 * 60 * 1000, // 2 minutes
+		gcTime: 5 * 60 * 1000, // 5 minutes
+	});
 
+	// Fetch active organization with TanStack Query (cached & deduplicated)
+	const { data: activeOrganization, isPending: isLoadingActive } = useQuery({
+		queryKey: AUTH_QUERY_KEYS.activeOrganization,
+		queryFn: async () => {
+			// getFullOrganization returns the currently active org when no ID specified
+			const result = await authClient.organization.getFullOrganization();
+			return result.data ?? null;
+		},
+		staleTime: 2 * 60 * 1000,
+		gcTime: 5 * 60 * 1000,
+	});
 
-	const [, setOrganizations] = useAtom(organizationsAtom);
-	const [, setActiveOrganization] = useAtom(activeOrganizationAtom);
-	const [, setIsLoading] = useAtom(isLoadingOrganizationsAtom);
+	// Sync to atoms in useEffect to avoid setState during render
+	useEffect(() => {
+		if (organizationsData) {
+			setOrganizations(organizationsData);
+		}
+	}, [organizationsData, setOrganizations]);
 
 	useEffect(() => {
-		setOrganizations(organizationsData ?? []);
 		setActiveOrganization(activeOrganization ?? null);
+	}, [activeOrganization, setActiveOrganization]);
+
+	useEffect(() => {
 		setIsLoading(isLoadingOrgs || isLoadingActive);
-	}, [
-		organizationsData,
-		activeOrganization,
-		isLoadingOrgs,
-		isLoadingActive,
-		setOrganizations,
-		setActiveOrganization,
-		setIsLoading,
-	]);
+	}, [isLoadingOrgs, isLoadingActive, setIsLoading]);
 
 	return <>{children}</>;
 }
 
 export function useOrganizationsContext() {
-	const [organizations] = useAtom(organizationsAtom);
-	const [activeOrganization] = useAtom(activeOrganizationAtom);
-	const [isLoading] = useAtom(isLoadingOrganizationsAtom);
+	const organizations = useAtomValue(organizationsAtom);
+	const activeOrganization = useAtomValue(activeOrganizationAtom);
+	const isLoading = useAtomValue(isLoadingOrganizationsAtom);
 	const [getOrganizationBySlug] = useAtom(getOrganizationBySlugAtom);
 
 	return {