Merge pull request #690 from sharetribe/checkbox-values

Change FieldGroupCheckbox field naming

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 (
     <div className={classes}>
       <h1 className={css.title}>{panelTitle}</h1>
       <EditListingFeaturesForm
         className={css.form}
-        initialValues={currentFeatures}
+        name={FEATURES_NAME}
+        initialValues={initialValues}
         onSubmit={values => {
-          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 = {

src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js

@@ -6,9 +6,11 @@ import FieldGroupCheckbox from './FieldGroupCheckbox';
 const formName = 'Styleguide.FieldGroupCheckboxForm';
 
 const label = <h3>Amenities</h3>;
+const name = 'amenities';
 
 const componentProps = {
-  id: `${formName}.amenities`,
+  id: `${formName}.${name}`,
+  name: name,
   label: label,
   options: [
     {

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 (
             <li key={fieldId} className={css.item}>
-              <FieldCheckbox id={fieldId} name={option.key} label={option.label} />
+              <FieldCheckbox id={fieldId} name={`${name}.${option.key}`} label={option.label} />
             </li>
           );
         })}
@@ -50,6 +50,7 @@ FieldGroupCheckbox.propTypes = {
   rootClassName: string,
   className: string,
   id: string.isRequired,
+  name: string.isRequired,
   label: node,
   options: arrayOf(
     shape({

src/components/SearchFilters/SearchFilters.js

@@ -87,6 +87,7 @@ const SearchFiltersComponent = props => {
 
   const featuresFilter = features ? (
     <SelectMultipleFilter
+      name="amenities"
       urlParam={AMENITIES_URL_PARAM}
       label={featuresLabel}
       onSelect={handleSelectOptions}

src/components/SelectMultipleFilter/SelectMultipleFilter.example.js

@@ -54,6 +54,7 @@ const AmenitiesFilterComponent = withRouter(props => {
 
   return (
     <SelectMultipleFilter
+      name="amenities"
       urlParam={URL_PARAM}
       label="Amenities"
       onSelect={(urlParam, values) => handleSubmit(urlParam, values, history)}

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 (
       <div
         className={classes}
@@ -141,8 +149,9 @@ class SelectMultipleFilter extends Component {
         </button>
         <SelectMultipleFilterForm
           onSubmit={this.handleSubmit}
-          initialValues={keysToValues(initialValues)}
+          initialValues={namedInitialValues}
           enableReinitialize={true}
+          name={name}
           onClear={this.handleClear}
           onCancel={this.handleCancel}
           options={options}
@@ -168,6 +177,7 @@ SelectMultipleFilter.defaultProps = {
 SelectMultipleFilter.propTypes = {
   rootClassName: string,
   className: string,
+  name: string.isRequired,
   urlParam: string.isRequired,
   label: string.isRequired,
   onSelect: func.isRequired,

src/components/SelectMultipleFilter/SelectMultipleFilterForm.js

@@ -14,6 +14,7 @@ const SelectMultipleFilterFormComponent = props => {
     destroy,
     reset,
     handleSubmit,
+    name,
     onClear,
     onCancel,
     options,
@@ -50,7 +51,8 @@ const SelectMultipleFilterFormComponent = props => {
     >
       <FieldGroupCheckbox
         className={css.fieldGroup}
-        id={`${form}.amenitiesFilter`}
+        name={name}
+        id={`${form}.${name}`}
         options={options}
       />
       <div className={css.buttonsWrapper}>
@@ -75,6 +77,7 @@ SelectMultipleFilterFormComponent.defaultProps = {
 
 SelectMultipleFilterFormComponent.propTypes = {
   ...formPropTypes,
+  name: string.isRequired,
   onClear: func.isRequired,
   onCancel: func.isRequired,
   options: arrayOf(

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,

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 => {
 
       <FieldGroupCheckbox
         className={css.features}
-        id={`${form}.amenities`}
+        id={`${form}.${name}`}
+        name={name}
         options={config.custom.amenities}
       />
 
@@ -70,6 +72,7 @@ EditListingFeaturesFormComponent.propTypes = {
   ...formPropTypes,
   rootClassName: string,
   className: string,
+  name: string.isRequired,
   handleSubmit: func.isRequired,
   saveActionMsg: string.isRequired,
   updated: bool.isRequired,