Snippet to create a new care patient in a piece of medical software I've built

profile.js

import React, { PureComponent } from "react";
import Link from "gatsby-link";
import fire from "../fire";
import { Route, Redirect } from "react-router-dom";
import MapGL, { Marker, Popup, NavigationControl } from "react-map-gl";
import FileUploader from "react-firebase-file-uploader";
import cx from "classnames";
import _ from "lodash";
import { connect } from "react-redux";
import "whatwg-fetch";

import "../layouts/css/fcss.css";
import "../layouts/css/entry.css";

import PageNav from "../components/PageNav";
import RowRX from "../components/RowRX";

class NewPerson extends PureComponent {
  constructor(props) {
    super(props);

    this.openEditForm = this.openEditForm.bind(this);
    this.handleAddDisplay = this.handleAddDisplay.bind(this);
    this.handleAddRecord = this.handleAddRecord.bind(this);

    this.handleUploadStart = this.handleUploadStart.bind(this);
    this.handleProgress = this.handleProgress.bind(this);
    this.handleUploadError = this.handleUploadError.bind(this);
    this.handleUploadSuccess = this.handleUploadSuccess.bind(this);

    this.state = {
      addFormOpen: false,
      newPersonFirst: "",
      newPersonLast: "",
      newPersondDOB: "",
      newPersonNickName: "",
      newPersonDiagnosis: "",
      newPersonGender: "",
      newPersonStreet: "",
      newPersonCity: "",
      newPersonState: "",
      newPersonZip: "",
      newPersonPhone: "",
      newPersonEmail: "",
      newPersonPhoto: "",

      progress: 0,
      isUploading: false,
      imageName: ""
    };
  }

  openEditForm(record) {
    console.log("RECORD", record);
  }

  handleAddDisplay() {
    this.setState({
      addFormOpen: !this.state.addFormOpen
    });
  }

  handleUploadStart = name =>
    this.setState({ isUploading: true, progress: 0, imageName: name });
  handleProgress = progress => this.setState({ progress });
  handleUploadError = error => {
    this.setState({ isUploading: false });
    console.error(error);
  };
  handleUploadSuccess = filename => {
    const imageName = this.state.imageName;
    this.setState({ progress: 100, isUploading: false });
    fire
      .storage()
      .ref("images")
      .child(filename)
      .getDownloadURL()
      .then(url => {
        this.setState({
          newPersonPhoto: url
        });
      });
  };

  handleAddRecord() {
    const carePatientId = Date.now();

    fire
      .database()
      .ref(`carePatients/${carePatientId}`)
      .set({
        firstName: this.state.newPersonFirst,
        lastName: this.state.newPersonLast,
        dob: this.state.newPersondDOB,
        nickname: this.state.newPersonNickName,
        diagnosis: this.state.newPersonDiagnosis,
        gender: this.state.newPersonGender,
        street: this.state.newPersonStreet,
        city: this.state.newPersonCity,
        state: this.state.newPersonState,
        zipcode: this.state.newPersonZip,
        phone: this.state.newPersonPhone,
        email: this.state.newPersonEmail,
        photo: this.state.newPersonPhoto
      });

    fire
      .database()
      .ref(`caregivers/${this.props.caregiverId}/carepatients/${carePatientId}`)
      .set({
        firstName: this.state.newPersonFirst,
        lastName: this.state.newPersonLast,
        photo: this.state.newPersonPhoto
      });


      fire
        .database()
        .ref(`/caregivers/${this.props.caregiverId}/carepatients`)
        .once("value")
        .then(
          function(snapshot) {
            console.log("Patients", snapshot.val());
            this.props.setPatients(snapshot.val());
          }.bind(this)
        );
    // caregivers -> caregiverId -> carePatients -> carePatientId { firstName, lastName, photoURL }

      this.handleAddDisplay();
      this.setState ({
        newPersonPhoto: ''
      })

  }

