bugfixes

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

+
+
+export default function UsernameForm() {
+
+}
\ No newline at end of file

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

 import './member-form.scss';
 import RoleForm from 'components/forms/RoleForm';
 import { Team, TeamMember, TeamRole } from 'adapters/team';
+import { useState } from 'react';
 
 interface Props {
     roles: TeamRole[];
@@ -8,11 +9,14 @@ interface Props {
 }
 
 export default function MemberForm({ roles, team }: Props) {
+    const [role, setRole] = useState<TeamRole>();
+    const [username, setUsername] = useState<string>();
     return (
         <div className="member-form">
-            asdf
-            
-            {/*<RoleForm roles={roles} team={team} />*/}
+            {
+                
+            }
+            <RoleForm roles={roles} team={team} setResult={setRole} />
         </div>
     )
 }
\ No newline at end of file

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

@@ -5,30 +5,38 @@ import Button from 'components/ui/Button';
 interface Props {
     roles: TeamRole[];
     setEdit: Function;
-    member: TeamMember;
+    member?: TeamMember;
+    setResult?: Function
     team: Team;
+    setAllRoles: (state: any) => void
 }
 
-export default function RoleForm({ roles, setEdit, member, team }: Props) {
-    const [currentRole, setRole] = useState(member.role.id);
-    const [allRoles, setRoles] = useState(roles);
+export default function RoleForm({ roles, setEdit, member, team, setResult, setAllRoles }: Props) {
+    const [currentRole, setRole] = useState(member?.role.id);
 
     const onSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
-        await updateTeamMember(team.id, { user: member.id, role: currentRole });
-        window.location.reload();
-    }, [currentRole, member, team]);
+        if (currentRole) {
+            if (setResult) {
+                setResult(currentRole);
+            }
+            if (member) {
+                await updateTeamMember(team.id, { user: member.id, role: currentRole });
+                window.location.reload();
+            }
+        }
+    }, [currentRole, member, team, setResult]);
 
     const onDelete = useCallback(async (id: string) => {
         await deleteTeamRole(team.id, id);
-        setRoles(state => state.filter(role => role.id !== id));
-    }, [team]);
+        setAllRoles((state: any) => state.filter((role: any) => role.id !== id));
+    }, [team, setAllRoles]);
 
     return (
         <form className="role-change-form" onSubmit={onSubmit}>
-            <h2>Change the role of {member.username}</h2>
+            <h2>Update the role</h2>
             {
-                allRoles.map((role) => (
+                roles.map((role) => (
                     <div className="role-item" key={role.id}>
                         <input
                             type="radio"

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

@@ -8,6 +8,7 @@ interface Props {
     role?: TeamRole;
     team: Team;
     setEdit: Function;
+    setAllRoles: (state: any) => void
 }
 
 export function validateName(name: string): string | null {
@@ -17,21 +18,22 @@ export function validateName(name: string): string | null {
     return 'The name is required';
 }
 
-export default function RoleEditForm({ role, team, setEdit }: Props) {
+export default function RoleEditForm({ role, team, setEdit, setAllRoles }: Props) {
     const [name, setName] = useState(role?.name ?? '');
 
     const onSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
         if (validateName(name) === null) {
             if (!role?.id) {
-                await createTeamRole(team.id, name);
+                const role = await createTeamRole(team.id, name);
+                setAllRoles((state: any) => [...state, role]);
                 setEdit(null);
             } else {
                 //todo edit team role
                 setEdit(null);
             }
         }
-    }, [name, team, setEdit, role]);
+    }, [name, team, setEdit, role, setAllRoles]);
 
     return (
         <form className="role-edit-form" onSubmit={onSubmit}>

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

@@ -7,22 +7,19 @@ import './role-form.scss';
 interface Props {
     roles: TeamRole[];
     team: Team;
-    member: TeamMember
+    member?: TeamMember;
+    setResult?: Function;
 }
 
-export default function RoleForm({ roles, team, member }: Props) {
+export default function RoleForm({ roles, team, member, setResult }: Props) {
     const [edit, setEdit] = useState<TeamRole | null>(null);
+    const [allRoles, setRoles] = useState(roles);
     return (
         <>
             {
-                edit === null && (
-                    <RoleChangeForm roles={roles} setEdit={setEdit} team={team} member={member}/>
-                )
-            }
-            {
-                edit && (
-                    <RoleEditForm role={edit} team={team} setEdit={setEdit}/>
-                )
+                edit === null ?
+                    <RoleChangeForm roles={allRoles} setEdit={setEdit} team={team} member={member} setAllRoles={setRoles} setResult={setResult} />
+                    : <RoleEditForm role={edit} team={team} setEdit={setEdit} setAllRoles={setRoles} />
             }
         </>
     )