When one clicks the Organization Member button on the Dashboard page, navigate to the Members page and trigger the AddMemberDialog to display

Author: jhodapp

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { use, useEffect } from "react";
+import { use, useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { useCoachingRelationshipList } from "@/lib/api/coaching-relationships";
@@ -14,6 +15,11 @@ export default function MembersPage({
 }: {
   params: Promise<{ id: Id }>;
 }) {
+  const searchParams = useSearchParams();
+  const [openAddMemberDialog] = useState(
+    searchParams.get("addMember") === "true"
+  );
+
   const organizationId = use(params).id;
   const setCurrentOrganizationId = useOrganizationStateStore(
     (state) => state.setCurrentOrganizationId
@@ -67,6 +73,7 @@ export default function MembersPage({
         userSession={userSession}
         onRefresh={handleRefresh}
         isLoading={isRelationshipsLoading || isUsersLoading}
+        openAddMemberDialog={openAddMemberDialog}
       />
     </div>
   );

src/components/ui/dashboard/add-member-button.tsx

@@ -3,12 +3,16 @@
 import { useState } from "react";
 import { Plus, Users } from "lucide-react";
 import { cn } from "@/components/lib/utils";
+import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
+import { useRouter } from "next/navigation";
 
 interface AddMemberButtonProps {
   onClick?: () => void;
 }
 
 export function AddMemberButton({ onClick }: AddMemberButtonProps) {
+  const router = useRouter();
+  const { currentOrganizationId } = useOrganizationStateStore((state) => state);
   const [hoveredItem, setHoveredItem] = useState<string | null>(null);
 
   const handleMouseEnter = (item: string) => {
@@ -28,7 +32,13 @@ export function AddMemberButton({ onClick }: AddMemberButtonProps) {
         )}
         onMouseEnter={() => handleMouseEnter("member")}
         onMouseLeave={handleMouseLeave}
-        onClick={onClick}
+        onClick={() => {
+          // Navigate to the Members page and display the AddMemberDialog
+          router.push(
+            `/organizations/${currentOrganizationId}/members?addMember=true`
+          );
+          onClick;
+        }}
       >
         <div className="flex h-16 w-16 items-center justify-center rounded-md bg-primary/10">
           <Users className="h-8 w-8 text-primary" />

src/components/ui/members/add-member-button.tsx

@@ -1,17 +1,26 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
 import { AddMemberDialog } from "./add-member-dialog";
 
 interface AddMemberButtonProps {
   onMemberAdded: () => void;
+  /// Force the AddMemberDialog to open
+  openAddMemberDialog: boolean;
 }
 
-export function AddMemberButton({ onMemberAdded }: AddMemberButtonProps) {
+export function AddMemberButton({
+  onMemberAdded,
+  openAddMemberDialog,
+}: AddMemberButtonProps) {
   const [open, setOpen] = useState(false);
 
+  useEffect(() => {
+    setOpen(openAddMemberDialog);
+  }, [openAddMemberDialog]);
+
   return (
     <>
       <Button onClick={() => setOpen(true)}>

src/components/ui/members/add-member-dialog.tsx

@@ -13,7 +13,7 @@ import {
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { useUserMutation } from "@/lib/api/organizations/users";
-import { User, NewUser } from "@/types/user";
+import { NewUser } from "@/types/user";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 
 interface AddMemberDialogProps {

src/components/ui/members/member-container.tsx

@@ -10,6 +10,7 @@ interface MemberContainerProps {
   userSession: UserSession;
   onRefresh: () => void;
   isLoading: boolean;
+  openAddMemberDialog: boolean;
 }
 
 export function MemberContainer({
@@ -18,6 +19,8 @@ export function MemberContainer({
   userSession,
   onRefresh,
   isLoading,
+  /// Force the AddMemberDialog to open
+  openAddMemberDialog,
 }: MemberContainerProps) {
   // Find relationships where current user is either coach or coachee
   const userRelationships = relationships.filter(
@@ -45,7 +48,10 @@ export function MemberContainer({
     <div className="space-y-6">
       <div className="flex justify-between items-center">
         <h2 className="text-2xl font-semibold">Members</h2>
-        <AddMemberButton onMemberAdded={onRefresh} />
+        <AddMemberButton
+          onMemberAdded={onRefresh}
+          openAddMemberDialog={openAddMemberDialog}
+        />
       </div>
       <MemberList users={associatedUsers} />
     </div>