Update ListingPage to work with new marketplace-custom-config

sharetribe · Jun 2, 2020 · 22c8b90 · 22c8b90
1 parent f9f8ce5
commit 22c8b90
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import config from '../../config';
 import routeConfiguration from '../../routeConfiguration';
+import { findOptionsForSelectFilter } from '../../util/search';
 import { LISTING_STATE_PENDING_APPROVAL, LISTING_STATE_CLOSED, propTypes } from '../../util/types';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import {
@@ -188,8 +189,7 @@ export class ListingPageComponent extends Component {
       sendEnquiryError,
       timeSlots,
       fetchTimeSlotsError,
-      categoriesConfig,
-      amenitiesConfig,
+      filterConfig,
     } = this.props;
 
     const listingId = new UUID(rawParams.id);
@@ -370,10 +370,12 @@ export class ListingPageComponent extends Component {
       </NamedLink>
     );
 
+    const amenityOptions = findOptionsForSelectFilter('amenities', filterConfig);
+    const categoryOptions = findOptionsForSelectFilter('category', filterConfig);
     const category =
       publicData && publicData.category ? (
         <span>
-          {categoryLabel(categoriesConfig, publicData.category)}
+          {categoryLabel(categoryOptions, publicData.category)}
           <span className={css.separator}>•</span>
         </span>
       ) : null;
@@ -427,7 +429,7 @@ export class ListingPageComponent extends Component {
                     onContactUser={this.onContactUser}
                   />
                   <SectionDescriptionMaybe description={description} />
-                  <SectionFeaturesMaybe options={amenitiesConfig} publicData={publicData} />
+                  <SectionFeaturesMaybe options={amenityOptions} publicData={publicData} />
                   <SectionRulesMaybe publicData={publicData} />
                   <SectionMapMaybe
                     geolocation={geolocation}
@@ -484,8 +486,7 @@ ListingPageComponent.defaultProps = {
   timeSlots: null,
   fetchTimeSlotsError: null,
   sendEnquiryError: null,
-  categoriesConfig: config.custom.categories,
-  amenitiesConfig: config.custom.amenities,
+  filterConfig: config.custom.filters,
 };
 
 ListingPageComponent.propTypes = {
@@ -524,9 +525,7 @@ ListingPageComponent.propTypes = {
   sendEnquiryError: propTypes.error,
   onSendEnquiry: func.isRequired,
   onInitializeCardPaymentData: func.isRequired,
-
-  categoriesConfig: array,
-  amenitiesConfig: array,
+  filterConfig: array,
 };
 
 const mapStateToProps = state => {

diff --git a/src/containers/ListingPage/ListingPage.test.js b/src/containers/ListingPage/ListingPage.test.js
@@ -30,14 +30,42 @@ import ActionBarMaybe from './ActionBarMaybe';
 const { UUID } = sdkTypes;
 const noop = () => null;
 
-const categoriesConfig = [{ key: 'cat1', label: 'Cat 1' }, { key: 'cat2', label: 'Cat 2' }];
-
-const amenitiesConfig = [
-  { key: 'feat1', label: 'Feat 1' },
-  { key: 'feat2', label: 'Feat 2' },
-  { key: 'feat3', label: 'Feat 3' },
+const filterConfig = [
+  {
+    id: 'category',
+    label: 'Category',
+    type: 'SelectSingleFilter',
+    group: 'secondary',
+    queryParamName: 'pub_category',
+    config: {
+      options: [{ key: 'cat1', label: 'Cat 1' }, { key: 'cat2', label: 'Cat 2' }],
+    },
+  },
+  {
+    id: 'amenities',
+    label: 'Amenities',
+    type: 'SelectMultipleFilter',
+    group: 'secondary',
+    queryParamName: 'pub_amenities',
+    config: {
+      mode: 'has_all',
+      options: [
+        {
+          key: 'feat1',
+          label: 'Feat 1',
+        },
+        {
+          key: 'feat2',
+          label: 'Feat 2',
+        },
+        {
+          key: 'feat3',
+          label: 'Feat 3',
+        },
+      ],
+    },
+  },
 ];
-
 describe('ListingPage', () => {
   it('matches snapshot', () => {
     const currentUser = createCurrentUser('user-2');
@@ -76,8 +104,7 @@ describe('ListingPage', () => {
       onInitializeCardPaymentData: noop,
       sendEnquiryInProgress: false,
       onSendEnquiry: noop,
-      categoriesConfig,
-      amenitiesConfig,
+      filterConfig,
     };
 
     const tree = renderShallow(<ListingPageComponent {...props} />);