fga-eps-mds/2019.1-unbrake

View on GitHub
unbrake-frontend/src/calibration/CalibrationUpload.jsx

Summary

Maintainability
B
4 hrs
Test Coverage
import React from "react";
import iniparser from "iniparser";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import CloudUploadIcon from "@material-ui/icons/CloudUpload";
import { withStyles } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import { initialize, reduxForm } from "redux-form";
import { connect } from "react-redux";
import { addFile } from "../actions/FileActions";
import { API_URL_GRAPHQL } from "../utils/Constants";
import Request from "../utils/Request";
import {
  createQuery,
  allVariablesCalib,
  calibrationJSON,
  empty,
  fieldsDisabledes,
  styles
} from "./CalibrationVariables";
import { messageSistem } from "../actions/NotificationActions";
import { changeCalibTest } from "../actions/TestActions";

const positionVector = 1;
const invalidId = 0;

const createCalibration = (data, dispatch) => {
  const nextPosition = 1;

  const cont = { calibrationtemperatureSet: -1, calibrationforceSet: -1 };

  const newCalibraiton = calibrationJSON.reduce(
    (prevDicionary, calibJSON, index) => {
      if (
        calibJSON === "calibrationtemperatureSet" ||
        calibJSON === "calibrationforceSet"
      )
        cont[calibJSON] += nextPosition;

      return allVariablesCalib[index].reduce((prevDictionaryTwo, variables) => {
        let subDictionay;

        if (
          calibJSON === "calibrationtemperatureSet" ||
          calibJSON === "calibrationforceSet"
        )
          subDictionay = {
            [variables.front]: data[calibJSON][cont[calibJSON]][variables.back]
          };
        else
          subDictionay = { [variables.front]: data[calibJSON][variables.back] };

        return { ...prevDictionaryTwo, ...subDictionay };
      }, prevDicionary);
    },
    {}
  );
  dispatch(initialize("calibration", newCalibraiton));
};

export const getSelectCalibration = (id, dispatch, sendMessage) => {
  let message = "";

  const query = createQuery();
  const url = `${API_URL_GRAPHQL}?query=query{calibration(id:${id}){${query}}}`;

  const method = "GET";

  Request(url, method).then(response => {
    if (response.errors === undefined) {
      const data = response.data.calibration;

      if (data.isDefault === true)
        message = "Calibração padrão carregada com sucesso";
      else message = `Calibração "${data.name}" carregada com sucesso`;

      sendMessage({
        message,
        variante: "success",
        condition: true
      });

      createCalibration(data, dispatch);
    } else {
      message = "Falha ao carregar calibração";
      sendMessage({
        message,
        variante: "error",
        condition: true
      });
    }
  });
};

export const itensSelection = allCalibration => {
  let allCalib = [{ id: 0, name: "" }];

  let notDefaultCalib;
  if (allCalibration !== "")
    notDefaultCalib = allCalibration.filter(calibration => {
      return calibration.isDefault === false && calibration.name !== "";
    });

  if (allCalibration !== "") allCalib = allCalib.concat(notDefaultCalib);

  const itens = allCalib.map(value => {
    return (
      <MenuItem key={value.name + value.id} value={value.id}>
        {value.name}
      </MenuItem>
    );
  });
  return itens;
};

const selectCalibration = (handleChange, calibStates, classes) => {
  return (
    <Grid item xs={4} className={classes.title}>
      <TextField
        id="outlined-select-currency"
        select
        label="Calibrações"
        value={calibStates.calibId}
        onChange={handleChange}
        name="dataBaseCalibration"
        className={classes.formControl}
        margin="normal"
        variant="outlined"
      >
        {itensSelection(calibStates.allCalibration)}
      </TextField>
    </Grid>
  );
};

const defaultButton = handleUpDefault => {
  return (
    <Button onClick={handleUpDefault} color="secondary" variant="contained">
      Calibração Padrão
    </Button>
  );
};

class CalibrationUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allCalibration: ""
    };

    this.fileUpload = this.fileUpload.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleUpDefault = this.handleUpDefault.bind(this);
  }

  componentDidMount() {
    const { dispatch, calibId, sendMessage, calibration } = this.props;

    const url = `${API_URL_GRAPHQL}?query=query{allCalibration{id, name, isDefault}}`;
    const method = "GET";
    Request(url, method).then(json => {
      const data = json.data.allCalibration;
      if (data !== null) {
        this.setState({ allCalibration: data });
      }
    });

    if (Object.keys(calibration.values).length === empty)
      dispatch(initialize("calibration", fieldsDisabledes));

    if (calibId > invalidId) {
      getSelectCalibration(calibId, dispatch, sendMessage);
    }
  }

  handleChange(event) {
    const { dispatch, sendMessage, changeCalib } = this.props;
    const { target } = event;

    const idSelect = target.value === invalidId ? "" : target.value;

    changeCalib({ calibId: idSelect });

    if (
      event.target.name === "dataBaseCalibration" &&
      event.target.value > invalidId
    )
      getSelectCalibration(event.target.value, dispatch, sendMessage);
  }

  handleUpDefault() {
    const { dispatch, sendMessage, changeCalib } = this.props;
    const { allCalibration } = this.state;

    if (allCalibration === "") return;
    const defaultsCalib = allCalibration.filter(calibration => {
      return calibration.isDefault === true;
    });
    if (defaultsCalib.length > empty) {
      const position = defaultsCalib.length - positionVector;
      const { id } = defaultsCalib[position];

      changeCalib({ calibId: id });
      getSelectCalibration(id, dispatch, sendMessage);
    }
  }

  uploadField(field, filename) {
    const { classes } = this.props;

    let archive;

    if (field === "calibration") archive = "Calibração";

    return (
      <Grid container item xs={10} alignItems="center" justify="center">
        <Grid item xs={4} className={classes.title}>
          <h2 justify="left">Upload arquivo de {archive}</h2>
        </Grid>
        <Grid item xs={4} className={classes.grid}>
          <label htmlFor="contained-button-file">
            <input
              id="contained-button-file"
              type="file"
              name={field}
              className={classes.input}
              onChange={e => this.fileUpload(e.target.files[0], field)}
            />
            <Paper className={classes.rootUploadFile}>
              <IconButton component="span">
                <CloudUploadIcon style={{ color: "black" }} />
              </IconButton>
              <span>{filename}</span>
            </Paper>
          </label>
        </Grid>
      </Grid>
    );
  }

  fileUpload(file, name) {
    const { addFileName } = this.props;
    addFileName(file.name);
    const formData = new FormData();
    formData.append("file", name);
    const reader = new FileReader();
    const { dispatch } = this.props;

    reader.onload = e => {
      const content = e.target.result;
      const fileUpload = iniparser.parseString(content);

      if (name === "calibration") {
        const calibration = {
          ...fileUpload.CALIBRA_TEMPERATURA,
          ...fileUpload.CALIBRA_VIBRACAO,
          ...fileUpload.CALIBRA_FORCA,
          ...fileUpload.CALIBRA_VELOCIDADE,
          ...fileUpload.CALIBRA_COMANDO,
          ...fileUpload.CALIBRA_RELACOES
        };
        dispatch(initialize("calibration", calibration));
      }
    };

    reader.readAsText(file, "UTF-8");
  }

  render() {
    const { filename, classes, calibId } = this.props;
    const { allCalibration } = this.state;

    const calibStates = {
      allCalibration,
      calibId
    };

    return (
      <Grid alignItems="center" justify="center" container>
        {this.uploadField("calibration", filename)}
        <Grid
          container
          justify="center"
          item
          alignItems="center"
          xs={12}
          style={{ marginTop: "50px" }}
        >
          {selectCalibration(this.handleChange, calibStates, classes)}
          {defaultButton(this.handleUpDefault)}
        </Grid>
      </Grid>
    );
  }
}

CalibrationUpload.defaultProps = {
  filename: "",
  calibId: "",
  calibration: { values: {} }
};

CalibrationUpload.propTypes = {
  classes: PropTypes.objectOf(PropTypes.string).isRequired,
  addFileName: PropTypes.func.isRequired,
  dispatch: PropTypes.func.isRequired,
  filename: PropTypes.string,
  sendMessage: PropTypes.func.isRequired,
  changeCalib: PropTypes.func.isRequired,
  calibId: PropTypes.number,
  calibration: PropTypes.string
};

const mapDispatchToProps = dispatch => ({
  addFileName: value => dispatch(addFile(value)),
  sendMessage: payload => dispatch(messageSistem(payload)),
  changeCalib: payload => dispatch(changeCalibTest(payload))
});

const mapStateToProps = state => ({
  calibration: state.form.calibration,
  filename: state.fileReducer.filename,
  calibId: state.testReducer.calibId
});

const Upload = reduxForm({
  form: "calibration",
  destroyOnUnmount: false,
  initialValues: {
    OFT1: 0,
    FCT1: 0,
    OFT2: 0,
    FCT2: 0,
    OFF1: 0,
    FCF1: 0,
    OFF2: 0,
    FCF2: 0,
    FCVB: 0,
    OFVB: 0
  }
})(CalibrationUpload);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(Upload));