diff --git a/src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js b/src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js index 1e454a47..ed743977 100644 --- a/src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js +++ b/src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js @@ -10,6 +10,8 @@ import { ListingLink } from '../../components'; import css from './EditListingFeaturesPanel.css'; +const FEATURES_NAME = 'amenities'; + const EditListingFeaturesPanel = props => { const { rootClassName, @@ -44,14 +46,18 @@ const EditListingFeaturesPanel = props => { return map; }, {}); + const initialValues = { [FEATURES_NAME]: currentFeatures }; + return (

{panelTitle}

{ - const entries = toPairs(values); + const entries = values[FEATURES_NAME] ? toPairs(values[FEATURES_NAME]) : []; + const amenities = entries.filter(entry => entry[1] === true).map(entry => entry[0]); const updatedValues = { diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js index a6bdd50a..de2a4cae 100644 --- a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js +++ b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js @@ -6,9 +6,11 @@ import FieldGroupCheckbox from './FieldGroupCheckbox'; const formName = 'Styleguide.FieldGroupCheckboxForm'; const label =

Amenities

; +const name = 'amenities'; const componentProps = { - id: `${formName}.amenities`, + id: `${formName}.${name}`, + name: name, label: label, options: [ { diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js index a6b2ded9..0c31c61e 100644 --- a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js +++ b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js @@ -15,7 +15,7 @@ import { FieldCheckbox } from '../../components'; import css from './FieldGroupCheckbox.css'; const FieldGroupCheckbox = props => { - const { rootClassName, className, id, label, options, twoColumns } = props; + const { rootClassName, className, id, name, label, options, twoColumns } = props; const classes = classNames(rootClassName || css.root, className); const listClasses = twoColumns ? classNames(css.list, css.twoColumns) : css.list; @@ -28,7 +28,7 @@ const FieldGroupCheckbox = props => { const fieldId = `${id}.${option.key}`; return (
  • - +
  • ); })} @@ -50,6 +50,7 @@ FieldGroupCheckbox.propTypes = { rootClassName: string, className: string, id: string.isRequired, + name: string.isRequired, label: node, options: arrayOf( shape({ diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index cb8cb582..ccfbe41e 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -87,6 +87,7 @@ const SearchFiltersComponent = props => { const featuresFilter = features ? ( { return ( handleSubmit(urlParam, values, history)} diff --git a/src/components/SelectMultipleFilter/SelectMultipleFilter.js b/src/components/SelectMultipleFilter/SelectMultipleFilter.js index dbe3544b..d9f3d823 100644 --- a/src/components/SelectMultipleFilter/SelectMultipleFilter.js +++ b/src/components/SelectMultipleFilter/SelectMultipleFilter.js @@ -48,8 +48,8 @@ class SelectMultipleFilter extends Component { } handleSubmit(values) { - const { onSelect, urlParam } = this.props; - const selectedKeys = valuesToKeys(values); + const { name, onSelect, urlParam } = this.props; + const selectedKeys = valuesToKeys(values[name]); this.setState({ isOpen: false }); onSelect(urlParam, selectedKeys); } @@ -112,7 +112,7 @@ class SelectMultipleFilter extends Component { } render() { - const { rootClassName, className, label, options, initialValues, intl } = this.props; + const { rootClassName, className, name, label, options, initialValues, intl } = this.props; const classes = classNames(rootClassName || css.root, className); const hasInitialValues = initialValues.length > 0; @@ -127,6 +127,14 @@ class SelectMultipleFilter extends Component { const contentStyle = this.positionStyleForContent(); + // turn a list of values into a map that can be passed to + // a redux form + const initialValuesObj = keysToValues(initialValues); + + // pass the initial values with the name key so that + // they can be passed to the correct field + const namedInitialValues = { [name]: initialValuesObj }; + return (
    { destroy, reset, handleSubmit, + name, onClear, onCancel, options, @@ -50,7 +51,8 @@ const SelectMultipleFilterFormComponent = props => { >
    @@ -75,6 +77,7 @@ SelectMultipleFilterFormComponent.defaultProps = { SelectMultipleFilterFormComponent.propTypes = { ...formPropTypes, + name: string.isRequired, onClear: func.isRequired, onCancel: func.isRequired, options: arrayOf( diff --git a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.example.js b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.example.js index d713aa41..7f4eafd7 100644 --- a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.example.js +++ b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.example.js @@ -1,15 +1,20 @@ import EditListingFeaturesForm from './EditListingFeaturesForm'; +const NAME = 'amenities'; + const initialValueArray = ['towels', 'jacuzzi', 'bathroom']; +const initialValueMap = initialValueArray.reduce((map, value) => { + map[value] = true; + return map; +}, {}); +const initialValues = { [NAME]: initialValueMap }; export const Amenities = { component: EditListingFeaturesForm, props: { + name: NAME, onSubmit: values => console.log('EditListingFeaturesForm submit:', values), - initialValues: initialValueArray.reduce((map, value) => { - map[value] = true; - return map; - }, {}), + initialValues: initialValues, saveActionMsg: 'Save amenities', updated: false, updateInProgress: false, diff --git a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js index 3d2175cf..138b2261 100644 --- a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js +++ b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js @@ -17,6 +17,7 @@ const EditListingFeaturesFormComponent = props => { disabled, rootClassName, className, + name, handleSubmit, saveActionMsg, updated, @@ -41,7 +42,8 @@ const EditListingFeaturesFormComponent = props => { @@ -70,6 +72,7 @@ EditListingFeaturesFormComponent.propTypes = { ...formPropTypes, rootClassName: string, className: string, + name: string.isRequired, handleSubmit: func.isRequired, saveActionMsg: string.isRequired, updated: bool.isRequired,