Refs #5529 @0.5h; Prevent double submitting of react forms

2 files changed, 29 insertions, 3 deletions

diff --git a/app/javascript/journey_patterns/components/SaveJourneyPattern.js b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
index 7e4492e0e..d973147a0 100644
--- a/app/javascript/journey_patterns/components/SaveJourneyPattern.js
+++ b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
@@ -7,6 +7,18 @@ export default class SaveJourneyPattern extends Component {
     super(props)
   }
 
+  btnDisabled(){
+    return !this.props.status.fetchSuccess || this.props.status.isFetching
+  }
+
+  btnClass(){
+    let className = ['btn btn-default']
+    if(this.btnDisabled()){
+      className.push('disabled')
+    }
+    return className.join(' ')
+  }
+
   render() {
     if(this.props.status.policy['journey_patterns.update'] == false) {
       return false
@@ -16,8 +28,9 @@ export default class SaveJourneyPattern extends Component {
           <div className='col-lg-12 text-right'>
             <form className='jp_collection formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
               <button
-                className='btn btn-default'
+                className={this.btnClass()}
                 type='button'
+                disabled={this.btnDisabled()}
                 onClick={e => {
                   e.preventDefault()
                   this.props.editMode ? this.props.onSubmitJourneyPattern(this.props.dispatch, this.props.journeyPatterns) : this.props.onEnterEditMode()
@@ -37,4 +50,4 @@ SaveJourneyPattern.propTypes = {
   journeyPatterns: PropTypes.array.isRequired,
   status: PropTypes.object.isRequired,
   page: PropTypes.number.isRequired
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
index c5161b917..64fd7310e 100644
--- a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
@@ -7,6 +7,18 @@ export default class SaveVehicleJourneys extends Component{
     super(props)
   }
 
+  btnDisabled(){
+    return !this.props.status.fetchSuccess || this.props.status.isFetching
+  }
+
+  btnClass(){
+    let className = ['btn btn-default']
+    if(this.btnDisabled()){
+      className.push('disabled')
+    }
+    return className.join(' ')
+  }
+
   render() {
     if (this.props.filters.policy['vehicle_journeys.update'] == false) {
       return false
@@ -17,8 +29,9 @@ export default class SaveVehicleJourneys extends Component{
             <form className='vehicle_journeys formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
               <div className="btn-group sticky-actions">
                 <button
-                  className={'btn btn-default' + (this.props.status.fetchSuccess ? '' : ' disabled')}
+                  className={this.btnClass()}
                   type='button'
+                  disabled={this.btnDisabled()}
                   onClick={e => {
                     e.preventDefault()
                     this.props.editMode ? this.props.onSubmitVehicleJourneys(this.props.dispatch, this.props.vehicleJourneys) : this.props.onEnterEditMode()