{"size": 1518, "ext": "js", "max_stars_repo_path": "src/components/albums/NewAlbum.js", "max_stars_repo_name": "stephaniesmith/SnapShot-App", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/albums/NewAlbum.js", "max_issues_repo_name": "stephaniesmith/SnapShot-App", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/albums/NewAlbum.js", "max_forks_repo_name": "stephaniesmith/SnapShot-App", "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": 21.3802816901, "max_line_length": 91, "alphanum_fraction": 0.5942028986}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createAlbum } from './actions';
import { getAlbums } from './reducers';

const defaultState = {
  title: '',
  description: '',
  posterImage: ''
};


class NewAlbum extends Component {

  static propTypes = {
    createAlbum: PropTypes.func.isRequired,
  };

  static getDerivedStateFromProps({ album }, { edit }) {
    if(edit) return null;

    return {
      edit: album ? { ...album } : { ...defaultState }
    }; 
  }

  state = {
    edit: null
  };

  handleChange = ({ target }) => {
    this.setState(({ edit }) => {
      return {
        edit: {
          ...edit,
          [target.placeholder]: target.value
        }
      };
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    this.props.createAlbum(this.state.edit);
    this.setState({
      edit: { ...defaultState }
    });
  };

  render() {

    const { title, description, posterImage } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <input placeholder="title" value={title} onChange={this.handleChange}/>
        <input placeholder="description" value={description} onChange={this.handleChange}/>
        <input placeholder="posterImage" value={posterImage} onChange={this.handleChange}/>
        <button type="submit">Add Album</button>
      </form>
    );
  }
}

export default connect(
  state => ({ albums: getAlbums(state) }),
  { createAlbum }
)(NewAlbum);

