permissions_form.jsx

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { updatePermissions } from '../service';

class PermissionsForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      permissions: [],
      loading: false,
      error: '',
    };
  }
  componentDidMount(props) {
    // Traspasamos los permisos al estado para poder trabajar con ellos
    const { permissions } = props;
    this.setState({
      permissions,
    });
  }
  handlePermissionChange = permissionId => {
    const auxPermissions = Object.assign([], this.state.permissions);
    const auxP = auxPermissions.filter(p => p.id === permissionId)[0];
    auxP.checked = !auxP.checked;
    this.setState({
      permissions: auxPermissions,
    });
  };

  submitChanges = () => {
    this.setState({ loading: true }, () => {
      updatePermissions(options).then(
        response => this.updatePermissionsSuccess(response),
        error => this.updatePermissionsError(error),
      );
    });
  };

  updatePermissionsSuccess = () => {
    this.setState({ loading: false });
    // Notificar al usuario, mostrar un modal, un alert, un badge, etc.
  };

  updatePermissionsError = () => {
    this.setState({ loading: true });
    // Notificar al usuario, mostrar un modal, un alert, un badge, etc.
  };

  render() {
    const { permissions } = this.state;
    return (
      <React.Fragment>
        {permissions.map(p => (
          <FormControlLabel
            control={
              <Checkbox
                checked={p.checked}
                onChange={this.handlePermissionChange(p.id)}
                value={p.name}
              />
            }
            label={p.label}
          />
        ))}
        <Button onClick={this.submitChanges()}>Guardar cambios</Button>
      </React.Fragment>
    );
  }
}