new contact impl (bug with instant validation failure)

Author: Matthew Vita

samples/react-redux-patient-demographics-example/src/routes/Patient/Demographics/Contact/ContactComponent.js

@@ -39,6 +39,12 @@ class Contact extends Component {
     this.setState({ cachedForm: this.props.contact })
   }
 
+  componentDidMount() {
+    if (this.props.contact.isNewContact) {
+      this.handleEdit()
+    }
+  }
+
   handleInputChange(event) {
     let value
     if (event.target.name === 'phone') {
@@ -72,7 +78,7 @@ class Contact extends Component {
       let value
       // Make switch statement
       if (keyName === 'phone') {
-        value = this.sanitizeToJustNumbers(this.props.contact[keyName].toString())
+        value = this.sanitizeToJustNumbers((this.props.contact[keyName] || '').toString())
       } else if (keyName === 'id') {
         value = this.props.contact[keyName]
       } else {

samples/react-redux-patient-demographics-example/src/routes/Patient/Demographics/PatientDemographicsComponent.js

@@ -26,6 +26,10 @@ class PatientDemographics extends React.Component {
       });
   }
 
+  addNewContact() {
+    this.props.startAddingNewContact(this.props.routeParams.pid)
+  }
+
   determineIfRouteIsValid() {
     return this.props.routeParams.pid
   }
@@ -49,7 +53,8 @@ class PatientDemographics extends React.Component {
   }
 
   render() {
-    let children = null;
+    let children = null
+    let addContactVisibility = 'hidden'
 
     switch (this.state.tab) {
       case this.TABS.BASIC:
@@ -58,13 +63,15 @@ class PatientDemographics extends React.Component {
         break;
       case this.TABS.CONTACTS:
         if (this.props.contacts) {
-          children = this.props.contacts.map(contact =>
-            <Contact updateContactData={this.props.updateContactData}
-                     deleteContact={this.props.deleteContact}
-                     key={contact.id}
-                     contact={contact}/>
+          children = this.props.contacts.map((contact) => {
+            return <Contact updateContactData={this.props.updateContactData}
+                            deleteContact={this.props.deleteContact}
+                            key={contact.id}
+                            contact={contact}/>
+            }
           )
         }
+        addContactVisibility = 'visible'
         break;
     }
 
@@ -89,6 +96,12 @@ class PatientDemographics extends React.Component {
           </div>
 
           {children}
+
+          <br />
+
+          <button type='button'
+                  className={['btn', 'btn-default', 'btn-sm', addContactVisibility].join(' ')}
+                  onClick={this.addNewContact.bind(this)}>ADD NEW CONTACT</button>
         </div>
       </div>
     )

samples/react-redux-patient-demographics-example/src/routes/Patient/Demographics/PatientDemographicsContainer.js

@@ -1,12 +1,14 @@
 import { connect } from 'react-redux'
-import { setPatientInContext, updatePatientData, updateContactData, deleteContact } from '../PatientModule'
+import { setPatientInContext, updatePatientData, updateContactData, deleteContact, startAddingNewContact }
+  from '../PatientModule'
 import PatientDemographics from './PatientDemographicsComponent'
 
 const mapDispatchToProps = {
   setPatientInContext,
   updatePatientData,
   updateContactData,
-  deleteContact
+  deleteContact,
+  startAddingNewContact
 }
 
 const extractBasicInfo = (state) => {

samples/react-redux-patient-demographics-example/src/routes/Patient/PatientModule.js

@@ -100,7 +100,7 @@ export const updatePatientData = (data) => {
 export const updateContactData = (data) => {
   return (dispatch, getState) => {
     return new Promise((resolve, reject) => {
-      console.debug(`updating contact patient data for ${getState().patient.patientInContext}`)
+      console.debug(`updating contact data for ${getState().patient.patientInContext}`)
       dispatch({
         type    : 'UPDATE_CONTACT_DATA',
         payload : [getState().patient.patientInContext, data]
@@ -113,7 +113,7 @@ export const updateContactData = (data) => {
 export const deleteContact = (data) => {
   return (dispatch, getState) => {
     return new Promise((resolve, reject) => {
-      console.debug(`deleting contact patient data for ${getState().patient.patientInContext}`)
+      console.debug(`deleting contact data for ${getState().patient.patientInContext}`)
       dispatch({
         type    : 'DELETING_CONTACT',
         payload : [getState().patient.patientInContext, data]
@@ -123,9 +123,18 @@ export const deleteContact = (data) => {
   }
 }
 
-export const actions = {
-  setPatientInContext
-};
+export const startAddingNewContact = (data) => {
+  return (dispatch, getState) => {
+    return new Promise((resolve, reject) => {
+      console.debug(`starting to add contact data for ${getState().patient.patientInContext}`)
+      dispatch({
+        type    : 'START_ADDING_CONTACT',
+        payload : [getState().patient.patientInContext, data]
+      })
+      resolve()
+    })
+  }
+}
 
 /**
  * Reducer
@@ -145,19 +154,23 @@ export default function patientReducer (state = initialState, action) {
       break
     case 'UPDATE_CONTACT_DATA':
       const contactIndexForUpdation = _.findIndex(copy[action.payload[0]].contacts, (c) => {
-        return c.id == action.payload[1].id
+        return c.id === action.payload[1].id
       })
       copy[action.payload[0]].contacts[contactIndexForUpdation] = action.payload[1]
       result = copy
       break
+    case 'START_ADDING_CONTACT':
+      const newContactId = _.last(copy[action.payload[0]].contacts).id + 1;
+      copy[action.payload[0]].contacts.push({ isNewContact: true, id: newContactId })
+      result = copy
+      break
     case 'DELETING_CONTACT':
       const contactIndexForDeletion = _.findIndex(copy[action.payload[0]].contacts, (c) => {
         if (c && c.hasOwnProperty('id')) {
-          return c.id == action.payload[1]
+          return c.id === action.payload[1]
         }
       })
       delete copy[action.payload[0]].contacts[contactIndexForDeletion]
-      console.log(copy)
       result = copy
       break
     default: