From 853c7494b908c8b9dea3b91332ab1265aa40f428 Mon Sep 17 00:00:00 2001
From: Zog
Date: Wed, 10 Jan 2018 15:21:42 +0100
Subject: Refs #5529 @0.5h; Prevent double submitting of react forms

---
 .../journey_patterns/components/SaveJourneyPattern.js   | 17 +++++++++++++++--
 .../vehicle_journeys/components/SaveVehicleJourneys.js  | 15 ++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

(limited to 'app/javascript')

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()
-- 
cgit v1.2.3


From 84f3edcfc7213d5a02f10ba002e091e1563f2e27 Mon Sep 17 00:00:00 2001
From: Zog
Date: Wed, 10 Jan 2018 15:59:17 +0100
Subject: Refs #5529 @0.5h; Refactor buttons

---
 app/javascript/helpers/save_button.js              | 47 ++++++++++++++++++++++
 .../components/SaveJourneyPattern.js               | 45 ++++-----------------
 .../components/SaveVehicleJourneys.js              | 47 ++++------------------
 3 files changed, 63 insertions(+), 76 deletions(-)
 create mode 100644 app/javascript/helpers/save_button.js

(limited to 'app/javascript')

diff --git a/app/javascript/helpers/save_button.js b/app/javascript/helpers/save_button.js
new file mode 100644
index 000000000..7e0bd5bbe
--- /dev/null
+++ b/app/javascript/helpers/save_button.js
@@ -0,0 +1,47 @@
+import React, { PropTypes, Component } from 'react'
+
+export default class SaveButton extends Component{
+  constructor(props){
+    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.hasPolicy()) {
+      return false
+    }else{
+      return (
+        <div className='row mt-md'>
+          <div className='col-lg-12 text-right'>
+            <form className={this.formClassName() + ' formSubmitr ml-xs'} onSubmit={e => {e.preventDefault()}}>
+              <div className="btn-group sticky-actions">
+                <button
+                  className={this.btnClass()}
+                  type='button'
+                  disabled={this.btnDisabled()}
+                  onClick={e => {
+                    e.preventDefault()
+                    this.props.editMode ? this.submitForm() : this.props.onEnterEditMode()
+                  }}
+                >
+                  {this.props.editMode ? "Valider" : "Editer"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )
+    }
+  }
+}
diff --git a/app/javascript/journey_patterns/components/SaveJourneyPattern.js b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
index d973147a0..4bb6a73a0 100644
--- a/app/javascript/journey_patterns/components/SaveJourneyPattern.js
+++ b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
@@ -1,48 +1,19 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import SaveButton from '../../helpers/save_button'
 import actions from '../actions'
 
-export default class SaveJourneyPattern extends Component {
-  constructor(props){
-    super(props)
+export default class SaveJourneyPattern extends SaveButton {
+  hasPolicy(){
+    return this.props.status.policy['journey_patterns.update'] == true
   }
 
-  btnDisabled(){
-    return !this.props.status.fetchSuccess || this.props.status.isFetching
+  formClassName(){
+    return 'jp_collection'
   }
 
-  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
-    }else{
-      return (
-        <div className='row mt-md'>
-          <div className='col-lg-12 text-right'>
-            <form className='jp_collection formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
-              <button
-                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()
-                }}
-                >
-                {this.props.editMode ? "Valider" : "Editer"}
-              </button>
-            </form>
-          </div>
-        </div>
-      )
-    }
+  submitForm(){
+    this.props.onSubmitJourneyPattern(this.props.dispatch, this.props.journeyPatterns)
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
index 64fd7310e..6e94b04a3 100644
--- a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
@@ -1,50 +1,19 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import SaveButton from '../../helpers/save_button'
 import actions from '../actions'
 
-export default class SaveVehicleJourneys extends Component{
-  constructor(props){
-    super(props)
+export default class SaveVehicleJourneys extends SaveButton{
+  hasPolicy(){
+    return this.props.filters.policy['vehicle_journeys.update'] == true
   }
 
-  btnDisabled(){
-    return !this.props.status.fetchSuccess || this.props.status.isFetching
+  formClassName(){
+    return 'vehicle_journeys'
   }
 
-  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
-    }else{
-      return (
-        <div className='row mt-md'>
-          <div className='col-lg-12 text-right'>
-            <form className='vehicle_journeys formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
-              <div className="btn-group sticky-actions">
-                <button
-                  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()
-                  }}
-                >
-                  {this.props.editMode ? "Valider" : "Editer"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )
-    }
+  submitForm(){
+    this.props.onSubmitVehicleJourneys(this.props.dispatch, this.props.vehicleJourneys)
   }
 }
 
-- 
cgit v1.2.3