feat: get active memebr and refactor (#445)

demo/nextjs/app/dashboard/organization-card.tsx

@@ -49,17 +49,15 @@ import { AnimatePresence, motion } from "framer-motion";
 import CopyButton from "@/components/ui/copy-button";
 import Image from "next/image";
 
-export function OrganizationCard(props: { session: Session | null }) {
+export function OrganizationCard(props: {
+	session: Session | null;
+	activeOrganization: ActiveOrganization | null;
+}) {
 	const organizations = useListOrganizations();
-	const activeOrg = useActiveOrganization();
 	const [optimisticOrg, setOptimisticOrg] = useState<ActiveOrganization | null>(
-		null,
+		props.activeOrganization,
 	);
 	const [isRevoking, setIsRevoking] = useState<string[]>([]);
-	useEffect(() => {
-		setOptimisticOrg(activeOrg.data);
-	}, [activeOrg.data]);
-
 	const inviteVariants = {
 		hidden: { opacity: 0, height: 0 },
 		visible: { opacity: 1, height: "auto" },
@@ -92,8 +90,10 @@ export function OrganizationCard(props: { session: Session | null }) {
 						<DropdownMenuContent align="start">
 							<DropdownMenuItem
 								className=" py-1"
-								onClick={() => {
-									organization.setActive(null);
+								onClick={async () => {
+									organization.setActive({
+										orgId: null,
+									});
 									setOptimisticOrg(null);
 								}}
 							>
@@ -103,16 +103,19 @@ export function OrganizationCard(props: { session: Session | null }) {
 								<DropdownMenuItem
 									className=" py-1"
 									key={org.id}
-									onClick={() => {
+									onClick={async () => {
 										if (org.id === optimisticOrg?.id) {
 											return;
 										}
-										organization.setActive(org.id);
 										setOptimisticOrg({
 											members: [],
 											invitations: [],
 											...org,
 										});
+										const { data } = await organization.setActive({
+											orgId: org.id,
+										});
+										setOptimisticOrg(data);
 									}}
 								>
 									<p className="text-sm sm">{org.name}</p>

demo/nextjs/app/dashboard/page.tsx

@@ -3,22 +3,26 @@ import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 import UserCard from "./user-card";
 import { OrganizationCard } from "./organization-card";
-import AccountSwitcher from "@/components/account-swtich";
+import AccountSwitcher from "@/components/account-switch";
 
 export default async function DashboardPage() {
-	const [session, activeSessions, deviceSessions] = await Promise.all([
-		auth.api.getSession({
-			headers: await headers(),
-		}),
-		auth.api.listSessions({
-			headers: await headers(),
-		}),
-		auth.api.listDeviceSessions({
-			headers: await headers(),
-		}),
-	]).catch((e) => {
-		throw redirect("/sign-in");
-	});
+	const [session, activeSessions, deviceSessions, organization] =
+		await Promise.all([
+			auth.api.getSession({
+				headers: await headers(),
+			}),
+			auth.api.listSessions({
+				headers: await headers(),
+			}),
+			auth.api.listDeviceSessions({
+				headers: await headers(),
+			}),
+			auth.api.getFullOrganization({
+				headers: await headers(),
+			}),
+		]).catch((e) => {
+			throw redirect("/sign-in");
+		});
 	return (
 		<div className="w-full">
 			<div className="flex gap-4 flex-col">
@@ -29,7 +33,10 @@ export default async function DashboardPage() {
 					session={JSON.parse(JSON.stringify(session))}
 					activeSessions={JSON.parse(JSON.stringify(activeSessions))}
 				/>
-				<OrganizationCard session={JSON.parse(JSON.stringify(session))} />
+				<OrganizationCard
+					session={JSON.parse(JSON.stringify(session))}
+					activeOrganization={JSON.parse(JSON.stringify(organization))}
+				/>
 			</div>
 		</div>
 	);