Listing details CSS

web/components/Main.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import Filters from './Filters';
 import Listings from './Listings';
+import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
 
 class Main extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      listingDetails: false
     };
   }
 
@@ -74,9 +76,40 @@ class Main extends React.Component {
     });
   }
 
+  onListingClick() {
+    this.setState({
+      listingDetails: true
+    })
+  }
+
+  onBackClick() {
+    this.setState({
+      listingDetails: false
+    })
+  }
+
+  renderRightContent() {
+
+    const children = [];
+
+    if (this.state.listingDetails) {
+      children.push(<ListingDetails onBackClick={this.onBackClick.bind(this)}/>);
+    } else {
+      children.push(<Filters onClose={this.onCloseClick.bind(this)}/>);
+      children.push(<Listings onListingClick={this.onListingClick.bind(this)}/>);
+    }
+    const content = (
+      <div className="right-content">
+        {children}
+      </div>);
+
+    return content;
+  }
+
   render() {
     const leftStyle  = {};
     const rightStyle = {};
+    const listingDetails = true;
 
     let leftClass    = 'left-base';
     let rightClass   = 'right-base';
@@ -107,10 +140,7 @@ class Main extends React.Component {
         </div>
 
         <div id="right" style={rightStyle} className={rightClass}>
-          <div className="right-content">
-            <Filters onClose={this.onCloseClick.bind(this)}/>
-            <Listings />
-          </div>
+          {this.renderRightContent()}
         </div>
 
         <div id="left" style={leftStyle} className={leftClass}>