Merge pull request #866 from sharetribe/tx-page-state

Improve tx page state management

CHANGELOG.md

@@ -14,12 +14,10 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version
 
-* [fix] Fix TransactionPage state management in loadData.
-  [#863](https://github.com/sharetribe/flex-template-web/pull/863) & [#865](https://github.com/sharetribe/flex-template-web/pull/865)
+* [change] Change TransactionPage state management in loadData.
+  [#863](https://github.com/sharetribe/flex-template-web/pull/863), [#865](https://github.com/sharetribe/flex-template-web/pull/865) & [#866](https://github.com/sharetribe/flex-template-web/pull/866)
 * [fix] Fix submit button state on contact details page.
   [#864](https://github.com/sharetribe/flex-template-web/pull/864)
-* [fix] Fix passing initial message sending error to transaction page.
-  [#863](https://github.com/sharetribe/flex-template-web/pull/863)
 * [fix] Fix listing page host section layout bug.
   [#862](https://github.com/sharetribe/flex-template-web/pull/862)
 * [fix] Fix initial message input clearing too early in checkout page.

src/containers/TransactionPage/TransactionPage.duck.js

@@ -1,4 +1,6 @@
 import pick from 'lodash/pick';
+import pickBy from 'lodash/pickBy';
+import isEmpty from 'lodash/isEmpty';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { isTransactionsTransitionInvalidTransition, storableError } from '../../util/errors';
 import {
@@ -27,8 +29,6 @@ const CUSTOMER = 'customer';
 
 export const SET_INITAL_VALUES = 'app/TransactionPage/SET_INITIAL_VALUES';
 
-export const RESET_STATE = 'app/TransactionPage/RESET_STATE';
-
 export const FETCH_TRANSACTION_REQUEST = 'app/TransactionPage/FETCH_TRANSACTION_REQUEST';
 export const FETCH_TRANSACTION_SUCCESS = 'app/TransactionPage/FETCH_TRANSACTION_SUCCESS';
 export const FETCH_TRANSACTION_ERROR = 'app/TransactionPage/FETCH_TRANSACTION_ERROR';
@@ -91,9 +91,6 @@ export default function checkoutPageReducer(state = initialState, action = {}) {
     case SET_INITAL_VALUES:
       return { ...initialState, ...payload };
 
-    case RESET_STATE:
-      return { ...state, sendMessageError: null, sendReviewError: null, messages: [] };
-
     case FETCH_TRANSACTION_REQUEST:
       return { ...state, fetchTransactionInProgress: true, fetchTransactionError: null };
     case FETCH_TRANSACTION_SUCCESS: {
@@ -173,9 +170,6 @@ export const setInitialValues = initialValues => ({
   payload: pick(initialValues, Object.keys(initialState)),
 });
 
-// clears tx page message and review sending errors
-const resetState = () => ({ type: RESET_STATE });
-
 const fetchTransactionRequest = () => ({ type: FETCH_TRANSACTION_REQUEST });
 const fetchTransactionSuccess = response => ({
   type: FETCH_TRANSACTION_SUCCESS,
@@ -477,13 +471,22 @@ export const sendReview = (role, tx, reviewRating, reviewContent) => (dispatch,
     : sendReviewAsFirst(tx.id, params, role, dispatch, sdk);
 };
 
+const isNonEmpty = value => {
+  return typeof value === 'object' || Array.isArray(value) ? !isEmpty(value) : !!value;
+};
+
 // loadData is a collection of async calls that need to be made
 // before page has all the info it needs to render itself
-export const loadData = params => dispatch => {
+export const loadData = params => (dispatch, getState) => {
   const txId = new UUID(params.id);
-
-  // Clear the send error since the message form is emptied as well.
-  dispatch(resetState());
+  const state = getState().TransactionPage;
+  const txRef = state.transactionRef;
+
+  // In case a transaction reference is found from a previous
+  // data load -> clear the state. Otherwise keep the non-null
+  // and non-empty values which may have been set from a previous page.
+  const initialValues = txRef ? {} : pickBy(state, isNonEmpty);
+  dispatch(setInitialValues(initialValues));
 
   // Sale / order (i.e. transaction entity in API)
   return Promise.all([dispatch(fetchTransaction(txId)), dispatch(fetchMessages(txId, 1))]);