From d926f6b8c68c979ecf88c037efb8037c2fbb4884 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Fri, 12 Apr 2019 13:21:09 +0300
Subject: [PATCH] Make ListingPage to work with sparse listing data while
 loadData is in progress

---
 src/components/BookingPanel/BookingPanel.js         |  8 +++++---
 src/containers/ListingPage/ListingPage.js           | 13 +++++--------
 .../{SectionFeatures.js => SectionFeaturesMaybe.js} | 11 ++++++++---
 .../{SectionHost.js => SectionHostMaybe.js}         |  9 +++++++--
 src/containers/ListingPage/SectionMapMaybe.js       |  2 +-
 src/containers/ListingPage/SectionRulesMaybe.js     |  4 ++--
 .../__snapshots__/ListingPage.test.js.snap          |  5 +++--
 7 files changed, 31 insertions(+), 21 deletions(-)
 rename src/containers/ListingPage/{SectionFeatures.js => SectionFeaturesMaybe.js} (66%)
 rename src/containers/ListingPage/{SectionHost.js => SectionHostMaybe.js} (92%)

diff --git a/src/components/BookingPanel/BookingPanel.js b/src/components/BookingPanel/BookingPanel.js
index b8ff712c..f8198953 100644
--- a/src/components/BookingPanel/BookingPanel.js
+++ b/src/components/BookingPanel/BookingPanel.js
@@ -69,7 +69,9 @@ const BookingPanel = props => {
   } = props;
 
   const price = listing.attributes.price;
-  const isClosed = listing.attributes.state === LISTING_STATE_CLOSED;
+  const hasListingState = !!listing.attributes.state;
+  const isClosed = hasListingState && listing.attributes.state === LISTING_STATE_CLOSED;
+  const showBookingDatesForm = hasListingState && !isClosed;
   const showClosedListingHelpText = listing.id && isClosed;
   const { formattedPrice, priceTitle } = priceData(price, intl);
   const isBook = !!parse(location.search).book;
