Reorganize & reformat

web/src/components/ListingDetails.js

@@ -0,0 +1,114 @@
+import React from 'react'
+import Gallery from './gallery'
+import {formatPrice} from '../lib/helpers'
+
+export default class ListingDetails extends React.Component {
+  onReadMore (e) {
+    e.preventDefault()
+    this.props.dispatch({type: 'EXPAND_DESCRIPTION'})
+  }
+
+  onBackClick () {
+    this.props.dispatch({
+      type: 'UPDATE_ROUTE',
+      action: {
+        toDispatch: {
+          type: 'BACK_TO_RESULTS'
+        },
+        params: {
+          listingId: null
+        }
+      }
+    })
+    this.props.dispatch({type: 'BACK_TO_RESULTS'})
+  }
+
+  render () {
+    const {listing, descriptionExpanded} = this.props
+    if (!listing) {
+      return null
+    }
+    const descriptionClasses = descriptionExpanded
+      ? 'ld-description expanded'
+      : 'ld-description'
+    const images = listing.images.map(image => ({
+      original: image,
+      thumbnail: image
+    }))
+
+    return (
+      <div className="ld-container">
+        <div className="ld-header">
+          <div className="back-to-results">
+            <button
+              className="back-to-results-btn"
+              onClick={this.onBackClick.bind(this)}
+            >
+              <i className="fa fa-arrow-left" aria-hidden="true" />
+              <span>
+                Nazad na rezultate
+              </span>
+            </button>
+          </div>
+          <button className="hide-listing">
+            <i className="fa fa-thumbs-o-down" aria-hidden="true" />
+            <span>
+              Sakrij
+            </span>
+          </button>
+        </div>
+
+        <div className="ld-details">
+          <Gallery
+            dispatch={this.props.dispatch}
+            images={listing.images}
+            imageIndex={this.props.imageIndex}
+          />
+          <div className="ld-price-address-box">
+            <div className="ld-price">
+              {formatPrice(listing.price)}
+            </div>
+
+            <div className="ld-address">
+              <div className="">{listing.address}</div>
+              <div className="">{listing.location}</div>
+            </div>
+          </div>
+
+          <div className="ld-features">
+            <div className="ld-feature-box">
+              <i className="fa fa-bed" />
+              {listing.rooms} sobe
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home" />
+              {listing.size}m2
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home" />
+              {listing.floor}. sprat
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home" />
+              --
+            </div>
+          </div>
+          <div className="ld-check-availability">
+            <button>Kontaktiraj</button>
+          </div>
+          <div className={descriptionClasses}>
+            {listing.longDescription}
+          </div>
+          {!descriptionExpanded
+            ? <div className="ld-read-more">
+                <a href="" onClick={this.onReadMore.bind(this)}>
+                  Pročitajte više
+                </a>
+              </div>
+            : null}
+          <div className="ld-footer" />
+        </div>
+      </div>
+    )
+  }
+}