inputExample.jss

import React, { Component } from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { didScorecardSubmit } from "../../actions/roundActions";

//Components
import EnterBtn from "./EnterBtn";

const ScorecardWrapper = styled.div`
  overflow: auto;
  max-height: 400px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
`;
const Header = styled.h3`
  color: #4447a0;
`;
const HoleScore = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;

  & label {
    color: #797979;
    margin-right: 8px;
  }

  && input {
    width: 80px;
    height: 40px;
    background: #e1e1e1;
    border: none;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #595959;
    margin: 8px;
    font-size: 1em;
    text-align: center;
  }

  && select {
    width: 80px;
    height: 40px;
    background: #e1e1e1;
    border: none;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #595959;
    margin: 8px;
    font-size: 1em;
    text-align: center;
  }
`;
const BtnCenter = styled.div`
  text-align: center;
`;
export class NineScorecard extends Component {
  constructor(props) {
    super(props);

    this.state = {
      formSubmit: false
    };

    this.onSubmit = this.onSubmit.bind(this);
  }

  componentWillMount() {
    this.props.didScorecardSubmit(this.state.formSubmit);
  }

  onSubmit(e) {
    e.preventDefault();
    this.setState({ formSubmit: true });

    const scorecardSubmit = {
      didScorecardSubmit: this.state.formSubmit
    };

    this.props.didScorecardSubmit(scorecardSubmit);
  }

  render() {
    return (
      <ScorecardWrapper>
        <Header>9-Hole Round</Header>
        <form method="POST" action="/add_round" onSubmit={this.onSubmit}>
          <HoleScore>
            <label>Hole 1:</label>
            <input type="text" placeholder="Score" name="hole1score" />
            <input type="text" placeholder="Par" name="hole1par" />
            <input type="text" placeholder="Yardage" name="hole1yardage" />
            <select name="hole1gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole1fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole1putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 2:</label>
            <input type="text" placeholder="Score" name="hole2score" />
            <input type="text" placeholder="Par" name="hole2par" />
            <input type="text" placeholder="Yardage" name="hole2yardage" />
            <select name="hole2gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole2fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole2putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 3:</label>
            <input type="text" placeholder="Score" name="hole3score" />
            <input type="text" placeholder="Par" name="hole3par" />
            <input type="text" placeholder="Yardage" name="hole3yardage" />
            <select name="hole3gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole3fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole3putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 4:</label>
            <input type="text" placeholder="Score" name="hole4score" />
            <input type="text" placeholder="Par" name="hole4par" />
            <input type="text" placeholder="Yardage" name="hole4yardage" />
            <select name="hole4gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole4fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole4putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 5:</label>
            <input type="text" placeholder="Score" name="hole5score" />
            <input type="text" placeholder="Par" name="hole5par" />
            <input type="text" placeholder="Yardage" name="hole5yardage" />
            <select name="hole5gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole5fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole5putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 6:</label>
            <input type="text" placeholder="Score" name="hole6score" />
            <input type="text" placeholder="Par" name="hole6par" />
            <input type="text" placeholder="Yardage" name="hole6yardage" />
            <select name="hole6gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole6fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole6putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 7:</label>
            <input type="text" placeholder="Score" name="hole7score" />
            <input type="text" placeholder="Par" name="hole7par" />
            <input type="text" placeholder="Yardage" name="hole7yardage" />
            <select name="hole7gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole7fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole7putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 8:</label>
            <input type="text" placeholder="Score" name="hole8score" />
            <input type="text" placeholder="Par" name="hole8par" />
            <input type="text" placeholder="Yardage" name="hole8yardage" />
            <select name="hole8gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole8fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole8putts" />
          </HoleScore>
          <HoleScore>
            <label>Hole 9:</label>
            <input type="text" placeholder="Score" name="hole9score" />
            <input type="text" placeholder="Par" name="hole9par" />
            <input type="text" placeholder="Yardage" name="hole9yardage" />
            <select name="hole9gir">
              <option value="" disabled selected>
                GIR
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
            </select>
            <select name="hole9fairway">
              <option value="" disabled selected>
                Fairway
              </option>
              <option value="Y">Y</option>
              <option value="N">N</option>
              <option value="N/A">N/A</option>
            </select>
            <input type="text" placeholder="Putts" name="hole9putts" />
          </HoleScore>
          <BtnCenter>
            <EnterBtn type="submit" />
          </BtnCenter>
        </form>
      </ScorecardWrapper>
    );
  }
}

NineScorecard.propTypes = {
  didScorecardSubmit: PropTypes.func.isRequired
};

export default connect(null, { didScorecardSubmit })(NineScorecard);