Merge pull request #1069 from sharetribe/fix-availability-utc-handling-v2

Month id (string) should be generated using UTC timezone

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [fix] ManageAvailabilityCalendar.js didn't use UTC time when fetching data for calendar months.
+  [#1069](https://github.com/sharetribe/flex-template-web/pull/1069)
 - [add] Use sparse fields on InboxPage query to reduce data load.
   [#1067](https://github.com/sharetribe/flex-template-web/pull/1067)
   - NOTE: if you need more fields on `InboxPage`, you need to add those to `loadData` function.

src/containers/EditListingPage/EditListingPage.duck.js

@@ -1,7 +1,7 @@
 import omit from 'lodash/omit';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { denormalisedResponseEntities, ensureAvailabilityException } from '../../util/data';
-import { isSameDate, monthIdString } from '../../util/dates';
+import { isSameDate, monthIdStringInUTC } from '../../util/dates';
 import { storableError } from '../../util/errors';
 import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import * as log from '../../util/log';
@@ -12,7 +12,8 @@ const { UUID } = sdkTypes;
 const removeException = (exception, calendar) => {
   const availabilityException = ensureAvailabilityException(exception.availabilityException);
   const { start, end } = availabilityException.attributes;
-  const monthId = monthIdString(start);
+  // When using time-based process, you might want to deal with local dates using monthIdString
+  const monthId = monthIdStringInUTC(start);
   const monthData = calendar[monthId] || { exceptions: [] };
 
   const exceptions = monthData.exceptions.filter(e => {
@@ -32,7 +33,8 @@ const removeException = (exception, calendar) => {
 // A helper function to add a new exception and remove previous one if there's a matching exception
 const addException = (exception, calendar) => {
   const { start } = ensureAvailabilityException(exception.availabilityException).attributes;
-  const monthId = monthIdString(start);
+  // When using time-based process, you might want to deal with local dates using monthIdString
+  const monthId = monthIdStringInUTC(start);
 
   // TODO: API doesn't support "availability_exceptions/update" yet
   // So, when user wants to create an exception we need to ensure
@@ -50,7 +52,8 @@ const addException = (exception, calendar) => {
 const updateException = (exception, calendar) => {
   const newAvailabilityException = ensureAvailabilityException(exception.availabilityException);
   const { start, end } = newAvailabilityException.attributes;
-  const monthId = monthIdString(start);
+  // When using time-based process, you might want to deal with local dates using monthIdString
+  const monthId = monthIdStringInUTC(start);
   const monthData = calendar[monthId] || { exceptions: [] };
 
   const exceptions = monthData.exceptions.map(e => {
@@ -518,7 +521,8 @@ export function requestImageUpload(actionPayload) {
 
 export const requestFetchBookings = fetchParams => (dispatch, getState, sdk) => {
   const { listingId, start, end, state } = fetchParams;
-  const monthId = monthIdString(start);
+  // When using time-based process, you might want to deal with local dates using monthIdString
+  const monthId = monthIdStringInUTC(start);
 
   dispatch(fetchBookingsRequest({ ...fetchParams, monthId }));
 
@@ -535,7 +539,8 @@ export const requestFetchBookings = fetchParams => (dispatch, getState, sdk) =>
 
 export const requestFetchAvailabilityExceptions = fetchParams => (dispatch, getState, sdk) => {
   const { listingId, start, end } = fetchParams;
-  const monthId = monthIdString(start);
+  // When using time-based process, you might want to deal with local dates using monthIdString
+  const monthId = monthIdStringInUTC(start);
 
   dispatch(fetchAvailabilityExceptionsRequest({ ...fetchParams, monthId }));
 

src/forms/EditListingAvailabilityForm/ManageAvailabilityCalendar.js

@@ -16,7 +16,7 @@ import {
   ensureDayAvailabilityPlan,
 } from '../../util/data';
 import { DAYS_OF_WEEK } from '../../util/types';
-import { monthIdString } from '../../util/dates';
+import { monthIdString, monthIdStringInUTC } from '../../util/dates';
 import { IconArrowHead, IconSpinner } from '../../components';
 
 import css from './ManageAvailabilityCalendar.css';
@@ -162,7 +162,9 @@ const dateModifiers = (availabilityPlan, exceptions, bookings, date) => {
 };
 
 const renderDayContents = (calendar, availabilityPlan) => date => {
-  const { exceptions = [], bookings = [] } = calendar[monthIdString(date)] || {};
+  // This component is for day/night based processes. If time-based process is used,
+  // you might want to deal with local dates using monthIdString instead of monthIdStringInUTC.
+  const { exceptions = [], bookings = [] } = calendar[monthIdStringInUTC(date)] || {};
   const { isOutsideRange, isSameDay, isBlocked, isBooked, isInProgress, isFailed } = dateModifiers(
     availabilityPlan,
     exceptions,
@@ -308,7 +310,9 @@ class ManageAvailabilityCalendar extends Component {
 
     const { availabilityPlan, availability } = this.props;
     const calendar = availability.calendar;
-    const { exceptions = [], bookings = [] } = calendar[monthIdString(date)] || {};
+    // This component is for day/night based processes. If time-based process is used,
+    // you might want to deal with local dates using monthIdString instead of monthIdStringInUTC.
+    const { exceptions = [], bookings = [] } = calendar[monthIdStringInUTC(date)] || {};
     const { isPast, isBlocked, isBooked, isInProgress } = dateModifiers(
       availabilityPlan,
       exceptions,

src/util/dates.js

@@ -115,7 +115,7 @@ export const daysBetween = (startDate, endDate) => {
 };
 
 /**
- * Format the given date
+ * Format the given date to month id/string
  *
  * @param {Date} date to be formatted
  *
@@ -123,6 +123,18 @@ export const daysBetween = (startDate, endDate) => {
  */
 export const monthIdString = date => moment(date).format('YYYY-MM');
 
+/**
+ * Format the given date to UTC month id/string
+ *
+ * @param {Date} date to be formatted
+ *
+ * @returns {String} formatted month string
+ */
+export const monthIdStringInUTC = date =>
+  moment(date)
+    .utc()
+    .format('YYYY-MM');
+
 /**
  * Format the given date
  *