update types

Signed-off-by: shanghaikid <jiangruiyi@gmail.com>

client/src/pages/user/CreateUser.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 const CreateUser: FC<CreateUserProps> = ({
   handleCreate,
   handleClose,
-  roles,
+  roleOptions,
 }) => {
   const { t: commonTrans } = useTranslation();
   const { t: userTrans } = useTranslation('user');
@@ -127,7 +127,7 @@ const CreateUser: FC<CreateUserProps> = ({
         </Typography>
 
         <FormGroup row>
-          {roles.map((r: RoleOption, index: number) => (
+          {roleOptions.map((r: RoleOption, index: number) => (
             <FormControlLabel
               control={
                 <Checkbox

client/src/pages/user/Types.ts

@@ -13,6 +13,7 @@ export interface CreateUserParams {
 }
 
 export interface UpdateUserRoleParams {
+  username: string;
   roles: string[];
 }
 
@@ -26,7 +27,7 @@ export interface UpdateUserRoleProps {
 export interface CreateUserProps {
   handleCreate: (data: CreateUserParams) => void;
   handleClose: () => void;
-  roles: RoleOption[];
+  roleOptions: RoleOption[];
 }
 
 export interface UpdateUserProps {

client/src/pages/user/UpdateUserRole.tsx

@@ -31,26 +31,24 @@ const UpdateUserRole: FC<UpdateUserRoleProps> = ({
 }) => {
   const { t: userTrans } = useTranslation('user');
   const { t: btnTrans } = useTranslation('btn');
-  const [allRoles, setAllRoles] = useState([]);
+  const [roleOptions, setRoleOptions] = useState([]);
 
   const [form, setForm] = useState<UpdateUserRoleParams>({
+    username: username,
     roles: roles,
   });
 
   const classes = useStyles();
 
   const handleUpdate = async () => {
-    await UserHttp.updateUserRole({
-      username: username,
-      roles: form.roles,
-    });
+    await UserHttp.updateUserRole(form);
     onUpdate(form);
   };
 
   const fetchAllRoles = async () => {
     const roles = await UserHttp.getRoles();
 
-    setAllRoles(roles.results.map((r: any) => r.role.name));
+    setRoleOptions(roles.results.map((r: any) => r.role.name));
   };
 
   useEffect(() => {
@@ -68,7 +66,7 @@ const UpdateUserRole: FC<UpdateUserRoleProps> = ({
     >
       <>
         <FormGroup row>
-          {allRoles.map((r: any, index: number) => (
+          {roleOptions.map((roleOption: string, index: number) => (
             <FormControlLabel
               control={
                 <Checkbox
@@ -80,10 +78,10 @@ const UpdateUserRole: FC<UpdateUserRoleProps> = ({
 
                     if (!checked) {
                       newRoles = newRoles.filter(
-                        (n: string | number) => n !== r
+                        (n: string | number) => n !== roleOption
                       );
                     } else {
-                      newRoles.push(r);
+                      newRoles.push(roleOption);
                     }
 
                     setForm(v => ({ ...v, roles: [...newRoles] }));
@@ -91,9 +89,9 @@ const UpdateUserRole: FC<UpdateUserRoleProps> = ({
                 />
               }
               key={index}
-              label={r}
-              value={r}
-              checked={form.roles.indexOf(r) !== -1}
+              label={roleOption}
+              value={roleOption}
+              checked={form.roles.indexOf(roleOption) !== -1}
             />
           ))}
         </FormGroup>

client/src/pages/user/User.tsx

@@ -112,7 +112,7 @@ const Users = () => {
               <CreateUser
                 handleCreate={handleCreate}
                 handleClose={handleCloseDialog}
-                roles={roles.results.map((r: any) => {
+                roleOptions={roles.results.map((r: any) => {
                   return { label: r.role.name, value: r.role.name };
                 })}
               />