Merge pull request #769 from sharetribe/fix-inboxpage-and-txpage-loadData

Fix inboxpage and txpage load data

src/components/BookingBreakdown/LineItemBookingPeriod.js

@@ -52,6 +52,10 @@ const LineItemBookingPeriod = props => {
     item => item.code === unitType && !item.reversal
   );
 
+  if (!unitPurchase) {
+    throw new Error(`LineItemBookingPeriod: lineItem (${unitType}) missing`);
+  }
+
   const useQuantityForDayCount = isNightly || isDaily;
   const count = useQuantityForDayCount ? unitPurchase.quantity.toFixed() : dayCount;
 

src/components/BookingBreakdown/LineItemSubTotalMaybe.js

@@ -43,6 +43,11 @@ const LineItemSubTotalMaybe = props => {
   const unitPurchase = transaction.attributes.lineItems.find(
     item => item.code === unitType && !item.reversal
   );
+
+  if (!unitPurchase) {
+    throw new Error(`LineItemSubTotalMaybe: lineItem (${unitType}) missing`);
+  }
+
   const formattedSubTotal = formatMoney(intl, unitPurchase.lineTotal);
 
   return showSubTotal ? (

src/components/BookingBreakdown/LineItemUnitPrice.js

@@ -16,6 +16,11 @@ const LineItemUnitPrice = props => {
   const unitPurchase = transaction.attributes.lineItems.find(
     item => item.code === unitType && !item.reversal
   );
+
+  if (!unitPurchase) {
+    throw new Error(`LineItemUnitPrice: lineItem (${unitType}) missing`);
+  }
+
   const formattedUnitPrice = formatMoney(intl, unitPurchase.unitPrice);
 
   return (

src/components/BookingBreakdown/LineItemUnitsMaybe.js

@@ -14,6 +14,11 @@ const LineItemUnitsMaybe = props => {
   const unitPurchase = transaction.attributes.lineItems.find(
     item => item.code === unitType && !item.reversal
   );
+
+  if (!unitPurchase) {
+    throw new Error(`LineItemUnitsMaybe: lineItem (${unitType}) missing`);
+  }
+
   const quantity = unitPurchase.quantity;
 
   return (

src/containers/InboxPage/InboxPage.css

@@ -140,6 +140,32 @@
   padding: 0;
 }
 
+@keyframes loadingSpinnerFadeIn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.listItemsLoading {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+  width: 100%;
+  opacity: 0;
+
+  /* animation shorthand property doesn't work with local scope of CSS Modules */
+  animation-duration: 1s;
+  animation-name: loadingSpinnerFadeIn;
+  animation-fill-mode: forwards;
+}
+
 .listItem {
   /* Layout */
   margin-bottom: 10px;

src/containers/InboxPage/InboxPage.js

@@ -19,7 +19,7 @@ import {
   propTypes,
 } from '../../util/types';
 import { formatMoney } from '../../util/currency';
-import { userDisplayName } from '../../util/data';
+import { ensureCurrentUser, userDisplayName } from '../../util/data';
 import { daysBetween } from '../../util/dates';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
@@ -36,6 +36,7 @@ import {
   LayoutWrapperTopbar,
   LayoutWrapperFooter,
   Footer,
+  IconSpinner,
 } from '../../components';
 import { TopbarContainer, NotFoundPage } from '../../containers';
 import config from '../../config';
@@ -253,6 +254,7 @@ export const InboxPageComponent = props => {
     transactions,
   } = props;
   const { tab } = params;
+  const ensuredCurrentUser = ensureCurrentUser(currentUser);
 
   const validTab = tab === 'orders' || tab === 'sales';
   if (!validTab) {
@@ -292,7 +294,7 @@ export const InboxPageComponent = props => {
       : user.id && tx && tx.length > 0 && tx[0].provider.id.uuid === user.id.uuid;
   };
   const hasTransactions =
-    !fetchInProgress && hasOrderOrSaleTransactions(transactions, isOrders, currentUser);
+    !fetchInProgress && hasOrderOrSaleTransactions(transactions, isOrders, ensuredCurrentUser);
   const pagingLinks =
     hasTransactions && pagination && pagination.totalPages > 1 ? (
       <PaginationLinks
@@ -354,7 +356,13 @@ export const InboxPageComponent = props => {
         <LayoutWrapperMain>
           {error}
           <ul className={css.itemList}>
-            {!fetchInProgress ? transactions.map(toTxItem) : null}
+            {!fetchInProgress ? (
+              transactions.map(toTxItem)
+            ) : (
+              <li className={css.listItemsLoading}>
+                <IconSpinner />
+              </li>
+            )}
             {noResults}
           </ul>
           {pagingLinks}