fixes for updating contact entries

Author: Matthew Vita

samples/react-redux-patient-demographics-example/src/common/FormsyHiddenInput.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import Formsy from 'formsy-react'
+
+export const FormsyHiddenInput = React.createClass({
+  mixins: [Formsy.Mixin],
+
+  changeValue(event) {
+    let value = ''
+
+    if (event && event.currentTarget && event.currentTarget.value) {
+      value = event.currentTarget.value
+      event.currentTarget.value = value
+    }
+
+    this.props.onChange(event)
+    this.setValue(value)
+  },
+
+  render() {
+    return (
+      <div className='hidden'>
+        <input type='hidden'
+               onChange={this.changeValue}
+               value={this.getValue()}
+               name={this.props.name} />
+      </div>
+    );
+  }
+});

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

@@ -17,12 +17,15 @@ class Basic extends React.Component {
       dob: moment(),
       cachedForm: {}
     }
+
+    this.handleCancel = this.handleCancel.bind(this)
     this.handleInputChange = this.handleInputChange.bind(this)
     this.handleEdit = this.handleEdit.bind(this)
     wireUpCustomFormsyValidators()
   }
 
   handleEdit() {
+    console.debug('Basic component in edit mode')
     this.setLocalStateToStoreValues()
     this.setState({ showForm: true })
     this.setState({ cachedForm: this.props.info })
@@ -32,14 +35,15 @@ class Basic extends React.Component {
   }
 
   handleSubmit(formValues) {
+    console.debug('Submitting basic info updates')
     // Convert dob back to date string
     formValues.dob = formValues.dob.format('YYYY-MM-DD')
     this.props.updatePatientData(formValues)
     this.setState({ showForm: false })
   }
 
   handleCancel() {
-    this.setState(this.state.cachedForm)
+    console.debug('Basic component in read mode')
     this.setState({ cachedForm: {} })
     this.setState({ showForm: false })
   }
@@ -378,7 +382,7 @@ class Basic extends React.Component {
           </table>
 
           <button className='btn btn-default btn-sm' type='submit'>SAVE</button>
-          <button className='btn btn-default btn-sm' type='input' onClick={this.handleCancel.bind(this)}>CANCEL</button>
+          <button className='btn btn-default btn-sm' type='button' onClick={this.handleCancel.bind(this)}>CANCEL</button>
         </Formsy.Form>
       )
     } else {

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

@@ -1,7 +1,7 @@
 import React, {Component} from 'react'
-import MaskedInput from 'react-text-mask' // Delete?
 import Formsy from 'formsy-react'
 import { FormsyInput } from '../../../../common/FormsyInput'
+import { FormsyHiddenInput } from '../../../../common/FormsyHiddenInput'
 import { FormsyDatePicker } from '../../../../common/FormsyDatePicker'
 import { FormsyMaskedInput } from '../../../../common/FormsyMaskedInput'
 import { wireUpCustomFormsyValidators } from '../../../../common/CustomValidators'
@@ -23,25 +23,23 @@ class Contact extends Component {
   }
 
   handleCancel() {
-    console.log('handleCancel')
-    this.setState(this.state.cachedForm)
-    //this.setState({ cachedForm: {} })
-    this.setState({showForm: false})
+    console.debug('Basic component in read mode')
+    this.setState({ cachedForm: {} })
+    this.setState({ showForm: false })
   }
 
   handleDelete() {
     console.log('handleDelete')
   }
 
   handleEdit() {
-    console.log('handleEdit')
+    console.debug('Contact component in edit mode')
     this.setPropsToLocalState()
     this.setState({showForm: true})
-    //this.setState({ cachedForm: this.props.contact })
+    this.setState({ cachedForm: this.props.contact })
   }
 
   handleInputChange(event) {
-    console.log('handleInputChange')
     let value
     if(event.target.name === 'phone') {
       value = this.sanitizeToJustNumbers(event.target.value.toString())
@@ -54,9 +52,7 @@ class Contact extends Component {
   }
 
   handleSubmit(formValues) {
-    console.log('handleSubmit')
-
-    console.log(formValues);
+    console.debug('Submitting contact info updates')
     this.props.updateContactData(formValues)
     this.setState({ showForm: false })
   }
@@ -70,7 +66,7 @@ class Contact extends Component {
   }
 
   setPropsToLocalState() {
-    const keys = ['id','name', 'relation', 'address', 'phone', 'city', 'postal', 'state', 'country', 'email']
+    const keys = ['id', 'name', 'relation', 'address', 'phone', 'city', 'postal', 'state', 'country', 'email']
 
     keys.forEach((keyName) => {
       let value
@@ -289,19 +285,16 @@ class Contact extends Component {
               </tr>
             <tr>
               <td>
-                <FormsyInput type='hidden'
-                             value={this.state.id}
-                             onChange={this.handleInputChange}
-                             name='id'
-                             label='ID'
-
-                             required />
+                <FormsyHiddenInput value={this.state.id}
+                                   onChange={this.handleInputChange}
+                                   name='id'
+                                   required />
               </td>
             </tr>
             </table>
 
             <button className='btn btn-default btn-sm' type='submit'>SAVE</button>
-            <button type='button' className='btn btn-default btn-sm' onClick={this.handleCancel}>CANCEL</button>
+            <button type='button' className='btn btn-default btn-sm' onClick={this.handleCancel.bind(this)}>CANCEL</button>
 
           </Formsy.Form>
 

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

@@ -70,7 +70,7 @@ export const setPatientInContext = (patientId) => {
           })
           reject(message);
         } else {
-          console.warn(`Setting patient ${patientId} as patient in context`);
+          console.debug(`Setting patient ${patientId} as patient in context`);
           dispatch({
             type    : 'SET_PATIENT_IN_CONTEXT',
             payload : patientId
@@ -86,6 +86,7 @@ export const setPatientInContext = (patientId) => {
 export const updatePatientData = (data) => {
   return (dispatch, getState) => {
     return new Promise((resolve, reject) => {
+      console.debug(`updating basic patient data for ${getState().patient.patientInContext}`)
       dispatch({
         type    : 'UPDATE_PATIENT_DATA',
         payload : [getState().patient.patientInContext, data]
@@ -96,9 +97,9 @@ export const updatePatientData = (data) => {
 }
 
 export const updateContactData = (data) => {
-  console.log("hey I'm contact data and I'm running")
   return (dispatch, getState) => {
     return new Promise((resolve, reject) => {
+      console.debug(`updating contact patient data for ${getState().patient.patientInContext}`)
       dispatch({
         type    : 'UPDATE_CONTACT_DATA',
         payload : [getState().patient.patientInContext, data]
@@ -118,26 +119,20 @@ export const actions = {
 const initialState = testData
 export default function patientReducer (state = initialState, action) {
   let result
-  // maybe define "copy" here
+  let copy = clone(state)
   switch (action.type) {
     case 'SET_PATIENT_IN_CONTEXT':
-      result = { ...state, patientInContext: action.payload }
+      copy.patientInContext = action.payload
+      result = copy
       break
     case 'UPDATE_PATIENT_DATA':
-      let copy1 = clone(state)
-      copy1[action.payload[0]].basic = action.payload[1]
-      result = copy1
+      copy[action.payload[0]].basic = action.payload[1]
+      result = copy
       break
     case 'UPDATE_CONTACT_DATA':
-      //console.log("I ran too in the store!!")
-      // console.log([action.payload[0]].basic)
-      // console.log(action.payload[1])
-      let copy2 = clone(state)
       let id = action.payload[1].id - 1
-      // console.log(copy2);
-      // console.log(result);
-      copy2[action.payload[0]].contacts[id] = action.payload[1]
-      result = copy2
+      copy[action.payload[0]].contacts[id] = action.payload[1]
+      result = copy
       break
     default:
       result = state