Contact done

web/dist/main.css

@@ -938,5 +938,5 @@ h5 {
 }
 
 input.validation-failed {
-  border: 1px solid red;
+  border: 2px solid red;
 }

web/src/components/ContactModal.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import {saveContactRequest} from '../lib/api'
 
 export default class ContactModal extends React.Component {
   onContactCloseClick (e) {
@@ -11,16 +12,32 @@ export default class ContactModal extends React.Component {
 
   onSubmit (e) {
     e.preventDefault()
-    const {name, email} = this.props.contact;
+    const {name, email, message, phone, alert} = this.props.contact;
 
     if (!name || !email) {
       this.props.dispatch({
         type: 'INVALID_CONTACT'
       })
     } else {
+
       this.props.dispatch({
-        type: 'SUBMIT_CONTACT'
+        type: 'SUBMIT_CONTACT_START'
       })
+
+      saveContactRequest(this.props.listingId, {
+        name,
+        email,
+        phone,
+        message,
+        alert
+      }).then(l => l.text()).then(res => {
+        this.props.dispatch({
+          type: 'SUBMIT_CONTACT_END'
+        });
+      }).catch(e => {
+        // TODO: should we have a global view for rendering errors
+        console.error(e)
+      });
     }
   }
 
@@ -53,7 +70,8 @@ export default class ContactModal extends React.Component {
       name,
       alert: doAlert,
       nameInvalid,
-      emailInvalid
+      emailInvalid,
+      sending
     } = this.props.contact
 
     const nameValidationClass = nameInvalid ? 'validation-failed' : ''
@@ -87,7 +105,8 @@ export default class ContactModal extends React.Component {
                 className={emailValidationClass}
                 onChange={this.onFieldChange.bind(this, 'email')}
                 placeholder="Email adresa"
-                type="text"
+                type="email"
+                name="email"
               />
               <input
                 value={phone}
@@ -114,7 +133,7 @@ export default class ContactModal extends React.Component {
               </span>
             </div>
             <div className="contact-form-footer">
-              <button>Pošalji poruku</button>
+              <button disabled={sending}>Pošalji poruku</button>
             </div>
           </form>
         </div>

web/src/components/ListingDetails.js

@@ -117,6 +117,7 @@ export default class ListingDetails extends React.Component {
         </div>
 
         {contactFormOpen ? <ContactModal
+          listingId={this.props.listing._id}
           contact={this.props.contact}
           dispatch={this.props.dispatch} /> : null}
       </div>

web/src/lib/api.js

@@ -1,5 +1,19 @@
 import fetch from 'isomorphic-fetch'
 
+export const saveContactRequest = (listingId, params) => {
+
+  let url = `http://localhost:3001/api/contact/${listingId}`
+
+  return fetch(url, {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(params)
+  });
+}
+
 export const loadListing = id => {
   let url = `http://localhost:3001/api/search/listings/${id}`
 

web/src/lib/handlers.js

@@ -327,7 +327,21 @@ const invalidContact = ({type, action}, component) => {
   })
 }
 
-const submitContact = ({type, action}, component) => {
+const submitContactStart = ({type, action}, component) => {
+  component.setState({
+    contact: {
+      sending: true
+    }
+  })
+}
+
+const submitContactEnd = ({type, action}, component) => {
+  component.setState({
+    contactFormOpen: false,
+    contact: {
+      sending: false,
+    }
+  })
 }
 
 const handlers = {
@@ -355,7 +369,8 @@ const handlers = {
   OPEN_CONTACT: openContact,
   CLOSE_CONTACT: closeContact,
   UPDATE_CONTACT_INFO: updateContactInfo,
-  SUBMIT_CONTACT: submitContact,
+  SUBMIT_CONTACT_START: submitContactStart,
+  SUBMIT_CONTACT_END: submitContactEnd,
   INVALID_CONTACT: invalidContact
 }