foo.js

/**
 * @flow
 * @format
 */
/**
 * External dependencies
 */
import { values } from 'lodash';

/**
 * Internal dependencies
 */
import { before } from 'state/middleware/app';
import { daySettingsSave } from 'state/entities/day-settings/actions';
import { updateAvailabilityBlocks } from 'state/entities/availability-blocks/actions';

/**
 * Flow types
 */
import type { ActionTypes, UiScheduleSave } from 'state/action-types';
import type { Refiner } from 'state/middleware/app';

/**
 * Our middleware only cares about UI_SCHEDULE_SAVE
 */
const isScheduleSave: Refiner<UiScheduleSave> = (action: ActionTypes) =>
	action.type === 'UI_SCHEDULE_SAVE' ? action : null;

/**
 * By using the before middleware, we are declaring that we are going to change how this
 * action is going to be dispatched. So when it gets to our middleware, `next` has not
 * been called yet. The value we return from our Handler<> is what will be used when
 * with `next`.
 *
 * To perform a `UiScheduleSave` correctly, we need to do asynchronous activity. Therefore
 * we're going to return a promise.
 */
export default before(
	isScheduleSave,
	/**
	 * Note that `action` is correctly typed due to the Generics used with `Refiner` and `before`.
	 *
	 * If `action` is typed with anything other than `UiScheduleSave`, flow will complain.
	 */
	async (store, action: UiScheduleSave) => {
		/**
		 * There are two things we need to do to successfully save a schedule
		 *
		 * 1) Save all of the day settings that have been flagged to be modified
		 * 2) Save the availability block modifications
		 *
		 * This data is stored in the `ScheduleModifications` key in the `action`.
		 */

		const actions = [
			/**
			 * The `general-persistence/day-settings` V2 middleware now correctly
			 * returns a promise that encapsulates the asynchronous task of saving
			 * all of the day settings. This means dispatching the correct action
			 * will return a Promise that resolves when the action is complete.
			 */
			store.dispatch(daySettingsSave(values(action.modifications.daySettings))),
			/**
			 * The event-store is also correctly handling promises so this will resolve
			 * when event store actions are complete.
			 */
			store.dispatch(updateAvailabilityBlocks(action.modifications)),
		];

		try {
			/**
			 * Once we've waited for both actions to be done we can check their resolved
			 * values to determine if this ultimately succeeded or not.
			 */
			const done = await Promise.all(actions.map(a => Promise.resolve(a)));
			console.log('complete', done);
			return true;
		} catch (error) {
			return false;
		}
	}
);