Add new member dialog in project settings tab (#42)

* Implement add member dialog

* Fix typo

* Display the added pending member

* Seperate form submit handler for add member dialog

* Enable production branch input on repo connected

* Refactor project to include members permissions

* Refactor add member handler

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx

@@ -1,5 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import toast, { Toaster } from 'react-hot-toast';
 
 import { Chip, Button, Typography } from '@material-tailwind/react';
 
@@ -8,24 +9,44 @@ import membersData from '../../../../assets/members.json';
 import projectData from '../../../../assets/projects.json';
 
 import { Member } from '../../../../types/project';
+import AddMemberDialog from './AddMemberDialog';
 
 const FIRST_MEMBER_CARD = 0;
 
 const MembersTabPanel = () => {
   const { id } = useParams();
+  const [addmemberDialogOpen, setAddMemberDialogOpen] = useState(false);
 
   const currProject = useMemo(() => {
     return projectData.find((data) => data.id === Number(id));
   }, [id]);
 
   const members = useMemo(() => {
-    return (
-      currProject?.members.map((memberId) => {
-        return membersData.find((member) => member.id === memberId);
-      }) || []
+    return membersData.filter(
+      (member) =>
+        currProject?.members.some(
+          (projectMember) => projectMember.id === member.id,
+        ),
     );
   }, [currProject]);
 
+  const [updatedMembers, setUpdatedMembers] = useState([...members]);
+
+  const getMemberPermissions = useCallback(
+    (id: number) => {
+      return (
+        currProject?.members.find((projectMember) => projectMember.id === id)
+          ?.permissions || []
+      );
+    },
+    [updatedMembers],
+  );
+
+  const addMemberHandler = useCallback((member: Member) => {
+    setUpdatedMembers((val) => [...val, member]);
+    toast.success('Invitation sent');
+  }, []);
+
   return (
     <div className="p-2 mb-20">
       <div className="flex justify-between mb-2">
@@ -35,24 +56,44 @@ const MembersTabPanel = () => {
             <Chip
               className="normal-case ml-3 font-normal"
               size="sm"
-              value={members.length}
+              value={updatedMembers.length}
             />
           </div>
         </div>
         <div>
-          <Button size="sm">+ Add member</Button>
+          <Button
+            size="sm"
+            onClick={() => setAddMemberDialogOpen((preVal) => !preVal)}
+          >
+            + Add member
+          </Button>
         </div>
       </div>
-      {(members as Member[]).map((member, index) => {
+      {(updatedMembers as Member[]).map((member, index) => {
         return (
           <MemberCard
             member={member}
             key={member.id}
             isFirstCard={index === FIRST_MEMBER_CARD}
             isOwner={member.id === currProject?.ownerId}
+            isPending={member.name === ''}
+            permissions={getMemberPermissions(member.id)}
+            handleDeletePendingMember={(id: number) => {
+              setUpdatedMembers(
+                updatedMembers.filter((member) => member.id !== id),
+              );
+            }}
           />
         );
       })}
+      <AddMemberDialog
+        handleOpen={() => {
+          setAddMemberDialogOpen((preVal) => !preVal);
+        }}
+        open={addmemberDialogOpen}
+        handleAddMember={addMemberHandler}
+      />
+      <Toaster />
     </div>
   );
 };