link members sidebar to members page

Author: calebbourg

src/app/organizations/[id]/members/layout.tsx

@@ -3,6 +3,8 @@ import "@/styles/globals.css";
 import { siteConfig } from "@/site.config.ts";
 
 import { SiteHeader } from "@/components/ui/site-header";
+import { AppSidebar } from "@/components/ui/app-sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 export const metadata: Metadata = {
   title: siteConfig.name,
   description: "Manage coaching members",
@@ -14,11 +16,14 @@ export default function MembersLayout({
   children: React.ReactNode;
 }>) {
   return (
-    // Ensure that SiteHeader has enough vertical space to stay sticky at the top
-    // of the page by using "min-h-screen" in the parent div
-    <div className="min-h-screen">
-      <SiteHeader />
-      <main>{children}</main>
-    </div>
+    <SidebarProvider>
+      <div className="flex min-h-screen min-w-full">
+        <AppSidebar />
+        <SidebarInset>
+          <SiteHeader />
+          <main className="flex-1 p-6">{children}</main>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
   );
 }

src/components/ui/app-sidebar.tsx

@@ -20,6 +20,7 @@ import {
   SidebarRail,
   SidebarSeparator,
 } from "@/components/ui/sidebar";
+import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 
 // Custom styles for menu buttons to ensure consistent centering
 const menuButtonStyles = {
@@ -30,6 +31,8 @@ const menuButtonStyles = {
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const { currentOrganizationId } = useOrganizationStateStore((state) => state);
+
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="h-16 flex flex-col justify-between pb-0">
@@ -101,7 +104,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     menuButtonStyles.buttonCollapsed
                   )}
                 >
-                  <a href="/members">
+                  <a href={`/organizations/${currentOrganizationId}/members`}>
                     <span className={menuButtonStyles.iconWrapper}>
                       <Users className="h-4 w-4" />
                     </span>

src/components/ui/organization-selector.tsx

@@ -30,19 +30,17 @@ function OrganizationsList({ userId }: { userId: Id }) {
 
   // Be sure to cache the list of current organizations in the OrganizationStateStore
   useEffect(() => {
-    if (!organizations.length) return;
+    if (!organizations?.length) return;
     console.debug(
       `organizations (useEffect): ${JSON.stringify(organizations)}`
     );
     setCurrentOrganizations(organizations);
-  }, [organizations]);
+  }, [organizations, setCurrentOrganizations]);
 
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Error loading organizations</div>;
   if (!organizations?.length) return <div>No organizations found</div>;
 
-  console.debug(`organizations: ${JSON.stringify(organizations)}`);
-
   return (
     <>
       {organizations.map((org) => (
@@ -61,7 +59,7 @@ export default function OrganizationSelector({
 }: OrganizationSelectorProps) {
   const {
     currentOrganizationId,
-    setCurrentOrganizationId,
+    setCurrentOrganization,
     getCurrentOrganization,
   } = useOrganizationStateStore((state) => state);
   const { resetCoachingSessionState } = useCoachingSessionStateStore(
@@ -72,7 +70,8 @@ export default function OrganizationSelector({
   );
 
   const handleSetOrganization = (organizationId: Id) => {
-    setCurrentOrganizationId(organizationId);
+    const organization = getCurrentOrganization(organizationId);
+    setCurrentOrganization(organization);
     console.info("Resetting Coaching Session State");
     resetCoachingRelationshipState();
     resetCoachingSessionState();