@@ -113,7 +115,7 @@ const BookingPanel = props => {
           <h2 className={titleClasses}>{title}</h2>
           {subTitleText ? <div className={css.bookingHelp}>{subTitleText}</div> : null}
         </div>
-        {!isClosed ? (
+        {showBookingDatesForm ? (
           <BookingDatesForm
             className={css.bookingForm}
             submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
@@ -136,7 +138,7 @@ const BookingPanel = props => {
           </div>
         </div>
 
-        {!isClosed ? (
+        {showBookingDatesForm ? (
           <Button
             rootClassName={css.bookButton}
             onClick={() => openBookModal(isOwnListing, isClosed, history, location)}
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index f8651e54..29078579 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -45,9 +45,9 @@ import SectionImages from './SectionImages';
 import SectionAvatar from './SectionAvatar';
 import SectionHeading from './SectionHeading';
 import SectionDescriptionMaybe from './SectionDescriptionMaybe';
-import SectionFeatures from './SectionFeatures';
+import SectionFeaturesMaybe from './SectionFeaturesMaybe';
 import SectionReviews from './SectionReviews';
-import SectionHost from './SectionHost';
+import SectionHostMaybe from './SectionHostMaybe';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
@@ -303,7 +303,7 @@ export class ListingPageComponent extends Component {
     const userAndListingAuthorAvailable = !!(currentUser && authorAvailable);
     const isOwnListing =
       userAndListingAuthorAvailable && currentListing.author.id.uuid === currentUser.id.uuid;
-    const showContactUser = !currentUser || (currentUser && !isOwnListing);
+    const showContactUser = authorAvailable && (!currentUser || (currentUser && !isOwnListing));
 
     const currentAuthor = authorAvailable ? currentListing.author : null;
     const ensuredAuthor = ensureUser(currentAuthor);
@@ -416,10 +416,7 @@ export class ListingPageComponent extends Component {
                     onContactUser={this.onContactUser}
                   />
                   <SectionDescriptionMaybe description={description} />
-                  <SectionFeatures
-                    options={amenitiesConfig}
-                    selectedOptions={publicData.amenities}
-                  />
+                  <SectionFeaturesMaybe options={amenitiesConfig} publicData={publicData} />
                   <SectionRulesMaybe publicData={publicData} />
                   <SectionMapMaybe
                     geolocation={geolocation}
@@ -427,7 +424,7 @@ export class ListingPageComponent extends Component {
                     listingId={currentListing.id}
                   />
                   <SectionReviews reviews={reviews} fetchReviewsError={fetchReviewsError} />
-                  <SectionHost
+                  <SectionHostMaybe
                     title={title}
                     listing={currentListing}
                     authorDisplayName={authorDisplayName}
diff --git a/src/containers/ListingPage/SectionFeatures.js b/src/containers/ListingPage/SectionFeaturesMaybe.js
similarity index 66%
rename from src/containers/ListingPage/SectionFeatures.js
rename to src/containers/ListingPage/SectionFeaturesMaybe.js
index ed70ab0f..f1779203 100644
--- a/src/containers/ListingPage/SectionFeatures.js
+++ b/src/containers/ListingPage/SectionFeaturesMaybe.js
@@ -4,8 +4,13 @@ import { PropertyGroup } from '../../components';
 
 import css from './ListingPage.css';
 
-const SectionFeatures = props => {
-  const { options, selectedOptions } = props;
+const SectionFeaturesMaybe = props => {
+  const { options, publicData } = props;
+  if (!publicData) {
+    return null;
+  }
+
+  const selectedOptions = publicData && publicData.amenities ? publicData.amenities : [];
   return (
     <div className={css.sectionFeatures}>
       <h2 className={css.featuresTitle}>
@@ -21,4 +26,4 @@ const SectionFeatures = props => {
   );
 };
 
-export default SectionFeatures;
+export default SectionFeaturesMaybe;
diff --git a/src/containers/ListingPage/SectionHost.js b/src/containers/ListingPage/SectionHostMaybe.js
similarity index 92%
rename from src/containers/ListingPage/SectionHost.js
rename to src/containers/ListingPage/SectionHostMaybe.js
index b23f8986..6bdefb31 100644
--- a/src/containers/ListingPage/SectionHost.js
+++ b/src/containers/ListingPage/SectionHostMaybe.js
@@ -5,7 +5,7 @@ import { EnquiryForm } from '../../forms';
 
 import css from './ListingPage.css';
 
-const SectionHost = props => {
+const SectionHostMaybe = props => {
   const {
     title,
     listing,
@@ -19,6 +19,11 @@ const SectionHost = props => {
     currentUser,
     onManageDisableScrolling,
   } = props;
+
+  if (!listing.author) {
+    return null;
+  }
+
   return (
     <div id="host" className={css.sectionHost}>
       <h2 className={css.yourHostHeading}>
@@ -46,4 +51,4 @@ const SectionHost = props => {
   );
 };
 
-export default SectionHost;
+export default SectionHostMaybe;
diff --git a/src/containers/ListingPage/SectionMapMaybe.js b/src/containers/ListingPage/SectionMapMaybe.js
index a298620e..40037c4e 100644
--- a/src/containers/ListingPage/SectionMapMaybe.js
+++ b/src/containers/ListingPage/SectionMapMaybe.js
@@ -22,7 +22,7 @@ class SectionMapMaybe extends Component {
       return null;
     }
 
-    const address = publicData.location ? publicData.location.address : '';
+    const address = publicData && publicData.location ? publicData.location.address : '';
     const classes = classNames(rootClassName || css.sectionMap, className);
     const cacheKey = listingId ? `${listingId.uuid}_${geolocation.lat}_${geolocation.lng}` : null;
 
diff --git a/src/containers/ListingPage/SectionRulesMaybe.js b/src/containers/ListingPage/SectionRulesMaybe.js
index a78571d1..b7085be7 100644
--- a/src/containers/ListingPage/SectionRulesMaybe.js
+++ b/src/containers/ListingPage/SectionRulesMaybe.js
@@ -8,7 +8,7 @@ import css from './SectionRulesMaybe.css';
 const SectionRulesMaybe = props => {
   const { className, rootClassName, publicData } = props;
   const classes = classNames(rootClassName || css.root, className);
-  return publicData.rules ? (
+  return publicData && publicData.rules ? (
     <div className={classes}>
       <h2 className={css.title}>
         <FormattedMessage id="ListingPage.rulesTitle" />
@@ -25,7 +25,7 @@ SectionRulesMaybe.propTypes = {
   rootClassName: string,
   publicData: shape({
     rules: string,
-  }).isRequired,
+  }),
 };
 
 export default SectionRulesMaybe;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 6cf9aa0c..44b190a8 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -152,7 +152,7 @@ exports[`ListingPage matches snapshot 1`] = `
             <SectionDescriptionMaybe
               description="listing1 description"
             />
-            <SectionFeatures
+            <SectionFeaturesMaybe
               options={
                 Array [
                   Object {
@@ -169,6 +169,7 @@ exports[`ListingPage matches snapshot 1`] = `
                   },
                 ]
               }
+              publicData={Object {}}
             />
             <SectionRulesMaybe
               className={null}
@@ -195,7 +196,7 @@ exports[`ListingPage matches snapshot 1`] = `
               fetchReviewsError={null}
               reviews={Array []}
             />
-            <SectionHost
+            <SectionHostMaybe
               authorDisplayName="user-1 display name"
               currentUser={
                 Object {