feat: orgs provider

Author: izadoesdev

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

@@ -7,6 +7,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
+import type { Organization } from "@/components/providers/organizations-provider";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
@@ -16,13 +17,11 @@ import { EmptyState } from "./empty-state";
 
 dayjs.extend(relativeTime);
 
-interface OrganizationsListProps {
-	organizations: ReturnType<typeof authClient.useListOrganizations>["data"];
-	activeOrganization: ReturnType<
-		typeof authClient.useActiveOrganization
-	>["data"];
+type OrganizationsListProps = {
+	organizations: Organization[] | null | undefined;
+	activeOrganization: Organization | null | undefined;
 	isLoading: boolean;
-}
+};
 
 function OrganizationSkeleton() {
 	return (

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { authClient } from "@databuddy/auth/client";
 import { Suspense } from "react";
+import { useOrganizationsContext } from "@/components/providers/organizations-provider";
 import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { OrganizationsList } from "./components/organizations-list";
@@ -37,12 +37,8 @@ function OrganizationsSkeleton() {
 }
 
 export default function OrganizationsPage() {
-	const { data: organizations, isPending: isOrganizationsPending } =
-		authClient.useListOrganizations();
-	const { data: activeOrganization, isPending: isActiveOrganizationPending } =
-		authClient.useActiveOrganization();
-
-	const isLoading = isOrganizationsPending || isActiveOrganizationPending;
+	const { organizations, activeOrganization, isLoading } =
+		useOrganizationsContext();
 
 	return (
 		<div className="flex h-full flex-col">

apps/dashboard/app/providers.tsx

@@ -7,6 +7,7 @@ import { AutumnProvider } from "autumn-js/react";
 import { ThemeProvider } from "next-themes";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { useState } from "react";
+import { OrganizationsProvider } from "@/components/providers/organizations-provider";
 
 const defaultQueryClientOptions = {
 	defaultOptions: {
@@ -51,7 +52,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
 							process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001"
 						}
 					>
-						<NuqsAdapter>{children}</NuqsAdapter>
+						<OrganizationsProvider>
+							<NuqsAdapter>{children}</NuqsAdapter>
+						</OrganizationsProvider>
 					</AutumnProvider>
 				</FlagsProviderWrapper>
 			</QueryClientProvider>

apps/dashboard/components/layout/organization-selector.tsx

@@ -8,9 +8,10 @@ import {
 	SpinnerGapIcon,
 	UserIcon,
 } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { CreateOrganizationDialog } from "@/components/organizations/create-organization-dialog";
+import { useOrganizationsContext } from "@/components/providers/organizations-provider";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -125,16 +126,40 @@ function OrganizationSelectorTrigger({
 }
 
 export function OrganizationSelector() {
-	const { data: organizations, isPending: isLoadingOrgs } =
-		authClient.useListOrganizations();
-	const { data: activeOrganization, isPending: isLoadingActive } =
-		authClient.useActiveOrganization();
+	const { organizations, activeOrganization, isLoading } =
+		useOrganizationsContext();
 	const [isOpen, setIsOpen] = useState(false);
 	const [showCreateDialog, setShowCreateDialog] = useState(false);
 	const [query, setQuery] = useState("");
 	const [isSwitching, setIsSwitching] = useState(false);
 
-	const isLoading = isLoadingOrgs || isLoadingActive;
+	const prevStateRef = useRef<{
+		isLoading: boolean;
+		organizationsCount: number;
+		hasActiveOrg: boolean;
+		activeOrgName?: string;
+	} | null>(null);
+
+	useEffect(() => {
+		const currentState = {
+			isLoading,
+			organizationsCount: organizations.length,
+			hasActiveOrg: !!activeOrganization,
+			activeOrgName: activeOrganization?.name,
+		};
+
+		const prevState = prevStateRef.current;
+		if (
+			!prevState ||
+			prevState.isLoading !== currentState.isLoading ||
+			prevState.organizationsCount !== currentState.organizationsCount ||
+			prevState.hasActiveOrg !== currentState.hasActiveOrg ||
+			prevState.activeOrgName !== currentState.activeOrgName
+		) {
+			console.log("[OrganizationSelector] State changed:", currentState);
+			prevStateRef.current = currentState;
+		}
+	}, [isLoading, organizations.length, activeOrganization]);
 
 	const handleSelectOrganization = async (organizationId: string | null) => {
 		if (organizationId === activeOrganization?.id) {

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { authClient } from "@databuddy/auth/client";
+import { useAtom } from "jotai";
+import { type ReactNode, useEffect } from "react";
+import {
+	activeOrganizationAtom,
+	getOrganizationBySlugAtom,
+	isLoadingOrganizationsAtom,
+	organizationsAtom,
+} from "@/stores/jotai/organizationsAtoms";
+
+export type Organization = NonNullable<
+	ReturnType<typeof authClient.useListOrganizations>["data"]
+>[number];
+
+export function OrganizationsProvider({ children }: { children: ReactNode }) {
+	const { data: organizationsData, isPending: isLoadingOrgs } =
+		authClient.useListOrganizations();
+	const { data: activeOrganization, isPending: isLoadingActive } =
+		authClient.useActiveOrganization();
+
+	const [, setOrganizations] = useAtom(organizationsAtom);
+	const [, setActiveOrganization] = useAtom(activeOrganizationAtom);
+	const [, setIsLoading] = useAtom(isLoadingOrganizationsAtom);
+
+	useEffect(() => {
+		setOrganizations(organizationsData ?? []);
+		setActiveOrganization(activeOrganization ?? null);
+		setIsLoading(isLoadingOrgs || isLoadingActive);
+	}, [
+		organizationsData,
+		activeOrganization,
+		isLoadingOrgs,
+		isLoadingActive,
+		setOrganizations,
+		setActiveOrganization,
+		setIsLoading,
+	]);
+
+	return <>{children}</>;
+}
+
+export function useOrganizationsContext() {
+	const [organizations] = useAtom(organizationsAtom);
+	const [activeOrganization] = useAtom(activeOrganizationAtom);
+	const [isLoading] = useAtom(isLoadingOrganizationsAtom);
+	const [getOrganizationBySlug] = useAtom(getOrganizationBySlugAtom);
+
+	return {
+		organizations,
+		activeOrganization,
+		isLoading,
+		getOrganization: getOrganizationBySlug,
+	};
+}

apps/dashboard/components/website-dialog.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { authClient } from "@databuddy/auth/client";
 import type { InferSelectModel, websites } from "@databuddy/db";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { LoaderCircle } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useOrganizationsContext } from "@/components/providers/organizations-provider";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -70,7 +70,7 @@ export function WebsiteDialog({
 	onSave,
 }: WebsiteDialogProps) {
 	const isEditing = !!website;
-	const { data: activeOrganization } = authClient.useActiveOrganization();
+	const { activeOrganization } = useOrganizationsContext();
 	const formRef = useRef<HTMLFormElement>(null);
 
 	const createWebsiteMutation = useCreateWebsite();

apps/dashboard/hooks/use-websites.ts

@@ -1,10 +1,10 @@
 "use client";
 
-import { authClient } from "@databuddy/auth/client";
 import type { InferSelectModel, websites } from "@databuddy/db";
 import type { ProcessedMiniChartData } from "@databuddy/shared/types/website";
 import type { QueryKey } from "@tanstack/react-query";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useOrganizationsContext } from "@/components/providers/organizations-provider";
 import { orpc } from "@/lib/orpc";
 
 export type Website = InferSelectModel<typeof websites>;
@@ -72,8 +72,8 @@ const removeWebsiteFromList = (
 };
 
 export function useWebsites() {
-	const { data: activeOrganization, isPending: isLoadingOrganization } =
-		authClient.useActiveOrganization();
+	const { activeOrganization, isLoading: isLoadingOrganization } =
+		useOrganizationsContext();
 
 	const query = useQuery({
 		...orpc.websites.listWithCharts.queryOptions({

apps/dashboard/stores/jotai/organizationsAtoms.ts

@@ -0,0 +1,11 @@
+import { atom } from "jotai";
+import type { Organization } from "@/components/providers/organizations-provider";
+
+export const organizationsAtom = atom<Organization[]>([]);
+export const activeOrganizationAtom = atom<Organization | null>(null);
+export const isLoadingOrganizationsAtom = atom<boolean>(true);
+
+export const getOrganizationBySlugAtom = atom((get) => (orgSlug: string) => {
+    const orgs = get(organizationsAtom);
+    return orgs.find((org) => org.slug === orgSlug);
+});

packages/rpc/src/routers/websites.ts

@@ -1,5 +1,14 @@
 import { websitesApi } from "@databuddy/auth";
-import { chQuery } from "@databuddy/db";
+import {
+	and,
+	chQuery,
+	eq,
+	inArray,
+	isNull,
+	member,
+	or,
+	websites,
+} from "@databuddy/db";
 import { createDrizzleCache, redis } from "@databuddy/redis";
 import { logger } from "@databuddy/shared/logger";
 import type { ProcessedMiniChartData } from "@databuddy/shared/types/website";
@@ -176,6 +185,41 @@ export const websitesRouter = {
 			});
 		}),
 
+	listAll: protectedProcedure.handler(({ context }) => {
+		const listAllCacheKey = `listAll:${context.user.id}`;
+		return websiteCache.withCache({
+			key: listAllCacheKey,
+			ttl: CACHE_DURATION,
+			tables: ["websites"],
+			queryFn: async () => {
+				// 1. Get user's organization memberships
+				const userMemberships = await context.db.query.member.findMany({
+					where: eq(member.userId, context.user.id),
+					columns: { organizationId: true },
+				});
+				const orgIds = userMemberships.map((m) => m.organizationId);
+
+				// 2. Build filter: (userId = me AND orgId is null) OR (orgId IN myOrgs)
+				const personalSites = and(
+					eq(websites.userId, context.user.id),
+					isNull(websites.organizationId)
+				);
+
+				const orgSites =
+					orgIds.length > 0
+						? inArray(websites.organizationId, orgIds)
+						: undefined;
+
+				const whereClause = orgSites ? or(personalSites, orgSites) : personalSites;
+
+				return context.db.query.websites.findMany({
+					where: whereClause,
+					orderBy: (table, { desc }) => [desc(table.createdAt)],
+				});
+			},
+		});
+	}),
+
 	listWithCharts: protectedProcedure
 		.input(z.object({ organizationId: z.string().optional() }).default({}))
 		.handler(({ context, input }) => {
@@ -202,16 +246,16 @@ export const websitesRouter = {
 						input.organizationId
 					);
 
-					const websitesList = await context.db.query.websites.findMany({
+					const websites = await context.db.query.websites.findMany({
 						where: whereClause,
 						orderBy: (table, { desc }) => [desc(table.createdAt)],
 					});
 
-					const websiteIds = websitesList.map((site) => site.id);
+					const websiteIds = websites.map((site) => site.id);
 					const chartData = await fetchChartData(websiteIds);
 
 					return {
-						websites: websitesList,
+						websites,
 						chartData,
 					};
 				},