{"size": 13000, "ext": "js", "max_stars_repo_path": "src/components/dashboard/animal/animal-edit.js", "max_stars_repo_name": "Afh21/adopt-client", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/dashboard/animal/animal-edit.js", "max_issues_repo_name": "Afh21/adopt-client", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/dashboard/animal/animal-edit.js", "max_forks_repo_name": "Afh21/adopt-client", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.6803652968, "max_line_length": 94, "alphanum_fraction": 0.4190769231}
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import moment from "moment";
import axios from "axios";

import {
  updateAnimal,
  getProfileAnimal,
  updatePhotoAnimal
} from "../../../redux/actions/animals";
import {
  getAllTypeBreeds,
  getAllTypeRhs
} from "../../../redux/actions/settings/typeAction";

import {
  Form,
  Icon,
  Input,
  Button,
  Select,
  DatePicker,
  Divider,
  Row,
  Col,
  Card,
  Tooltip,
  Switch,
  Tag
} from "antd";
import "./animal.css";

const Option = Select.Option;
const FormItem = Form.Item;
const { Meta } = Card;

class AnimalEdit extends Component {
  constructor(props) {
    super(props);

    this.onFormSubmitUpdatePhoto = this.onFormSubmitUpdatePhoto.bind(this);
    this.onChangeSetFile = this.onChangeSetFile.bind(this);
  }
  state = {
    visibleTooltip: true,
    formToUpdateImage: false,
    file: null
  };

  componentDidMount = () => {
    this.props.getProfileAnimal(this.props.match.params.animalId);

    this.props.getAllTypeBreeds();
    this.props.getAllTypeRhs();
  };

  handleCancel = () => {
    this.props.history.goBack();
  };

