fetch all roles should be from the dialog

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

client/src/pages/user/Types.ts

@@ -21,7 +21,6 @@ export interface UpdateUserRoleProps {
   handleClose: () => void;
   username: string;
   roles: string[];
-  allRoles: string[];
 }
 
 export interface CreateUserProps {

client/src/pages/user/UpdateUserRole.tsx

@@ -5,7 +5,7 @@ import {
   FormGroup,
   FormControlLabel,
 } from '@material-ui/core';
-import { FC, useState } from 'react';
+import { FC, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import { UpdateUserRoleProps, UpdateUserRoleParams } from './Types';
@@ -27,11 +27,11 @@ const UpdateUserRole: FC<UpdateUserRoleProps> = ({
   onUpdate,
   handleClose,
   roles,
-  allRoles,
   username,
 }) => {
   const { t: userTrans } = useTranslation('user');
   const { t: btnTrans } = useTranslation('btn');
+  const [allRoles, setAllRoles] = useState([]);
 
   const [form, setForm] = useState<UpdateUserRoleParams>({
     roles: roles,
@@ -47,6 +47,16 @@ const UpdateUserRole: FC<UpdateUserRoleProps> = ({
     onUpdate(form);
   };
 
+  const fetchAllRoles = async () => {
+    const roles = await UserHttp.getRoles();
+
+    setAllRoles(roles.results.map((r: any) => r.role.name));
+  };
+
+  useEffect(() => {
+    fetchAllRoles();
+  }, []);
+
   return (
     <DialogTemplate
       title={userTrans('updateRoleTitle')}

client/src/pages/user/User.tsx

@@ -73,7 +73,9 @@ const Users = () => {
 
   const onUpdate = async (data: UpdateUserRoleParams) => {
     fetchUsers();
-    openSnackBar(successTrans('update', { name: userTrans('updateRoleSuccess') }));
+    openSnackBar(
+      successTrans('update', { name: userTrans('updateRoleSuccess') })
+    );
     handleCloseDialog();
   };
 
@@ -125,8 +127,6 @@ const Users = () => {
       type: 'iconBtn',
       label: userTrans('editRole'),
       onClick: async () => {
-        const roles = await UserHttp.getRoles();
-
         setDialog({
           open: true,
           type: 'custom',
@@ -139,7 +139,6 @@ const Users = () => {
                 roles={
                   users.filter(u => u.name === selectedUser[0].name)[0].roles
                 }
-                allRoles={roles.results.map((r: any) => r.role.name)}
               />
             ),
           },