Contact done

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>