login out not fully working yet

app.js

@@ -59,7 +59,7 @@ let auth = require('./routes/auth');
 
 app.use('/api/v1/', api);
 app.use('/auth', auth);
-app.use('/', index);
+app.use('*', index);
 
 // Catchall for push state
 app.use(function(req, res) {

migrations/20160502122351_create_listings.js

@@ -4,6 +4,7 @@ exports.up = function(knex, Promise) {
   		t.dateTime('createdAt').notNull();
 		t.dateTime('updatedAt').nullable();
 		t.dateTime('deletedAt').nullable();
+		t.string('rentSale').notNull().defaultTo('For Sale');
 		t.string('address').nullable();
 		t.string('price').unsigned().nullable();
 		t.integer('beds').unsigned().nullable();

migrations/20160502122423_create_rentals.js

@@ -4,6 +4,7 @@ exports.up = function(knex, Promise) {
   		t.dateTime('createdAt').notNull();
 		t.dateTime('updatedAt').nullable();
 		t.dateTime('deletedAt').nullable();
+		t.string('rentSale').notNull().defaultTo('For Rent');
 		t.string('address').nullable();
 		t.string('price').unsigned().nullable();
 		t.integer('beds').unsigned().nullable();

public/scripts/components/Footer.js

@@ -3,7 +3,9 @@ import React from 'react';
 export default React.createClass({
 	render: function() {
 		return (
-				<h3 className="footer">Footer</h3>
+			<div className="footer">
+				<p className="footerText">Copyright 2016 Buda Technologies, Inc.</p>
+			</div>
 			);
 	}
 });

public/scripts/components/Header.js

@@ -1,9 +1,111 @@
 import React from 'react';
+import Rayon from 'rayon';
+import user from './../models/UserModel';
+import {browserHistory} from 'react-router';
+import $ from 'jquery';
 
 export default React.createClass({
+	getInitialState: function() {
+		return {
+			regModalVisible: false,
+			regModalVisible: false,
+			user: user
+		};
+	},
+	componentDidMount: function() {
+		this.state.user.on('change', () => {
+			this.setState({
+				user: user
+			});
+		});
+	},
 	render: function() {
 		return (
-			<h3 className="header">Header</h3>
+			<div>
+			<div className="navBar">
+				<div className="logoDiv">
+					<h3 className="homeFinderLogo navLeft">Logo Goes Here</h3>
+					<h3 className="homeFinderName navLeft">Home Finder Lite</h3>
+				</div>
+				<div className="navLinks">
+					<a className="navLink" onClick={this.regOpenModal}>Sign Up</a>
+					<a className="navLink" onClick={this.logOpenModal}>Sign In</a>
+					<a className="navLink" onClick={this.logout}>Sign Out</a>
+				</div>
+			</div>
+			<Rayon className="regForm" isOpen={this.state.regModalVisible} onClose={this.regCloseModal}>
+					<form action="/auth/register" method="post">
+						<div>
+							<input type="text" placeholder="first name" name="firstName"/>
+						</div>
+						<div>
+							<input type="text" placeholder="last name" name="lastName"/>
+						</div>
+						<div>
+							<input type="text" placeholder="phone" name="phone"/>
+						</div>
+						<div>
+							<input type="email" placeholder="email" name="email"/>
+						</div>
+						<div>
+							<input type="text" placeholder="bio" name="bio"/>
+						</div>
+						<div>
+							<input type="password" placeholder="password" name="password"/>
+						</div>
+						<button>Register</button>
+					</form>
+					<button onClick={this.regCloseModal}>Cancel</button>
+				</Rayon>
+				<Rayon className="loginForm" isOpen={this.state.logModalVisible} onClose={this.logCloseModal}>
+					<form action="auth/login" method="post">
+						<div>
+							<input type="email" placeholder="email" name="email"/>
+						</div>
+						<div>
+							<input type="password" placeholder="password" name="password"/>
+						</div>
+						<button>Log in</button>
+					</form>
+					<button onClick={this.logCloseModal}>Cancel</button>
+				</Rayon>
+			</div>
 			);
+	},
+	regOpenModal: function() {
+		this.setState({
+			regModalVisible: true
+		});
+		console.log(this.state.user.get('id'));
+	},
+	regCloseModal: function() {
+		this.setState({
+			regModalVisible: false
+		});
+				console.log(this.state.user.get('id'));
+
+	},
+	logOpenModal: function() {
+		this.setState({
+			logModalVisible: true
+		});
+				console.log(this.state.props.user);
+
+	},
+	logCloseModal: function() {
+		this.setState({
+			logModalVisible: false
+		});
+				console.log(this.state.props.user);
+
+	},
+	logout: function(e) {
+		e.preventDefault();
+		this.state.user.clear();
+		$.ajax({
+			type: 'POST',
+			url: '/auth/logout'
+		});
+		browserHistory.push('/');
 	}
 });

public/scripts/components/PropEntryForm.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import ListingCollection from './../collections/ListingCollection.js';
+
+export default React.createClass({
+	getInitialState: function() {
+		return {formData: {}};
+	},
+	componentDidMount: function() {
+		// check this.props.type to deteremine where to make the ajax request
+  		//make an ajax request and update state formData
+	},
+	render: function() {
+		return(
+		<div>
+			<form onChange={this.formChange}>
+				<input type="text" placeholder="Address" value={this.state.formData.address} ref="address"/>	
+				<input type="text" placeholder="Price" value={this.state.formData.price} ref="price"/>
+				<input type="text" placeholder="Beds" value={this.state.formData.beds} ref="beds"/>
+				<input type="text" placeholder="Baths" value={this.state.formData.baths} ref="baths"/>
+				<input type="text" placeholder="Square Feet" value={this.state.formData.sqft} ref="sqft"/>
+				<input type="text" placeholder="Acres" value={this.state.formData.acres} ref="acres"/>
+				<input type="text" placeholder="Property Type" value={this.state.formData.type} ref="type"/>
+				<input type="text" placeholder="Stories" value={this.state.formData.stories} ref="stories"/>
+				<input type="text" placeholder="Year Built" value={this.state.formData.year} ref="year"/>
+				<input type="button" onClick={this.clearForm} value="Clear"/>
+				<input type="button" onCLick={this.deleteHouse} value="Delete" />
+				<input type="button" onClick={this.handleSubmit} value="Submit"/>
+			</form>
+		</div>
+		);
+	},
+	formChange: function() {
+		this.setState({formData: {
+     		address: this.refs.address.value,
+     		price: this.refs.price.value,
+     		beds: this.refs.beds.value,	
+     		baths: this.refs.baths.value,
+     		sqft: this.refs.sqft.value,
+     		acres: this.refs.acres.value,
+     		type: this.refs.type.value,
+     		stories: this.refs.stories.value,
+     		year: this.refs.year.value
+    }});
+	},
+	clearForm: function() {
+		this.setState({formData: {}});
+	},
+	handleSubmit: function(e) {
+		console.log(this.state.formData);
+		e.preventDefault();
+    	ListingCollection.save({
+    		address: this.refs.address.value,
+     		price: this.refs.price.value,
+     		beds: this.refs.beds.value,	
+     		baths: this.refs.baths.value,
+     		sqft: this.refs.sqft.value,
+     		acres: this.refs.acres.value,
+     		type: this.refs.type.value,
+     		stories: this.refs.stories.value,
+     		year: this.refs.year.value
+    	});
+	}
+});
+
+// fetch data 
+// this.props.params for route
+// react router documentation
+// if statements for which route to plug into fetch call

public/scripts/components/PropertyThumb.js

@@ -10,8 +10,9 @@ export default React.createClass({
 				<div>
 					<ul>
 						<li>{this.props.address}</li>
-						<li>For Sale/Rent</li>
+						<li>{this.props.rentSale}</li>
 						<li>{this.props.price}</li>
+						<li>{this.props.agent}</li>
 					</ul>
 				</div>
 			</div>

public/scripts/components/SearchBar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default React.createClass({
+	render: function() {
+		return (
+			<div>
+				<form>
+					<input type="text" placeholder="Enter search terms"/>
+					<input type="submit" value="Search"/>
+					<input type="button" value="Clear"/>
+				</form>
+			</div>
+			);
+	}
+});

public/scripts/components/pages/Dashboard.js

@@ -4,7 +4,7 @@ import {Link} from 'react-router';
 export default React.createClass({
 	render: function() {
 		return (
-			<div>
+			<div className="dashBoardDiv">
 				<a href="/">Home</a>
 				<h1>Dashboard Main</h1>
 				<h2>Manage Listings</h2>

public/scripts/components/pages/EditListing.js

@@ -1,15 +1,13 @@
 import React from 'react';
+import PropEntryForm from './../PropEntryForm';
 
 export default React.createClass({
 	render: function() {
 		return (
 			<div>
 				<a href="/">Home</a><i className="fa fa-angle-right"></i><a href="/dashboard">Dashboard</a>
 				<h1>Edit Listing</h1>
-				<h2>Input Form Goes Here</h2>
-				<button>Clear Input</button>
-				<button>Delete Listing</button>
-				<button type="submit">Submit</button>
+				<PropEntryForm />
 			</div>
 			);
 	}

public/scripts/components/pages/EditRental.js

@@ -1,15 +1,13 @@
 import React from 'react';
+import PropEntryForm from './../PropEntryForm';
 
 export default React.createClass({
 	render: function() {
 		return (
 			<div>
 				<a href="/">Home</a><i className="fa fa-angle-right"></i><a href="/dashboard">Dashboard</a>
 				<h1>Edit Rental</h1>
-				<h2>Input Form Goes Here</h2>
-				<button>Clear Input</button>
-				<button>Delete Rental</button>
-				<button type="submit">Submit</button>
+				<PropEntryForm />
 			</div>
 			);
 	}

public/scripts/components/pages/ForRentList.js

@@ -1,19 +1,43 @@
 import React from 'react';
 import {Link} from 'react-router';
-import RentalCollection from './../../collections/RentalCollection';
+import Rentals from './../../collections/RentalCollection';
+import PropertyThumb from './../PropertyThumb.js';
+import SearchBar from './../SearchBar.js';
 
 export default React.createClass({
 	getInitialState: function() {
-		let rentals = RentalCollection;
-		return {
-			rentals: rentals
-		};
+		return { Rentals: Rentals};
+	},
+	componentDidMount: function() {
+		Rentals.on('update', this.updateRentals);
+		Rentals.fetch();
+	},
+	updateRentals: function() {
+		this.setState({Rentals: Rentals});
 	},
 	render: function() {
+		const rentals = this.state.Rentals.map((rental, i, array) => {
+			return (
+				<PropertyThumb
+					key={rental.get('id')}
+					id={rental.get('id')}
+					address={rental.get('address')}
+					price={rental.get('price')}
+					beds={rental.get('beds')}
+					baths={rental.get('baths')}
+					sqft={rental.get('sqft')}
+					acres={rental.get('acres')}
+					type={rental.get('type')}
+					stories={rental.get('stories')}
+					year={rental.get('year')} />
+				);
+		});
 		return (
 			<div>
 				<a href="/">Home</a>
 				<h1>Rentals Main Page</h1>
+				<SearchBar />
+				{rentals}
 				<Link to="/forrent/details/">Details Page</Link>
 
 			</div>

public/scripts/components/pages/ForSaleList.js

@@ -1,20 +1,29 @@
 import React from 'react';
 import {Link} from 'react-router';
 import Listings from './../../collections/ListingCollection';
+import Agents from './../../collections/AgentCollection';
 import PropertyThumb from './../PropertyThumb.js';
+import SearchBar from './../SearchBar.js';
 
 export default React.createClass({
 	getInitialState: function() {
-		return {Listings: Listings};
+		return {Listings: Listings,
+				Agents: Agents};
 	},
 	componentDidMount: function() {
 		Listings.on('update', this.updateListings);
 		Listings.fetch();
+		Agents.on('update', this.updateAgents);
+		Agents.fetch();
 	},
 	updateListings: function() {
 		this.setState({Listings: Listings});
 	},
+	updateAgents: function() {
+		this.setState({Agents: Agents});
+	},
 	render: function() {
+		const agents = Agents;
 		const listings = this.state.Listings.map((listing, i, array) => {
 			return (
 				<PropertyThumb
@@ -28,13 +37,17 @@ export default React.createClass({
 					acres={listing.get('acres')}
 					type={listing.get('type')}
 					stories={listing.get('stories')}
-					year={listing.get('year')} />
+					year={listing.get('year')}
+					agent={agents[listing.get('userId')].firstName}
+					userId={listing.get('userId')}
+					rentSale={listing.get('rentSale')} />
 				);
 		});
 		return (
 			<div>
 				<a href="/">Home</a>
 				<h1>Listings Main Page</h1>
+				<SearchBar />
 				{listings}
 				<Link to="/forsale/details">Details Page</Link>