Make ListingPage to work with sparse listing data

while loadData is in progress

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)}

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}

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;

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;

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;
 

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;

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 {