Merge pull request #429 from trycompai/mariano/comp-75-org-switcher-creation-is-buggy

fix org switching

Author: Marfuen

apps/app/src/actions/change-organization.ts

@@ -55,11 +55,11 @@ export const changeOrganizationAction = authActionClient
 			auth.api.setActiveOrganization({
 				headers: await headers(),
 				body: {
-					organizationId: organizationId,
+					organizationId: organization.id,
 				},
 			});
 
-			revalidatePath(`/${organization.id}`, "layout");
+			revalidatePath(`/${organization.id}`);
 
 			return {
 				success: true,

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/layout.tsx

@@ -4,6 +4,7 @@ import { AssistantSheet } from "@/components/sheets/assistant-sheet";
 import { Sidebar } from "@/components/sidebar";
 import { SidebarProvider } from "@/context/sidebar-context";
 import { auth } from "@/utils/auth";
+import { db } from "@comp/db";
 import dynamic from "next/dynamic";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
@@ -35,9 +36,18 @@ export default async function Layout({
 		return redirect("/");
 	}
 
+	const currentOrganization = await db.organization.findUnique({
+		where: {
+			id: session.session.activeOrganizationId,
+		},
+	});
+
 	return (
 		<SidebarProvider initialIsCollapsed={isCollapsed}>
-			<AnimatedLayout sidebar={<Sidebar />} isCollapsed={isCollapsed}>
+			<AnimatedLayout
+				sidebar={<Sidebar organization={currentOrganization} />}
+				isCollapsed={isCollapsed}
+			>
 				<div className="mx-4 md:ml-[95px] md:mr-10 pb-8">
 					<Header />
 					<main>{children}</main>

apps/app/src/components/main-menu.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useI18n } from "@/locales/client";
+import { authClient } from "@/utils/auth-client";
 import { Badge } from "@comp/ui/badge";
 import { cn } from "@comp/ui/cn";
 import { Icons } from "@comp/ui/icons";
@@ -45,23 +46,24 @@ type MenuItem = {
 };
 
 interface ItemProps {
+	organizationId: string;
 	item: MenuItem;
 	isActive: boolean;
 	disabled: boolean;
-	organizationId: string;
 	isCollapsed?: boolean;
 	onItemClick?: () => void;
 }
 
 export function MainMenu({
-	organizationId,
 	//userIsAdmin,
 	isCollapsed = false,
 	completedOnboarding,
 	onItemClick,
 }: Props) {
 	const t = useI18n();
 	const pathname = usePathname();
+	const session = authClient.useSession();
+	const organizationId = session?.data?.session?.activeOrganizationId;
 
 	const items: MenuItem[] = [
 		{
@@ -167,12 +169,13 @@ export function MainMenu({
 	const isPathActive = (itemPath: string) => {
 		const normalizedItemPath = itemPath.replace(
 			":organizationId",
-			organizationId,
+			organizationId ?? "",
 		);
 
 		// Extract the base path from the menu item (first two segments after normalization)
 		const itemPathParts = normalizedItemPath.split("/").filter(Boolean);
-		const itemBaseSegment = itemPathParts.length > 1 ? itemPathParts[1] : "";
+		const itemBaseSegment =
+			itemPathParts.length > 1 ? itemPathParts[1] : "";
 
 		// Extract the current path parts
 		const currentPathParts = pathname.split("/").filter(Boolean);
@@ -232,10 +235,10 @@ export function MainMenu({
 							return (
 								<Item
 									key={item.id}
+									organizationId={organizationId ?? ""}
 									item={item}
 									isActive={isActive}
 									disabled={item.disabled}
-									organizationId={organizationId}
 									isCollapsed={isCollapsed}
 									onItemClick={onItemClick}
 								/>
@@ -248,10 +251,10 @@ export function MainMenu({
 }
 
 const Item = ({
+	organizationId,
 	item,
 	isActive,
 	disabled,
-	organizationId,
 	isCollapsed = false,
 	onItemClick,
 }: ItemProps) => {
@@ -265,7 +268,8 @@ const Item = ({
 	// Badge variants mapping
 	const badgeVariants = {
 		default: "bg-primary/80 text-primary-foreground hover:bg-primary/90",
-		secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		secondary:
+			"bg-secondary text-secondary-foreground hover:bg-secondary/80",
 		outline:
 			"border-border bg-background hover:bg-accent hover:text-accent-foreground",
 		new: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
@@ -285,12 +289,14 @@ const Item = ({
 							<div
 								className={cn(
 									"relative border border-transparent flex items-center",
-									isCollapsed ? "md:w-[45px] md:justify-center" : "md:px-3",
+									isCollapsed
+										? "md:w-[45px] md:justify-center"
+										: "md:px-3",
 									"w-full px-3 md:w-auto h-[45px]",
 									"hover:bg-accent hover:border-border",
 									"transition-all duration-300",
 									isActive &&
-									"bg-accent dark:bg-secondary border-border border-r-2 border-r-primary",
+										"bg-accent dark:bg-secondary border-border border-r-2 border-r-primary",
 								)}
 							>
 								<div
@@ -316,7 +322,10 @@ const Item = ({
 														variant="outline"
 														className={cn(
 															"ml-1.5 text-[9px] px-1 py-0 h-auto",
-															badgeVariants[item.badge.variant],
+															badgeVariants[
+																item.badge
+																	.variant
+															],
 														)}
 													>
 														{item.badge.text}
@@ -362,9 +371,8 @@ const Item = ({
 };
 
 type Props = {
-	organizationId: string;
 	//userIsAdmin: boolean;
 	isCollapsed?: boolean;
 	completedOnboarding: boolean;
 	onItemClick?: () => void;
-};
+};

apps/app/src/components/organization-switcher.tsx

@@ -20,13 +20,13 @@ import { useState } from "react";
 import { CreateOrgModal } from "./modals/create-org-modal";
 interface OrganizationSwitcherProps {
 	organizations: Organization[];
-	organizationId: string | undefined;
+	organization: Organization | null;
 	isCollapsed?: boolean;
 }
 
 export function OrganizationSwitcher({
 	organizations,
-	organizationId,
+	organization,
 	isCollapsed = false,
 }: OrganizationSwitcherProps) {
 	const t = useI18n();
@@ -36,24 +36,22 @@ export function OrganizationSwitcher({
 
 	const { execute, status } = useAction(changeOrganizationAction, {
 		onSuccess: (result) => {
-			if (result.data?.success) {
-				router.refresh();
+			const orgId = result.data?.data?.id;
+			if (orgId) {
+				router.push(`/${orgId}`);
+				setIsOpen(false);
 			}
 		},
 	});
 
-	const currentOrganization = organizations.find(
-		(org) => org.id === organizationId,
-	);
+	const currentOrganization = organization;
 
 	const otherOrganizations = organizations.filter(
-		(org) => org.id !== organizationId,
+		(org) => org.id !== currentOrganization?.id,
 	);
 
 	const handleOrgChange = async (org: Organization) => {
 		execute({ organizationId: org.id });
-		router.push(`/${org.id}`);
-		setIsOpen(false);
 	};
 
 	return (

apps/app/src/components/sidebar-logo.tsx

@@ -1,15 +1,19 @@
 "use client";
 
+import { authClient } from "@/utils/auth-client";
 import { cn } from "@comp/ui/cn";
 import { Icons } from "@comp/ui/icons";
 import Link from "next/link";
 
 interface SidebarLogoProps {
 	isCollapsed: boolean;
-	organizationId: string;
 }
 
-export function SidebarLogo({ isCollapsed, organizationId }: SidebarLogoProps) {
+export function SidebarLogo({ isCollapsed }: SidebarLogoProps) {
+	const session = authClient.useSession();
+
+	const organizationId = session?.data?.session?.activeOrganizationId;
+
 	return (
 		<div className={cn("transition-all duration-300 flex items-center")}>
 			<Link href={`/${organizationId}`}>

apps/app/src/components/sidebar.tsx

@@ -1,43 +1,32 @@
 import { getOnboardingForCurrentOrganization } from "@/data/getOnboarding";
 import { getOrganizations } from "@/data/getOrganizations";
-import { auth } from "@/utils/auth";
-import { cookies, headers } from "next/headers";
-import { redirect } from "next/navigation";
+import type { Organization } from "@comp/db/types";
+import { cookies } from "next/headers";
 import { MainMenu } from "./main-menu";
 import { OrganizationSwitcher } from "./organization-switcher";
 import { SidebarCollapseButton } from "./sidebar-collapse-button";
 import { SidebarLogo } from "./sidebar-logo";
 
-export async function Sidebar() {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-	const organizationId = session?.session.activeOrganizationId;
+export async function Sidebar({
+	organization,
+}: { organization: Organization | null }) {
 	const cookieStore = await cookies();
 	const isCollapsed = cookieStore.get("sidebar-collapsed")?.value === "true";
 	const { completedAll } = await getOnboardingForCurrentOrganization();
-
-	if (!organizationId) {
-		redirect("/");
-	}
-
 	const { organizations } = await getOrganizations();
 
 	return (
 		<div className="h-full flex flex-col gap-0">
 			<div className="p-4 flex flex-col gap-0">
 				<div className="flex items-center justify-between">
-					<SidebarLogo
-						isCollapsed={isCollapsed}
-						organizationId={organizationId}
-					/>
+					<SidebarLogo isCollapsed={isCollapsed} />
 					{!isCollapsed && (
 						<SidebarCollapseButton isCollapsed={isCollapsed} />
 					)}
 				</div>
 				<MainMenu
 					//userIsAdmin={user?.isAdmin ?? false}
-					organizationId={organizationId}
+
 					isCollapsed={isCollapsed}
 					completedOnboarding={completedAll}
 				/>
@@ -52,7 +41,7 @@ export async function Sidebar() {
 			<div className="flex h-[60px] items-center mx-auto w-full pb-1">
 				<OrganizationSwitcher
 					organizations={organizations}
-					organizationId={organizationId}
+					organization={organization}
 					isCollapsed={isCollapsed}
 				/>
 			</div>