  handleSubmit = e => {
    const { updateAnimal } = this.props;
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        values.born = values.born._d;
        updateAnimal(this.props.animals.animal._id, values, this.props.history);
      }
    });
  };

  onChangeVisibleTooltip = () => {
    this.setState({
      visibleTooltip: !this.state.visibleTooltip,
      formToUpdateImage: !this.state.formToUpdateImage
    });
  };

  onFormSubmitUpdatePhoto = e => {
    e.preventDefault();

    const formData = new FormData();
    formData.append("photo", this.state.file);
    const config = {
      headers: {
        "content-type": "multipart/form-data"
      }
    };

    axios
      .post(
        `http://localhost:5000/master/animal/update/photo/${
          this.props.animals.animal._id
        } `,
        formData,
        config
      )
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  };

  // Set file.
  onChangeSetFile = e => {
    this.setState({ file: e.target.files[0] });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { breeds, rhs, animals } = this.props;

    // console.log("File", this.state.file);
    console.log("animals: ", animals.animal.image);

    return (
      <div className="">
        <Row>
          {/* ======= IMAGE ======= */}
          <Col span={12}>
            <Card
              hoverable
              style={{
                width: 300,
                textAlign: "center",
                margin: " 0px auto"
              }}
              cover={
                <img
                  alt="example"
                  src={
                    animals.animal.image !== null
                      ? "http://localhost:5000" + animals.animal.image
                      : "http://denrakaev.com/wp-content/uploads/2015/03/no-image-800x511.png"
                  }
                />
              }
              actions={[
                <Tag>
                  Tipo: {animals.animal.animal === "cat" ? "Gato" : " Perro "}
                </Tag>,
                <Tooltip
                  placement="right"
                  title="¿Deseas cambiar la foto?"
                  visible={this.state.visibleTooltip}
                >
                  <Switch onChange={this.onChangeVisibleTooltip} />
                </Tooltip>
              ]}
            >
              <Meta title={animals.animal.name} />
            </Card>

            {/* ================ FORM PARA ACTUALIZAR IMAGE ================ */}

            {this.state.formToUpdateImage ? (
              <Form
                style={{ margin: "20px" }}
                layout="inline"
                onSubmit={this.onFormSubmitUpdatePhoto}
              >
                <FormItem label="Foto">
                  <Input
                    type="file"
                    style={{ width: "100%", padding: "10px" }}
                    name="photo"
                    onChange={this.onChangeSetFile}
                  />
                </FormItem>
                <FormItem>
                  <Button type="primary" htmlType="submit" icon="edit">
                    Actualizar Foto
                  </Button>
                </FormItem>
              </Form>
            ) : null}

            {/* ================ FORM PARA ACTUALIZAR IMAGE ================ */}
          </Col>
          {/* ======= IMAGE ======= */}

          <Col span={12}>
            <Form layout="horizontal" onSubmit={this.handleSubmit}>
              <Divider orientation="left">** Actualizar animal</Divider>
              <FormItem label="Nombre del animal">
                {getFieldDecorator("name", {
                  initialValue: animals.animal.name,
                  rules: [
                    {
                      required: true,
                      message: "Por favor ingrese el nombre del animal"
                    }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="Nombre del animal"
                  />
                )}
              </FormItem>

              <FormItem label="Animal">
                {getFieldDecorator("animal", {
                  initialValue: animals.animal.animal,
                  rules: [
                    {
                      required: true,
                      message: "Por favor seleccione tipo de animal"
                    }
                  ]
                })(
                  <Select placeholder="Tipo de animal">
                    <Option value="dog">Perro</Option>
                    <Option value="cat">Gato</Option>
                  </Select>
                )}
              </FormItem>

              <FormItem label="Rh">
                {getFieldDecorator("rh", {
                  initialValue: animals.animal.rh,
                  rules: [
                    {
                      required: true,
                      message: "Por favor seleccione el tipo de sangre"
                    }
                  ]
                })(
                  <Select placeholder="Tipo de rh">
                    {rhs.rhs.map((rh, index) => (
                      <Option
                        style={{ textTransform: "capitalize" }}
                        key={index}
                        value={`${rh._id}`}
                      >{`${rh.name}`}</Option>
                    ))}
                  </Select>
                )}
              </FormItem>

              <FormItem label="Raza">
                {getFieldDecorator("breed", {
                  initialValue: animals.animal.breed,
                  rules: [
                    {
                      required: true,
                      message: "Por favor seleccione la raza"
                    }
                  ]
                })(
                  <Select placeholder="Tipo de raza">
                    {breeds.breeds.map((breed, index) => (
                      <Option
                        style={{ textTransform: "capitalize" }}
                        key={index}
                        value={`${breed._id}`}
                      >{`${breed.name}`}</Option>
                    ))}
                  </Select>
                )}
              </FormItem>

              <FormItem label="Género">
                {getFieldDecorator("genre", {
                  initialValue: animals.animal.genre,
                  rules: [
                    {
                      required: true,
                      message: "Por favor seleccione tipo de género"
                    }
                  ]
                })(
                  <Select placeholder="Tipo de género">
                    <Option value="male">Macho</Option>
                    <Option value="female">Hembra</Option>
                  </Select>
                )}
              </FormItem>

              <FormItem label="Color">
                {getFieldDecorator("color", {
                  initialValue: animals.animal.color,
                  rules: [
                    {
                      required: true,
                      message: "Por favor ingrese el color del animal"
                    }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon
                        type="highlight"
                        style={{ color: "rgba(0,0,0,.25)" }}
                      />
                    }
                    placeholder="Color del animal"
                  />
                )}
              </FormItem>

              <FormItem label="Altura del animal">
                {getFieldDecorator("height", {
                  initialValue: animals.animal.height,
                  rules: [
                    {
                      required: true,
                      message: "Por favor ingrese la altura del animal"
                    }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon
                        type="colum-height"
                        style={{ color: "rgba(0,0,0,.25)" }}
                      />
                    }
                    addonAfter="cm"
                    placeholder="Altura del animal"
                  />
                )}
              </FormItem>

              <FormItem label="Peso del animal">
                {getFieldDecorator("weight", {
                  initialValue: animals.animal.weight,
                  rules: [
                    {
                      required: true,
                      message: "Por favor ingrese el peso del animal."
                    }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon
                        type="colum-height"
                        style={{ color: "rgba(0,0,0,.25)" }}
                      />
                    }
                    addonAfter="kg"
                    placeholder="Peso del animal"
                  />
                )}
              </FormItem>

              <FormItem label="Fecha de nacimiento">
                {getFieldDecorator("born", {
                  initialValue: moment(animals.animal.born, "YYYY/MM/DD"),
                  rules: [
                    {
                      required: true,
                      message: "Por favor ingrese el peso del animal."
                    }
                  ]
                })(
                  <DatePicker
                  // defaultValue={moment(animals.animal.born, "YYYY-MM-DD")}
                  // format={"YYYY/MM/DD"}
                  />
                )}
              </FormItem>

              <FormItem label="Estado ">
                {getFieldDecorator("state", {
                  initialValue: animals.animal.state,
                  rules: [
                    {
                      required: true,
                      message: "Por favor seleccione el estado del animal"
                    }
                  ]
                })(
                  <Select placeholder="Estado del animal">
                    <Option value="healthy">Saludable</Option>
                    <Option value="Sick">Enfermo</Option>
                  </Select>
                )}
              </FormItem>

              <Divider> </Divider>

              <FormItem>
                <Button type="primary" htmlType="submit" icon="edit">
                  Actualizar
                </Button>
                &nbsp; &nbsp;
                <Button icon="arrow-left" onClick={this.handleCancel}>
                  Cancelar
                </Button>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </div>
    );
  }
}

AnimalEdit.propTypes = {
  getAllTypeBreeds: PropTypes.func.isRequired, // Redux
  getAllTypeRhs: PropTypes.func.isRequired, // Redux
  getProfileAnimal: PropTypes.func.isRequired, // Redux
  updateAnimal: PropTypes.func.isRequired, // Redux
  updatePhotoAnimal: PropTypes.func.isRequired, // Redux
  breeds: PropTypes.object.isRequired, // Redux
  rhs: PropTypes.object.isRequired, // Redux
  auth: PropTypes.object.isRequired,
  error: PropTypes.object.isRequired,
  animals: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  error: state.error,
  rhs: state.rhs,
  breeds: state.breeds,
  animals: state.animals
});

export default connect(
  mapStateToProps,
  {
    getAllTypeBreeds,
    getAllTypeRhs,
    updateAnimal,
    getProfileAnimal,
    updatePhotoAnimal
  }
)(Form.create()(AnimalEdit));
