import { Field, FieldArray/*, formValueSelector*/, reduxForm } from 'redux-form';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
const IconField = ({ input, id, label, icon, iconVal, type, meta: { touched, error } }) => (
);
const GenreField = ({ input, onCheck, label, id, genreID, meta: {touched, error}}) => (
-1 }
id={ id }
type="checkbox"
/>
{touched && error && {error}}
);
const FieldProps = {
genreID: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string
]),
icon: PropTypes.string,
// iconVal: PropTypes.string,
iconVal: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string
]),
id: PropTypes.string,
input: PropTypes.shape(),
label: PropTypes.string,
meta: PropTypes.shape({
touched: PropTypes.bool,
error: PropTypes.string
}),
onChange: PropTypes.func,
type: PropTypes.string,
}
GenreField.propTypes = IconField.propTypes = FieldProps;
class FormProfileSignupOne extends Component {
constructor(props) {
super(props);
this.handleGenres = this.handleGenres.bind(this);
}
handleGenres(name, value, inArray) {
const { array, change, genres, iconMainGenre, selectedGenres } = this.props;
const selectedIcons = selectedGenres && selectedGenres !== [] ? (genres && selectedGenres) && genres.filter(genre => genre.id == selectedGenres[selectedGenres.indexOf(genre.id)]) : [];
if (inArray > -1) {
array.remove(name, inArray)
if (value == iconMainGenre) {
const newIcon = selectedIcons.length > 1 ? selectedIcons[0].id === value ? selectedIcons[1].id : selectedIcons[0].id : null
change('main_genre',newIcon)
}
} else {
array.insert(name, 0, value)
if (!selectedGenres || selectedGenres.length === 0) {
change('main_genre', value)
}
}
}
render() {
const { change, genres, iconMainGenre, handleSubmit, pristine, reset, selectedGenres, submitting, submitFailed } = this.props;
const mustBlock = iconMainGenre && iconMainGenre !== '' ? selectedGenres && selectedGenres.length > 4 ? true : false : true;
const selectedIcons = selectedGenres && selectedGenres !== [] ? (genres && selectedGenres) && genres.filter(genre => genre.id == selectedGenres[selectedGenres.indexOf(genre.id)]) : [];
return (
)
}
}
FormProfileSignupOne.propTypes = {
array: PropTypes.shape(),
change: PropTypes.func,
genres: PropTypes.arrayOf(PropTypes.shape()),
handleSubmit: PropTypes.func,
iconMainGenre: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string
]),
initialize: PropTypes.func,
pristine: PropTypes.bool,
reset: PropTypes.func,
selectedGenres: PropTypes.oneOfType([
PropTypes.array,
PropTypes.shape(),
]),
submitFailed: PropTypes.bool,
submitting: PropTypes.bool,
touch: PropTypes.func,
untouch: PropTypes.func,
}
const validate = values => {
const errors = {};
if (!values.genres) {
errors.genres = 'Please select at least a genre.';
}
if (values.genres && values.genres.length > 4) {
errors.genres = 'Select only up to 4 genres to make your profile look best.';
}
if (!values.main_genre) {
errors.main_genre = 'Please select an icon.';
}
return errors;
}
FormProfileSignupOne = connect(
state => ({
iconMainGenre: state &&
state.form &&
state.form.profileSignupWizard &&
state.form.profileSignupWizard.values ?
state.form.profileSignupWizard.values.main_genre : null,
selectedGenres: state &&
state.form &&
state.form.profileSignupWizard &&
state.form.profileSignupWizard.values ?
state.form.profileSignupWizard.values.genres : null,
})
)(FormProfileSignupOne)
export default reduxForm({
form: 'profileSignupWizard',
destroyOnUnmount: false,
validate
})(FormProfileSignupOne)