export default function AddUser()

in pinot-controller/src/main/resources/app/components/User/AddUser.tsx [53:219]

• 166 lines of code
• 17 McCabe index (conditional complexity)

export default function AddUser({
  tableList,
  setUserInfo,
  userProp
}: Props) {
  const PERMISSIONS = ["READ", "CREATE", "UPDATE", "DELETE"];
  const [user, setUser] = useState({
      ...userProp,
      tables: ["DUAL"]
  });
  const [tables, setTables] = useState(tableList);
  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
  };
  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };
  const changeHandler = (field, e)=>{
    let val = e.target.value;
    let userCopy = cloneDeep(user);
    switch (field) {
      case 'username':
        userCopy.username = val;
        break;
      case 'password':
        userCopy.password = val;
        break;
      case 'component':
        userCopy.component = val;
        break;
      case 'role':
        userCopy.role = val;
        break;
      case 'permissions':
        userCopy.permissions = val;
        break;
    }
    setUser(userCopy);
    setUserInfo(userCopy);
  }
  const tableCheckChange = (event)=>{
    let name = event.target.name;
    let checked = event.target.checked;
    if(name){
      let table = cloneDeep(tables);
      if(name === 'ALL' && checked === true){
        table = table.map(item =>{
          return {
            ...item,
            checked: item.name === 'ALL',
            disabled: item.name !== 'ALL'
          }
        })
      } else if(name === 'ALL' && checked === false){
        table = table.map(item =>{
          return {
            ...item,
            checked: item.name === 'ALL' ? false: item.checked,
            disabled: false
          }
        })
      } else{
        table = table.map(item =>{
          return {
            ...item,
            checked: item.name === name ? checked: item.checked
          }
        })
      }
      setTables(table);
      let checkedCollection = [];
      for(let item of table){
        if(item.checked){
          checkedCollection.push(item.name);
        }
      }
      let newUser = {
          ...user,
        tables: checkedCollection
      }
      setUser(newUser)
      setUserInfo(newUser);
    }
  }
  const menuItemStyle = {
    fontSize: '16px',
  }
  return (
      <DialogContent style={{fontSize: '14px'}}>
        <TextField
            autoFocus
            margin="dense"
            id="name"
            label="User Name"
            fullWidth
            value={user.username}
            onChange={(e)=>changeHandler('username', e)}
        />
        <InputLabel htmlFor="standard-adornment-password" style={{marginTop: '10px'}}>Password</InputLabel>
        <Input
            id="standard-adornment-password"
            type={showPassword ? 'text' : 'password'}
            autoComplete='new-password'
            value={user.password}
            onChange={(e)=>changeHandler('password', e)}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                    aria-label="toggle password visibility"
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                >
                  {showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            }
        />
        <FormControl fullWidth style={{margin: '10px 0'}}>
          <InputLabel id="component">Component</InputLabel>
          <Select
              autoWidth={true}
              labelId="component"
              id="component"
              value={user.component}
              label="Component"
              required
              onChange={(e)=>changeHandler('component', e)}

          >
            <MenuItem value={'CONTROLLER'} style={menuItemStyle}>CONTROLLER</MenuItem>
            <MenuItem value={'BROKER'} style={menuItemStyle}>BROKER</MenuItem>
            <MenuItem value={'SERVER'} style={menuItemStyle}>SERVER</MenuItem>
          </Select>
        </FormControl>
        <FormControl fullWidth style={{margin: '10px 0'}}>
          <InputLabel id="role">Role</InputLabel>
          <Select
              labelId="role"
              id="role"
              value={user.role}
              required
              onChange={(e)=>changeHandler('role', e)}
          >
            <MenuItem value={'ADMIN'} style={menuItemStyle}>ADMIN</MenuItem>
            <MenuItem value={'USER'} style={menuItemStyle}>USER</MenuItem>
          </Select>
        </FormControl>
        <FormControl fullWidth style={{margin: '10px 0'}}>
          <InputLabel id="permission">Permissions</InputLabel>
          <Select
              autoWidth={true}
              labelId="permission"
              id="permission"
              value={user.permissions}
              label="Permissions"
              multiple={true}
              required
              renderValue={(selected: Array<String>) => selected.join(', ')}
              onChange={(e)=>changeHandler('permissions', e)}
          >
            {PERMISSIONS.map((name) => (
                <MenuItem key={name} value={name} style={menuItemStyle}>
                  <Checkbox size="small" checked={user.permissions.indexOf(name) > -1} color="primary"/>
                  <span style={{fontSize: '16px'}}>{name}</span>
                </MenuItem>
            ))}