diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 55d6d0f7..06eef10a 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -1,4 +1,5 @@ import React, { Component, PropTypes } from 'react'; +import { intlShape, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { types } from 'sharetribe-sdk'; import { NamedLink, PageLayout } from '../../components'; @@ -44,21 +45,21 @@ const info = { // N.B. All the presentational content needs to be extracted to their own components export class ListingPageComponent extends Component { - componentDidMount() { ListingPageComponent.loadData(this.props.params.id, this.props.onLoadListing); } render() { - const { entitiesData, params } = this.props; + const { entitiesData, intl, params } = this.props; const id = new types.UUID(params.id); - const currentListing = entitiesData.entities.listing ? getListingsById(entitiesData, [id])[0] : null; + const currentListing = entitiesData.entities.listing + ? getListingsById(entitiesData, [id])[0] + : null; const title = currentListing ? currentListing.attributes.title : ''; const description = currentListing ? currentListing.attributes.description : ''; - // TODO render "loading" or blank page, if currentListing is null. - return ( + const pageContent = (
{info.images[0].title} @@ -120,8 +121,17 @@ export class ListingPageComponent extends Component { ); + + const loadingPageMsg = { + id: 'ListingPage.loadingListingData', + defaultMessage: 'Loading listing data', + }; + + const loadingContent = ; + + return currentListing ? pageContent : loadingContent; } -}; +} ListingPageComponent.loadData = (id, onLoadListing) => { onLoadListing(id); @@ -133,6 +143,7 @@ const { func, object, shape, string } = PropTypes; ListingPageComponent.propTypes = { entitiesData: object.isRequired, + intl: intlShape.isRequired, onLoadListing: func.isRequired, params: shape({ id: string.isRequired, @@ -142,14 +153,14 @@ ListingPageComponent.propTypes = { const mapStateToProps = state => { const { data, ListingPage } = state; - const entitiesData = data ? data : {}; + const entitiesData = data || {}; return { ListingPage, entitiesData }; }; -const mapDispatchToProps = (dispatch) => { +const mapDispatchToProps = dispatch => { return { - onLoadListing: (id) => dispatch(showListings({ id, include: ['author'] })), + onLoadListing: id => dispatch(showListings({ id, include: ['author'] })), }; -} +}; -export default connect(mapStateToProps, mapDispatchToProps)(ListingPageComponent); +export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(ListingPageComponent)); diff --git a/src/translations/en.json b/src/translations/en.json index 5ce5a195..858a8517 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -3,5 +3,6 @@ "HeroSearchForm.placeholder": "Location search (soon)", "HeroSearchForm.search": "Search", "HeroSection.title": "Book Studiotime anywhere", - "HeroSection.subTitle": "The largest online community to rent music studios" + "HeroSection.subTitle": "The largest online community to rent music studios", + "ListingPage.loadingListingData": "Loading listing data" }