maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

ListingPage: Show images

Browse source
This commit is contained in:
Vesa Luusua 2017-03-03 19:57:31 +02:00
parent 2624b3bb9c
commit aeb28c8941
1 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/containers/ListingPage/ListingPage.js
View file

@ -58,20 +58,32 @@ export class ListingPageComponent extends Component {
const title = currentListing ? currentListing.attributes.title : '';
const description = currentListing ? currentListing.attributes.description : '';
// TODO Responsive image-objects need to be thought through when final image sizes are know
const images = currentListing && currentListing.images
? currentListing.images.map(i => ({ id: i.id, sizes: i.attributes.sizes }))
: [];
// TODO componentize
const imageCarousel = images.length > 0
? (
<div className={css.imageContainer}>
<img className={css.mainImage} alt={title} src={images[0].sizes[0].url} />
<div className={css.thumbnailContainer}>
{images.slice(1).map(image => (
<div key={image.id.uuid} className={css.squareWrapper}>
<div className={css.aspectWrapper}>
<img className={css.thumbnail} alt={`${title} thumbnail`} src={image.sizes[0].url} />
</div>
</div>
))}
</div>
</div>
)
: null;
const pageContent = (
<PageLayout title={`${title} ${info.price}`}>
<div className={css.imageContainer}>
<img className={css.mainImage} alt={info.images[0].title} src={info.images[0].imageUrl} />
<div className={css.thumbnailContainer}>
{info.images.slice(1).map(image => (
<div key={image.id} className={css.squareWrapper}>
<div className={css.aspectWrapper}>
<img className={css.thumbnail} alt={image.title} src={image.imageUrl} />
</div>
</div>
))}
</div>
</div>
{ imageCarousel }
{/* eslint-disable react/no-danger */}
<div className={css.description} dangerouslySetInnerHTML={{ __html: description }} />
{/* eslint-enable react/no-danger */}
@ -157,7 +169,7 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
onLoadListing: id => dispatch(showListings({ id, include: ['author'] })),
onLoadListing: id => dispatch(showListings({ id, include: ['author', 'images'] })),
};
};