feat: add project settings page

frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx

@@ -0,0 +1,100 @@
+'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>
+  );
+}