101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { useState, useEffect, useContext } from 'react';
|
|
import { Button } from '@nextui-org/react';
|
|
import { Plus } from 'lucide-react';
|
|
import { MemberType, UserType } from '@/types/user';
|
|
import { MembersMessages } from '@/types/members';
|
|
import { TokenContext } from '@/utils/TokenProvider';
|
|
import MembersTable from './MembersTable';
|
|
import AddMemberDialog from './AddMemberDialog';
|
|
import { fetchProjectMembers, addMember, deleteMember, updateMember } from './membersControl';
|
|
|
|
type Props = {
|
|
projectId: string;
|
|
messages: MembersMessages;
|
|
locale: string;
|
|
};
|
|
|
|
export default function MembersPage({ projectId, messages, locale }: Props) {
|
|
const context = useContext(TokenContext);
|
|
const [members, setMembers] = useState<MemberType[]>([]);
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function fetchDataEffect() {
|
|
if (!context.isSignedIn()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await fetchProjectMembers(context.token.access_token, projectId);
|
|
setMembers(data);
|
|
} catch (error: any) {
|
|
console.error('Error in effect:', error.message);
|
|
}
|
|
}
|
|
|
|
fetchDataEffect();
|
|
}, [context]);
|
|
|
|
const handleAddMember = async (userAdded: UserType) => {
|
|
const newMember = await addMember(context.token.access_token, userAdded.id, projectId);
|
|
newMember.User = userAdded;
|
|
const updateMembers = [...members];
|
|
updateMembers.push(newMember);
|
|
setMembers(updateMembers);
|
|
|
|
setIsDialogOpen(false);
|
|
};
|
|
|
|
const handleDeleteMember = async (userDeleted: UserType) => {
|
|
await deleteMember(context.token.access_token, userDeleted.id, projectId);
|
|
setMembers(members.filter((member) => member.User.id !== userDeleted.id));
|
|
};
|
|
|
|
const handleChangeRole = async (userEdit: UserType, role: number) => {
|
|
await updateMember(context.token.access_token, userEdit.id, projectId, role);
|
|
setMembers((prevMembers) => {
|
|
return prevMembers.map((member) => {
|
|
if (member.User.id === userEdit.id) {
|
|
return { ...member, role: role };
|
|
}
|
|
return member;
|
|
});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
|
|
<div className="w-full p-3 flex items-center justify-between">
|
|
<h3 className="font-bold">{messages.memberManagement}</h3>
|
|
<Button
|
|
startContent={<Plus size={16} />}
|
|
size="sm"
|
|
color="primary"
|
|
isDisabled={!context.isProjectManager(Number(projectId))}
|
|
onClick={() => setIsDialogOpen(true)}
|
|
>
|
|
{messages.addMember}
|
|
</Button>
|
|
</div>
|
|
|
|
<MembersTable
|
|
members={members}
|
|
isDisabled={!context.isProjectManager(Number(projectId))}
|
|
onChangeRole={handleChangeRole}
|
|
onDeleteMember={handleDeleteMember}
|
|
messages={messages}
|
|
/>
|
|
|
|
<AddMemberDialog
|
|
isOpen={isDialogOpen}
|
|
projectId={projectId}
|
|
onCancel={() => setIsDialogOpen(false)}
|
|
onAddMember={handleAddMember}
|
|
messages={messages}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|