Contact form UI

web/src/lib/handlers.js

@@ -1,4 +1,5 @@
 import {markSeen} from './api'
+import {defaultContactMessage, listingUrl} from './helpers'
 
 const setMaxPrice = ({type, action}, component) => {
   const maxPrice = parseFloat(action.maxPrice)
@@ -52,8 +53,6 @@ const viewListingDetails = ({type, action}, component) => {
   const scrollElem = document.querySelector('.right-content')
   component.savedScrollTop = scrollElem.scrollTop
 
-  //component.router.listingId = action.id;
-
   component.setState(
     {
       listingDetails: true,
@@ -63,7 +62,6 @@ const viewListingDetails = ({type, action}, component) => {
       listing: action.listing
     },
     () => {
-      //component.router.update();
       markSeen(action.id)
       const m = component.findMarker(action.id)
       if (m) {
@@ -221,8 +219,6 @@ const backToResults = ({type, action}, component) => {
       listingDetails: false
     },
     () => {
-      //component.router.update();
-
       if (prevSelected) {
         prevSelected.marker.setIcon(component.visitedMarkerIcon())
       }
@@ -268,7 +264,6 @@ const sortChange = ({type, action}, component) => {
       page: 0
     },
     () => {
-      //component.router.update();
       component.refreshListings()
     }
   )
@@ -280,14 +275,59 @@ const updateRoute = ({type, action}, component) => {
 
 const openContact = ({type, action}, component) => {
   component.setState({
-    contactFormOpen: true
-  });
+    contactFormOpen: true,
+    contact: {
+      ...component.state.contact,
+      message: defaultContactMessage(listingUrl(component.state.listingId)),
+      emailInvalid: false,
+      nameInvalid: false,
+      name: '',
+      email: '',
+      phone: ''
+    }
+  })
 }
 
 const closeContact = ({type, action}, component) => {
   component.setState({
     contactFormOpen: false
-  });
+  })
+}
+
+const updateContactInfo = ({type, action}, component) => {
+
+  let nameInvalid = component.state.contact.nameInvalid
+  let emailInvalid = component.state.contact.emailInvalid
+
+  if (action.field === 'name') {
+    nameInvalid = !action.value
+  }
+
+  if (action.field === 'email') {
+    emailInvalid = !action.value
+  }
+
+  component.setState({
+    contact: {
+      ...component.state.contact,
+      [action.field]: action.value,
+      ...{nameInvalid, emailInvalid}
+    }
+  })
+}
+
+const invalidContact = ({type, action}, component) => {
+  const {name, email} = component.state.contact
+
+  component.setState({
+    contact: {
+      ...component.state.contact,
+      ...{nameInvalid: !name, emailInvalid: !email}
+    }
+  })
+}
+
+const submitContact = ({type, action}, component) => {
 }
 
 const handlers = {
@@ -313,7 +353,10 @@ const handlers = {
   SORT_CHANGE: sortChange,
   UPDATE_ROUTE: updateRoute,
   OPEN_CONTACT: openContact,
-  CLOSE_CONTACT: closeContact
+  CLOSE_CONTACT: closeContact,
+  UPDATE_CONTACT_INFO: updateContactInfo,
+  SUBMIT_CONTACT: submitContact,
+  INVALID_CONTACT: invalidContact
 }
 
 export const handleMessage = ({type, action}, component) => {
@@ -321,6 +364,6 @@ export const handleMessage = ({type, action}, component) => {
     throw new `Unhandled message: ${type}`()
   }
 
-  console.log(type);
+  console.log(type, action);
   return handlers[type]({type, action}, component)
 }