Merge pull request #95 from refactor-group/88-feature-add-member-management-page-delete-users

Add Delete User

Author: calebbourg

package-lock.json

@@ -66,7 +66,6 @@ export default function MembersPage({
 
   return (
     <div className="container mx-auto p-6 space-y-8">
-      <h1 className="text-3xl font-bold">Members</h1>
       <MemberContainer
         users={users}
         relationships={relationships}

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

@@ -1,18 +1,74 @@
+import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
+import { useAuthStore } from "@/lib/providers/auth-store-provider";
+import { useUserMutation } from "@/lib/api/organizations/users";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
+import { OrganizationStateStore } from "@/lib/stores/organization-state-store";
+import { AuthStore } from "@/lib/stores/auth-store";
+import { Id } from "@/types/general";
+
 interface MemberCardProps {
   firstName: string;
   lastName: string;
-  email?: string;
+  email: string;
+  userId: Id;
+  userRelationships: CoachingRelationshipWithUserNames[];
+  onRefresh: () => void;
 }
 
-export function MemberCard({ firstName, lastName, email }: MemberCardProps) {
+export function MemberCard({
+  firstName,
+  lastName,
+  email,
+  userId,
+  userRelationships,
+  onRefresh,
+}: MemberCardProps) {
+  const currentOrganizationId = useOrganizationStateStore(
+    (state: OrganizationStateStore) => state.currentOrganizationId
+  );
+  const { userSession } = useAuthStore((state: AuthStore) => state);
+  const { deleteNested: deleteUser } = useUserMutation(currentOrganizationId);
+
+  // Check if current user is a coach in any of this user's relationships
+  // and make sure we can't delete ourselves
+  const canDeleteUser = userRelationships.some(
+    (rel) => rel.coach_id === userSession.id && userId !== userSession.id
+  );
+
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete this member?")) {
+      return;
+    }
+
+    try {
+      await deleteUser(currentOrganizationId, userId);
+      onRefresh();
+    } catch (error) {
+      console.error("Error deleting user:", error);
+      // TODO: Show an error toast here once we start using toasts for showing operation results.
+    }
+  };
+
   return (
-    <div className="flex items-center p-4 hover:bg-accent/50 transition-colors cursor-pointer">
+    <div className="flex items-center p-4 hover:bg-accent/50 transition-colors">
       <div className="flex-1">
         <h3 className="font-medium">
           {firstName} {lastName}
         </h3>
         {email && <p className="text-sm text-muted-foreground">{email}</p>}
       </div>
+      {canDeleteUser && (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleDelete}
+          className="text-destructive hover:text-destructive"
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      )}
     </div>
   );
 }

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

@@ -52,7 +52,7 @@ export function MemberContainer({
   return (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
-        <h2 className="text-2xl font-semibold">Members</h2>
+        <h3 className="text-2xl font-semibold">Members</h3>
         {/* Only show the button if user is a coach to _some_ user within the
         scope of the organization. We may come back and add this directly to user
         data.  */}
@@ -63,7 +63,11 @@ export function MemberContainer({
           />
         )}
       </div>
-      <MemberList users={associatedUsers} />
+      <MemberList
+        users={associatedUsers}
+        relationships={userRelationships}
+        onRefresh={onRefresh}
+      />
     </div>
   );
 }

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

@@ -1,12 +1,28 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { User } from "@/types/user";
 import { MemberCard } from "./member-card";
+import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
+import { Id } from "@/types/general";
 
 interface MemberListProps {
   users: User[];
+  relationships: CoachingRelationshipWithUserNames[];
+  onRefresh: () => void;
 }
 
-export function MemberList({ users }: MemberListProps) {
+export function MemberList({
+  users,
+  relationships,
+  onRefresh,
+}: MemberListProps) {
+  // Create a mapping of user IDs to their associated relationships
+  const userRelationshipsMap = users.reduce((accumulator_map, user) => {
+    accumulator_map[user.id] = relationships.filter(
+      (rel) => rel.coach_id === user.id || rel.coachee_id === user.id
+    );
+    return accumulator_map;
+  }, {} as Record<Id, CoachingRelationshipWithUserNames[]>);
+
   return (
     <Card className="w-full">
       <CardContent className="p-6">
@@ -17,6 +33,9 @@ export function MemberList({ users }: MemberListProps) {
               firstName={user.first_name}
               lastName={user.last_name}
               email={user.email}
+              userId={user.id}
+              userRelationships={userRelationshipsMap[user.id]}
+              onRefresh={onRefresh}
             />
           ))}
         </div>

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

@@ -65,6 +65,17 @@ export const ActionApi = {
    */
   delete: async (id: Id): Promise<Action> =>
     EntityApi.deleteFn<null, Action>(`${ACTIONS_BASEURL}/${id}`),
+
+  /**
+   * Deletes an action nested under another entity (foreign key relationship).
+   *
+   * @param entityId The ID of the entity under which to delete the action
+   * @param actionId The ID of the action to delete
+   * @returns Promise resolving to the deleted Action object
+   */
+  deleteNested: async (_entityId: Id, _actionId: Id): Promise<Action> => {
+    throw new Error("Delete nested operation not implemented");
+  },
 };
 
 /**
@@ -174,5 +185,6 @@ export const useActionMutation = () => {
     createNested: ActionApi.createNested,
     update: ActionApi.update,
     delete: ActionApi.delete,
+    deleteNested: ActionApi.deleteNested,
   });
 };

src/lib/api/actions.ts

@@ -69,6 +69,17 @@ export const AgreementApi = {
    */
   delete: async (id: Id): Promise<Agreement> =>
     EntityApi.deleteFn<null, Agreement>(`${AGREEMENTS_BASEURL}/${id}`),
+
+  /**
+   * Deletes an agreement nested under another entity (foreign key relationship).
+   *
+   * @param entityId The ID of the entity under which to delete the agreement
+   * @param agreementId The ID of the agreement to delete
+   * @returns Promise resolving to the deleted Agreement object
+   */
+  deleteNested: async (_entityId: Id, agreementId: Id): Promise<Agreement> => {
+    throw new Error("Delete nested operation not implemented");
+  },
 };
 
 /**
@@ -175,5 +186,6 @@ export const useAgreementMutation = () => {
     createNested: AgreementApi.createNested,
     update: AgreementApi.update,
     delete: AgreementApi.delete,
+    deleteNested: AgreementApi.deleteNested,
   });
 };

src/lib/api/agreements.ts

@@ -91,6 +91,20 @@ export const CoachingRelationshipApi = {
   delete: async (_id: Id) => {
     throw new Error("Delete operation not implemented");
   },
+
+  /**
+   * Deletes a coaching relationship nested under another entity (foreign key relationship).
+   *
+   * @param entityId The ID of the entity under which to delete the coaching relationship
+   * @param relationshipId The ID of the coaching relationship to delete
+   * @returns Promise resolving to the deleted CoachingRelationshipWithUserNames object
+   */
+  deleteNested: async (
+    _organizationId: Id,
+    _relationshipId: Id
+  ): Promise<CoachingRelationshipWithUserNames> => {
+    throw new Error("Delete nested operation not implemented");
+  },
 };
 
 /**
@@ -185,6 +199,7 @@ export const useCoachingRelationshipMutation = (organizationId: Id) => {
       createNested: CoachingRelationshipApi.createNested,
       update: CoachingRelationshipApi.update,
       delete: CoachingRelationshipApi.delete,
+      deleteNested: CoachingRelationshipApi.deleteNested,
     }
   );
 };

src/lib/api/coaching-relationships.ts

@@ -95,6 +95,20 @@ export const CoachingSessionApi = {
     EntityApi.deleteFn<null, CoachingSession>(
       `${COACHING_SESSIONS_BASEURL}/${id}`
     ),
+
+  /**
+   * Deletes a coaching session nested under another entity (foreign key relationship).
+   *
+   * @param entityId The ID of the entity under which to delete the coaching session
+   * @param coachingSessionId The ID of the coaching session to delete
+   * @returns Promise resolving to the deleted CoachingSession object
+   */
+  deleteNested: async (
+    _entityId: Id,
+    coachingSessionId: Id
+  ): Promise<CoachingSession> => {
+    throw new Error("Delete nested operation not implemented");
+  },
 };
 
 /**
@@ -195,6 +209,7 @@ export const useCoachingSessionMutation = () => {
       createNested: CoachingSessionApi.createNested,
       update: CoachingSessionApi.update,
       delete: CoachingSessionApi.delete,
+      deleteNested: CoachingSessionApi.deleteNested,
     }
   );
 };

src/lib/api/coaching-sessions.ts

@@ -374,6 +374,7 @@ export namespace EntityApi {
       createNested: (id: Id, entity: T) => Promise<U>;
       update: (id: Id, entity: T) => Promise<U>;
       delete: (id: Id) => Promise<U>;
+      deleteNested: (entityId: Id, nestedEntityId: Id) => Promise<U>;
     }
   ) => {
     const [isLoading, setIsLoading] = useState(false);
@@ -444,6 +445,17 @@ export namespace EntityApi {
        * @returns Promise resolving to the deleted entity
        */
       delete: (id: Id) => executeWithState(() => api.delete(id)),
+
+      /**
+       * Deletes an entity nested under another entity (foreign key relationship).
+       *
+       * @param entityId The entity's id under which to delete entity
+       * @param nestedEntityId The nested entity's id to delete
+       * @returns Promise resolving to the deleted entity
+       */
+      deleteNested: (entityId: Id, nestedEntityId: Id) =>
+        executeWithState(() => api.deleteNested(entityId, nestedEntityId)),
+
       /** Indicates if any operation is currently in progress */
       isLoading,
       /** Contains the error if the last operation failed, null otherwise */