started implementing possibility to add user to team

client/src/components/forms/MemberForm/index.tsx

+import './member-form.scss';
+import RoleForm from 'components/forms/RoleForm';
+import { Team, TeamMember, TeamRole } from 'adapters/team';
+
+interface Props {
+    roles: TeamRole[];
+    team: Team;
+}
+
+export default function MemberForm({ roles, team }: Props) {
+    return (
+        <div className="member-form">
+            asdf
+            
+            {/*<RoleForm roles={roles} team={team} />*/}
+        </div>
+    )
+}
\ No newline at end of file

client/src/components/forms/RoleForm/RoleChangeForm.tsx

-import { Team, TeamMember, TeamRole, updateTeamMember } from 'adapters/team';
+import { deleteTeamRole, Team, TeamMember, TeamRole, updateTeamMember } from 'adapters/team';
 import { FormEvent, useCallback, useState } from 'react';
 import Button from 'components/ui/Button';
 
@@ -11,25 +11,35 @@ interface Props {
 
 export default function RoleForm({ roles, setEdit, member, team }: Props) {
     const [currentRole, setRole] = useState(member.role.id);
+    const [allRoles, setRoles] = useState(roles);
+
     const onSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
         await updateTeamMember(team.id, { user: member.id, role: currentRole });
         window.location.reload();
     }, [currentRole, member, team]);
+
+    const onDelete = useCallback(async (id: string) => {
+        await deleteTeamRole(team.id, id);
+        setRoles(state => state.filter(role => role.id !== id));
+    }, [team]);
+
     return (
         <form className="role-change-form" onSubmit={onSubmit}>
+            <h2>Change the role of {member.username}</h2>
             {
-                roles.map((role) => (
+                allRoles.map((role) => (
                     <div className="role-item" key={role.id}>
                         <input
                             type="radio"
                             name={role.id}
                             id={role.id}
-                            onChange={() => setRole(role.id)} 
+                            onChange={() => setRole(role.id)}
                             checked={currentRole === role.id}
                         />
                         <label htmlFor={role.id}>{role.name}</label>
                         <div onClick={() => setEdit(role)}>edit</div>
+                        <div onClick={() => onDelete(role.id)}>delete</div>
                     </div>
                 ))}
             <div className="add-btn role-item" onClick={() => setEdit({})}>

client/src/components/forms/RoleForm/RoleEditForm.tsx

@@ -35,6 +35,7 @@ export default function RoleEditForm({ role, team, setEdit }: Props) {
 
     return (
         <form className="role-edit-form" onSubmit={onSubmit}>
+            <h2>{!role?.id ? 'Create a new role' : 'Edit role ' + role.name}</h2>
             <TextInput
                 label="Role name"
                 name="name"

client/src/components/layout/MemberList/index.tsx

 import './member-list.scss';
 import TeamMember, { TeamMemberProps } from 'components/ui/TeamMember';
+import { ReactNode, useState } from 'react';
+import Popup from 'components/ui/Popup';
 
 interface Props {
     members: TeamMemberProps[];
+    addContent?: ReactNode
 }
 
-export default function MemberList({ members }: Props) {
+export default function MemberList({ members, addContent }: Props) {
+    const [showAdd, setShowAdd] = useState(false);
     return (
-        <div className="team-member-list">
-            <div className="add-btn">
-                +
+        <>
+            {
+                addContent && showAdd &&
+                <Popup onClose={() => setShowAdd(false)}>
+                    {addContent}
+                </Popup>
+            }
+            <div className="team-member-list">
+                {
+                    addContent &&
+                    <div className="add-btn" onClick={() => setShowAdd(true)}>
+                        +
+                    </div>
+                }
+                {members.map((member) => (
+                    <TeamMember key={member.user.id} {...member} />
+                ))}
             </div>
-            {members.map((member) => (
-                <TeamMember key={member.user.id} {...member} />
-            ))}
-        </div>
+        </>
     );
 }
\ No newline at end of file

client/src/pages/Teams/TeamsMembers/index.tsx

@@ -2,6 +2,7 @@ import './teams-members.scss';
 import MemberList from 'components/layout/MemberList';
 import { getTeamRoles, Team, TeamMember, TeamRole } from 'adapters/team';
 import RoleForm from 'components/forms/RoleForm';
+import MemberForm from 'components/forms/MemberForm';
 import { useEffect, useState } from 'react';
 
 interface Props {
@@ -15,7 +16,7 @@ export default function TeamsMembers({ members, team }: Props) {
         getTeamRoles(team.id).then((roles) => {
             setRoles(roles);
         })
-    }, [])
+    }, []);
 
     const teamMembers = members.map(member => {
         return {
@@ -25,16 +26,16 @@ export default function TeamsMembers({ members, team }: Props) {
                 label: 'Edit role',
                 popupContent: (
                     <>
-                        <h2>Change the role of {member.username}</h2>
                         <RoleForm roles={roles} team={team} member={member} />
                     </>
                 )
             }]
         }
-    })
+    });
+
     return (
         <section className="teams-members-section">
-            <MemberList members={teamMembers} />
+            <MemberList members={teamMembers} addContent={<MemberForm roles={roles} team={team} />} />
         </section>
     )
 }
\ No newline at end of file