Project member management

frontend/src/app/[locale]/projects/[projectId]/settings/AddMemberDialog.tsx

@@ -4,44 +4,19 @@ import { useState, useEffect, useContext } from 'react';
 import { Button, Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
 import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
-import Config from '@/config/config';
-import { MemberType, UserType } from '@/types/user';
+import { UserType } from '@/types/user';
+import { searchUsers } from './membersControl';
 import CandidatesTable from './CandidatesTable';
-const apiServer = Config.apiServer;
 
 type Props = {
   isOpen: boolean;
-  members: MemberType[];
+  projectId: string;
   onCancel: () => void;
   onAddMember: (memberAdded: UserType) => void;
   messages: SettingsMessages;
 };
 
-// User Search by username
-async function searchUsers(jwt: string, text: string, excludeIdsParam: string) {
-  const fetchOptions = {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${jwt}`,
-    },
-  };
-
-  const url = `${apiServer}/users/find?search=${text}&excludeIds=${excludeIdsParam}`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
-  }
-}
-
-export default function AddMemberDialog({ isOpen, members, onCancel, onAddMember, messages }: Props) {
+export default function AddMemberDialog({ isOpen, projectId, onCancel, onAddMember, messages }: Props) {
   const context = useContext(TokenContext);
   const [searchText, setSearchText] = useState('');
   const [candidates, setCandidates] = useState<UserType[]>([]);
@@ -57,11 +32,7 @@ export default function AddMemberDialog({ isOpen, members, onCancel, onAddMember
       }
 
       try {
-        const excludeIds = members.map((member) => {
-          return member.id;
-        });
-        const excludeIdsParam = excludeIds.join(',');
-        const data = await searchUsers(context.token.access_token, searchText, excludeIdsParam);
+        const data = await searchUsers(context.token.access_token, projectId, searchText);
         setCandidates(data);
       } catch (error: any) {
         console.error('Error in effect:', error.message);

frontend/src/app/[locale]/projects/[projectId]/settings/MembersTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo } from 'react';
 import {
   Button,
   Table,
@@ -50,7 +50,7 @@ export default function MembersTable({ members, onChangeRole, onDeleteMember, me
     });
   }, [sortDescriptor, members]);
 
-  const renderCell = useCallback((member: UserType, columnKey: Key) => {
+  const renderCell = (member: UserType, columnKey: Key) => {
     const cellValue = member[columnKey as keyof UserType];
 
     switch (columnKey) {
@@ -93,7 +93,7 @@ export default function MembersTable({ members, onChangeRole, onDeleteMember, me
       default:
         return cellValue;
     }
-  }, []);
+  };
 
   const classNames = useMemo(
     () => ({

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -83,7 +83,7 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
 
       <AddMemberDialog
         isOpen={isDialogOpen}
-        members={members}
+        projectId={projectId}
         onCancel={() => setIsDialogOpen(false)}
         onAddMember={handleAddMember}
         messages={messages}

frontend/src/app/[locale]/projects/[projectId]/settings/membersControl.ts

@@ -24,6 +24,29 @@ async function fetchProjectMembers(jwt: string, projectId: string) {
   }
 }
 
+async function searchUsers(jwt: string, projectId: string, searchText: string) {
+  const fetchOptions = {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
+    },
+  };
+
+  const url = `${apiServer}/users/find?projectId=${projectId}&search=${searchText}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.error('Error fetching data:', error.message);
+  }
+}
+
 async function addMember(jwt: string, userId: string, projectId: string) {
   const fetchOptions = {
     method: 'POST',
@@ -63,9 +86,6 @@ async function deleteMember(jwt: string, userId: string, projectId: string) {
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
-    const data = await response.json();
-    console.log(data);
-    return data;
   } catch (error: any) {
     console.error('Error fetching data:', error.message);
   }
@@ -94,4 +114,4 @@ async function updateMember(jwt: string, userId: string, projectId: string, role
   }
 }
 
-export { fetchProjectMembers, addMember, deleteMember, updateMember };
+export { fetchProjectMembers, searchUsers, addMember, deleteMember, updateMember };