Merge pull request #96 from sharetribe/update-v5.0.0-from-upstream

v7.0.0: update v5.0.0 from upstream (FTW-daily)

CHANGELOG.md

@@ -17,6 +17,32 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2020-XX-XX
 
+## [v7.0.0] 2020-06-04
+
+### Updates from upstream (FTW-daily v5.0.0)
+
+- [change] Streamlining filter setup. Everyone who customizes FTW-templates, needs to update filters
+  and unfortunately the related code has been spread out in multiple UI containers.
+
+  Now, filters are more configurable through marketplace-custom-config.js. You can just add new
+  filter configs to `filters` array in there - and that should be enough for creating new filters
+  for extended data.
+
+  If your are creating a totally new filter component, you can take it into use in a single file:
+  src/containers/SearchPage/FilterComponent.js
+
+  In addition, we have renamed couple of container components:
+
+  - SearchFilters -> SearchFiltersPrimary
+  - SearchFiltersPanel -> SearchFiltersSecondary (SearchFiltersMobile has kept its name.)
+
+  SortBy filter's state is also tracked similarly as filters. From now on, the state is kept in
+  MainPanel and not in those 3 different UI containers.
+
+  [#1296](https://github.com/sharetribe/ftw-daily/pull/1296)
+
+[v7.0.0]: https://github.com/sharetribe/flex-template-web/compare/v6.6.0...v7.0.0
+
 ## [v6.6.0] 2020-06-04
 
 ### Updates from upstream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "6.6.0",
+  "version": "7.0.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
@@ -89,7 +89,7 @@
     "config": "node scripts/config.js",
     "config-check": "node scripts/config.js --check",
     "dev-frontend": "sharetribe-scripts start",
-    "dev-backend": "DEV_API_SERVER_PORT=3500 nodemon server/apiServer.js",
+    "dev-backend": "export NODE_ENV=development DEV_API_SERVER_PORT=3500&&nodemon server/apiServer.js",
     "dev": "yarn run config-check&&concurrently --kill-others \"yarn run dev-frontend\" \"yarn run dev-backend\"",
     "build": "sharetribe-scripts build",
     "format": "prettier --write '**/*.{js,css}'",

src/components/BookingDateRangeFilter/BookingDateRangeFilter.example.js

@@ -48,7 +48,7 @@ export const BookingDateRangeFilterPopup = {
   component: BookingDateRangeFilterWrapper,
   props: {
     id: 'BookingDateRangeFilterPopupExample',
-    urlParam: URL_PARAM,
+    queryParamNames: [URL_PARAM],
     liveEdit: false,
     showAsPopup: true,
     contentPlacementOffset: -14,
@@ -62,7 +62,7 @@ export const BookingDateRangeFilterPlain = {
   component: BookingDateRangeFilterWrapper,
   props: {
     id: 'BookingDateRangeFilterPlainExample',
-    urlParam: URL_PARAM,
+    queryParamNames: [URL_PARAM],
     liveEdit: true,
     showAsPopup: false,
     contentPlacementOffset: -14,

src/components/BookingDateRangeFilter/BookingDateRangeFilter.js

@@ -1,10 +1,36 @@
 import React, { Component } from 'react';
-import { bool, func, number, object, string } from 'prop-types';
+import { arrayOf, bool, func, node, number, object, string } from 'prop-types';
 import { injectIntl, intlShape } from '../../util/reactIntl';
+import { parseDateFromISO8601, stringifyDateToISO8601 } from '../../util/dates';
 
 import { FieldDateRangeController, FilterPopup, FilterPlain } from '../../components';
 import css from './BookingDateRangeFilter.css';
 
+const getDatesQueryParamName = queryParamNames => {
+  return Array.isArray(queryParamNames)
+    ? queryParamNames[0]
+    : typeof queryParamNames === 'string'
+    ? queryParamNames
+    : 'dates';
+};
+
+// Parse query parameter, which should look like "2020-05-28,2020-05-31"
+const parseValue = value => {
+  const rawValuesFromParams = value ? value.split(',') : [];
+  const [startDate, endDate] = rawValuesFromParams.map(v => parseDateFromISO8601(v));
+  return value && startDate && endDate ? { dates: { startDate, endDate } } : { dates: null };
+};
+// Format dateRange value for the query. It's given by FieldDateRangeInput:
+// { dates: { startDate, endDate } }
+const formatValue = (dateRange, queryParamName) => {
+  const hasDates = dateRange && dateRange.dates;
+  const { startDate, endDate } = hasDates ? dateRange.dates : {};
+  const start = startDate ? stringifyDateToISO8601(startDate) : null;
+  const end = endDate ? stringifyDateToISO8601(endDate) : null;
+  const value = start && end ? `${start},${end}` : null;
+  return { [queryParamName]: value };
+};
+
 export class BookingDateRangeFilterComponent extends Component {
   constructor(props) {
     super(props);
@@ -18,20 +44,25 @@ export class BookingDateRangeFilterComponent extends Component {
       className,
       rootClassName,
       showAsPopup,
-      initialValues: initialValuesRaw,
+      initialValues,
       id,
       contentPlacementOffset,
       onSubmit,
-      urlParam,
+      queryParamNames,
+      label,
       intl,
       ...rest
     } = this.props;
 
-    const isSelected = !!initialValuesRaw && !!initialValuesRaw.dates;
-    const initialValues = isSelected ? initialValuesRaw : { dates: null };
+    const datesQueryParamName = getDatesQueryParamName(queryParamNames);
+    const initialDates =
+      initialValues && initialValues[datesQueryParamName]
+        ? parseValue(initialValues[datesQueryParamName])
+        : { dates: null };
 
-    const startDate = isSelected ? initialValues.dates.startDate : null;
-    const endDate = isSelected ? initialValues.dates.endDate : null;
+    const isSelected = !!initialDates.dates;
+    const startDate = isSelected ? initialDates.dates.startDate : null;
+    const endDate = isSelected ? initialDates.dates.endDate : null;
 
     const format = {
       month: 'short',
@@ -48,6 +79,8 @@ export class BookingDateRangeFilterComponent extends Component {
             dates: `${formattedStartDate} - ${formattedEndDate}`,
           }
         )
+      : label
+      ? label
       : intl.formatMessage({ id: 'BookingDateRangeFilter.labelPlain' });
 
     const labelForPopup = isSelected
@@ -57,8 +90,14 @@ export class BookingDateRangeFilterComponent extends Component {
             dates: `${formattedStartDate} - ${formattedEndDate}`,
           }
         )
+      : label
+      ? label
       : intl.formatMessage({ id: 'BookingDateRangeFilter.labelPopup' });
 
+    const handleSubmit = values => {
+      onSubmit(formatValue(values, datesQueryParamName));
+    };
+
     const onClearPopupMaybe =
       this.popupControllerRef && this.popupControllerRef.onReset
         ? { onClear: () => this.popupControllerRef.onReset(null, null) }
@@ -84,11 +123,10 @@ export class BookingDateRangeFilterComponent extends Component {
         id={`${id}.popup`}
         showAsPopup
         contentPlacementOffset={contentPlacementOffset}
-        onSubmit={onSubmit}
+        onSubmit={handleSubmit}
         {...onClearPopupMaybe}
         {...onCancelPopupMaybe}
-        initialValues={initialValues}
-        urlParam={urlParam}
+        initialValues={initialDates}
         {...rest}
       >
         <FieldDateRangeController
@@ -107,10 +145,9 @@ export class BookingDateRangeFilterComponent extends Component {
         id={`${id}.plain`}
         liveEdit
         contentPlacementOffset={contentPlacementOffset}
-        onSubmit={onSubmit}
+        onSubmit={handleSubmit}
         {...onClearPlainMaybe}
-        initialValues={initialValues}
-        urlParam={urlParam}
+        initialValues={initialDates}
         {...rest}
       >
         <FieldDateRangeController
@@ -137,9 +174,10 @@ BookingDateRangeFilterComponent.propTypes = {
   rootClassName: string,
   className: string,
   id: string.isRequired,
+  label: node,
   showAsPopup: bool,
   liveEdit: bool,
-  urlParam: string.isRequired,
+  queryParamNames: arrayOf(string).isRequired,
   onSubmit: func.isRequired,
   initialValues: object,
   contentPlacementOffset: number,

src/components/BookingDateRangeFilter/BookingDateRangeFilter.test.js

@@ -13,7 +13,7 @@ describe('BookingDateRangeFilter', () => {
     const tree = renderShallow(
       <BookingDateRangeFilterComponent
         id="BookingDateRangeFilter"
-        urlParam="dates"
+        queryParamNames={['dates']}
         liveEdit={false}
         showAsPopup={true}
         contentPlacementOffset={-14}
@@ -29,7 +29,7 @@ describe('BookingDateRangeFilter', () => {
     const tree = renderShallow(
       <BookingDateRangeFilterComponent
         id="BookingDateRangeFilter"
-        urlParam="dates"
+        queryParamNames={['dates']}
         liveEdit={true}
         showAsPopup={false}
         contentPlacementOffset={-14}

src/components/BookingDateRangeFilter/__snapshots__/BookingDateRangeFilter.test.js.snap

@@ -15,7 +15,6 @@ exports[`BookingDateRangeFilter matches plain snapshot 1`] = `
   liveEdit={true}
   onSubmit={[Function]}
   rootClassName={null}
-  urlParam="dates"
 >
   <FieldDateRangeController
     className={null}
@@ -42,7 +41,6 @@ exports[`BookingDateRangeFilter matches popup snapshot 1`] = `
   onSubmit={[Function]}
   rootClassName={null}
   showAsPopup={true}
-  urlParam="dates"
 >
   <FieldDateRangeController
     className={null}