Added link to create new property, also added restriction to only log…

…ged in user, simple html validation relates to #32
FACN3 · Jan 24, 2018 · 799d038 · 799d038
1 parent 319e908
commit 799d038
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -20,9 +20,15 @@ class App extends Component {
       defaultCenter: { lat: 31.771959, lng: 35.217018 },
       defaultZoom: 8,
       details: {},
+      currentUser: '',
     };
     this.handleSearch = this.handleSearch.bind(this);
     this.handleDetails = this.handleDetails.bind(this);
+    this.updateUser = this.updateUser.bind(this);
+  }
+
+  updateUser(user) {
+    this.setState({ currentUser: user });
   }
 
   handleSearch(coord, callback) {
@@ -47,7 +53,7 @@ class App extends Component {
       <div>
         <BrowserRouter>
           <div>
-            <Header />
+            <Header updateUser={this.updateUser} />
             <Route
               exact
               path="/"
@@ -75,7 +81,11 @@ class App extends Component {
               path="/contact"
               render={props => <ContactForm details={this.state.details} {...props} />}
             />
-            <Route exact path="/new" component={PropertyForm} />
+            <Route
+              exact
+              path="/new"
+              render={props => <PropertyForm currentUser={this.state.currentUser} {...props} />}
+            />
           </div>
         </BrowserRouter>
       </div>

diff --git a/client/src/components/Header.js b/client/src/components/Header.js
@@ -15,6 +15,7 @@ class Header extends Component {
       .get('auth/current_user')
       .then(user => {
         this.setState({ currentUser: user.data });
+        this.props.updateUser(user.data);
       })
       .catch(err => {
         return (

diff --git a/client/src/components/PropertyForm.js b/client/src/components/PropertyForm.js
@@ -65,6 +65,10 @@ class PropertyForm extends Component {
 
   handleSubmit(event) {
     event.preventDefault();
+    if (!this.props.currentUser) {
+      alert('Please Login first');
+      return;
+    }
     const { imageUrl } = this.state;
     const { lat, lng } = this.state.selectedOption.value;
     const name = event.target.name.value;
@@ -104,28 +108,29 @@ class PropertyForm extends Component {
           <div className="row">
             <div className="input-field col s12">
               <i className="material-icons prefix">description</i>
-              <input id="name" name="name" type="text" className="validate" />
+              <input required id="name" name="name" type="text" className="validate" />
               <label htmlFor="name">Description</label>
             </div>
 
             <div className="input-field col s12">
               <i className="material-icons prefix">home</i>
-              <input id="type" name="type" type="text" className="validate" />
+              <input required id="type" name="type" type="text" className="validate" />
               <label htmlFor="type">Type: e.g studio</label>
             </div>
             <div className="input-field col s12">
               <i className="material-icons prefix">create</i>
-              <input id="size" name="size" type="number" className="validate" />
+              <input required id="size" name="size" type="number" className="validate" />
               <label htmlFor="size">Size(number of bedrooms)</label>
             </div>
             <div className="input-field col s12">
               <i className="material-icons prefix">attach_money</i>
-              <input id="price" name="price" type="number" className="validate" />
+              <input required id="price" name="price" type="number" className="validate" />
               <label htmlFor="price">Price(ILS)</label>
             </div>
             <div className="input-field col s12">
               <i className="material-icons prefix">add_location</i>
               <Select
+                required
                 placeholder="Select Location"
                 id="location"
                 name="location"

diff --git a/client/src/components/SearchForm.js b/client/src/components/SearchForm.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import Select from 'react-select';
 import 'react-select/dist/react-select.css';
 import { data } from '../citydata';
@@ -29,14 +30,18 @@ class SearchForm extends Component {
     return (
       <div className="container">
         <div>
-          <h1 className="flow-text white-text bold center card-panel teal lighten-2">
-            Find A House Fast!!!!
+          <div className="flow-text white-text bold center card-panel teal lighten-2">
+            <h3>Find A House Fast!!!! </h3>
+          </div>
+          <h1 className="flow-text white-text bold center card-panel grey lighten-2">
+            <Link to={'/new'}>Or Click here Provide One</Link>
           </h1>
 
           <h2 className="flow-text">Select Your Preferrded location below and get a house fast</h2>
         </div>
         <form onSubmit={this.handleSubmit}>
           <Select
+            required
             name="city"
             value={this.state.selectedOption}
             onChange={this.handleChange}