  render() {
    let rxEntriesToDisplay;

    if (!this.props.rxEntries || this.props.rxEntries.length == 0) {
      rxEntriesToDisplay = <div>Full focus add new box</div>;
    } else {
      const rx = this.props.rxEntries;
      rxEntriesToDisplay = Object.keys(this.props.rxEntries).map(
        function(key) {
          return (
            <RowRX
              openEditForm={() => this.openEditForm(rx[key])}
              key={key}
              id={key}
              rx={rx[key]}
            />
          );
        }.bind(this)
      );
    }

    return (
      <div>
        {this.state.addFormOpen ? (
          <div className="add-form">
            <div className="add-form__form">
              <div className="add-form__header">New Care Patient</div>
              <i
                onClick={() => this.handleAddDisplay()}
                className="close-form-btn fa fa-close"
              />
              <div style={{ display: "flex", flexDirection: "column" }}>
                <div className="form-wrapper">
                  <div className="input-wrap">
                    <label className="form-label">First Name</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonFirst: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                  <div className="input-wrap">
                    <label className="form-label">Last Name</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonLast: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                </div>
                <div className="form-wrapper">
                  <div className="input-wrap">
                    <label className="form-label">Birthday</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersondDOB: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                  <div className="input-wrap">
                    <label className="form-label">Nickname</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonNickName: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                </div>

                <div className="form-wrapper">
                  <div className="input-wrap">
                    <label className="form-label">Diagnosis</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonDiagnosis: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                  <div className="input-wrap">
                    <label className="form-label">Gender</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonGender: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                </div>

                <div className="form-wrapper">
                  <div className="input-wrap">
                    <label className="form-label">Street</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonStreet: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                  <div className="input-wrap">
                    <label className="form-label">City</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonCity: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                </div>

                <div className="form-wrapper">
                  <div className="input-wrap">
                    <label className="form-label">State</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonState: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                  <div className="input-wrap">
                    <label className="form-label">Zipcode</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonZip: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                </div>

                <div className="form-wrapper">
                  <div className="input-wrap">
                    <label className="form-label">Phone</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonPhone: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                  <div className="input-wrap">
                    <label className="form-label">Email</label>
                    <input
                      onChange={e => {
                        this.setState({ newPersonEmail: e.target.value });
                      }}
                      className="form-input"
                    />
                  </div>
                </div>

                <div className=" m-t-30 m-b-0">
                  <div>
                    <label htmlFor="avatar">
                      Primary Photo{" "}
                      {this.state.isUploading && (
                        <span className="f-11 t-sans t-upper fc-green">
                          {" "}
                          {this.state.progress} %
                        </span>
                      )}
                    </label>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between"
                    }}
                  >
                    <FileUploader
                      className="inputFile"
                      accept="image/*"
                      name="avatar"
                      randomizeFilename
                      storageRef={fire.storage().ref("images")}
                      onUploadStart={() => this.handleUploadStart("primary")}
                      onUploadError={this.handleUploadError}
                      onUploadSuccess={this.handleUploadSuccess}
                      onProgress={this.handleProgress}
                    />
                    {this.state.newPersonPhoto && (
                      <img
                        style={{ maxHeight: "50px", width: "auto" }}
                        src={this.state.newPersonPhoto}
                      />
                    )}
                  </div>
                </div>

                <button
                  onClick={() => this.handleAddRecord()}
                  className="btn__addnew btn__addnew--sm"
                  style={{ marginTop: "20px" }}
                >
                  Add Care Patient
                </button>
              </div>
            </div>
          </div>
        ) : (
          ""
        )}


        { !this.props.showNoEntry
          ? <button
            onClick={() => this.setState({ addFormOpen: true })}
            className="no-entry-found-button"
            style={{marginTop: '0px'}}
          >
            Add New Care Patient
          </button>
          :   <div className="page-body">
              <div className="page-body-container">

                  <div className="no-entries-found">
                    <div
                      className="fc-purple t-center f-28"
                      style={{ lineHeight: "1.2" }}
                    >
                      You haven't added any care patients yet, would you like to?
                    </div>
                    <button
                      onClick={() => this.setState({ addFormOpen: true })}
                      className="no-entry-found-button"
                    >
                      Add New Care Patient
                    </button>
                  </div>

              </div>
            </div>
        }


      </div>
    );
  }
}

const mapStateToProps = ({
  caregiverId,
  caregiverEmail,
  caregiverFirst,
  caregiverLast,
  patients,
  activePatientId,
  currentEntryType,
  rxEntries
}) => {
  return {
    caregiverId,
    caregiverEmail,
    caregiverFirst,
    caregiverLast,
    patients,
    activePatientId,
    currentEntryType,
    rxEntries
  };
};

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: `INCREMENT` }),
    setPatients: (patients) => dispatch({ type: `SET_PATIENT_DATA`, patients })
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(NewPerson);