From 72d66db2e0e700d244c9bb0bff4015a9083ab014 Mon Sep 17 00:00:00 2001
From: Swann KNANI <swann.knani@gmail.com>
Date: Tue, 27 Jun 2017 00:45:47 +0200
Subject: [PATCH] Prevent multiple request when clicking on the button card

---
 .editorconfig                                 |   2 +-
 client/src/components/JobCard.vue             | 387 +++++++++---------
 .../unit/specs/components/JobCard.spec.js     |  29 +-
 3 files changed, 231 insertions(+), 187 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 106c2ec..bb44a3a 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -2,7 +2,7 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true
diff --git a/client/src/components/JobCard.vue b/client/src/components/JobCard.vue
index 0b6d931..0b455b1 100644
--- a/client/src/components/JobCard.vue
+++ b/client/src/components/JobCard.vue
@@ -3,245 +3,262 @@
     <article class="job">
       <header class="job__header">
         <h2 class="job__title">{{ job.activity.title }}</h2>
-        <span v-bind:class="['job__status job__status--'+job.project.status]"></span>
+        <span :class="['job__status job__status--'+job.project.status]"></span>
       </header>
-      <a class="job__content" v-bind:href="octopodUrl">
+      <a class="job__content" :href="octopodUrl">
         <p><span class="job__mission">{{ mission }}</span></p>
         <p class="job__customer-wrapper">pour <span class="job__customer">{{ job.project.customer.name }}</span>
         </p>
         <p>à partir de <span class="job__start-date">{{ startDate }}</span></p>
-        <p>à <span v-bind:class="locationsClasses">{{ locations }}</span></p>
+        <p>à <span :class="locationsClasses">{{ locations }}</span></p>
       </a>
       <footer class="job__footer">
-        <button class="job__apply-button" v-on:click="submitInterest(job)"
-                title="Si vous cliquez sur ce bouton, un mail sera envoyé à l'équipe Job Board (uniquement !) avec les informations utiles pour aider au staffing.">
-          Je suis intéressé·e
-        </button>
-      </footer>
-    </article>
-  </div>
+        <button class="job__apply-button" :disabled="isClicked" @click.prevent.once="submitInterest"
+        title="Si vous cliquez sur ce bouton, un mail sera envoyé à l'équipe Job Board (uniquement !) avec les informations utiles pour aider au staffing.">
+        Je suis intéressé·e
+      </button>
+    </footer>
+  </article>
+</div>
 </template>
 
 <script>
 
-  import interestsApi from '@/api/interests';
-  import authenticationService from '@/services/authentication';
+import interestsApi from '@/api/interests';
+import authenticationService from '@/services/authentication';
 
-  export default {
+export default {
 
-  	props: ['job'],
+	props: ['job'],
 
-  	computed: {
+	data() {
+		return {
+			isClicked: false,
+		};
+	},
 
-  		octopodUrl() {
+	computed: {
+
+		octopodUrl() {
 			const octopodProjectId = this.job.project.id;
-  			return `https://octopod.octo.com/projects/${octopodProjectId}`;
+			return `https://octopod.octo.com/projects/${octopodProjectId}`;
 		},
 
-  		mission() {
+		mission() {
 			const missionName = this.job.project.name;
-  			return missionName.substring(0, 49);
+			return missionName.substring(0, 49);
 		},
 
-  		startDate() {
+		startDate() {
 			const startDate = new Date(this.job.project.start_date);
-  			return startDate.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' });
+			return startDate.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' });
 		},
 
-  		locations() {
+		locations() {
 			const locations = this.job.project.locations;
-  			if (!locations || locations.trim() === '') {
+			if (!locations || locations.trim() === '') {
 				return 'non renseigné';
 			}
-  			return locations;
+			return locations;
 		},
 
-  		locationsClasses() {
+		locationsClasses() {
 			const classes = ['job__locations'];
 
-  			const locations = this.job.project.locations;
-  			if (!locations || locations.trim() === '') {
+			const locations = this.job.project.locations;
+			if (!locations || locations.trim() === '') {
 				classes.push('job__locations--empty');
 			}
-  			return classes;
+			return classes;
 		},
 
-  	},
+	},
 
-  	methods: {
+	methods: {
 
-  		submitInterest() {
+		submitInterest() {
 			this.trackEvent();
-  			this.sendInterest();
+			this.sendInterest();
 		},
 
-  		trackEvent() {
+		trackEvent() {
 			this.$ga.event({
-  				eventCategory: 'Job List',
-  				eventAction: 'click',
-  				eventLabel: 'I am interested',
-  				eventValue: null,
-  			});
+				eventCategory: 'Job List',
+				eventAction: 'click',
+				eventLabel: 'I am interested',
+				eventValue: null,
+			});
 		},
 
-  		sendInterest() {
+		sendInterest() {
+			this.isClicked = true;
+
 			if (authenticationService.isAuthenticated()) {
 				const consultant = authenticationService.getAuthenticatedUser();
-  				const accessToken = authenticationService.getAccessToken();
+				const accessToken = authenticationService.getAccessToken();
 
-  				interestsApi.sendInterest(this.job, consultant, accessToken);
+				interestsApi.sendInterest(this.job, consultant, accessToken);
 			}
 		},
 
-  	},
+	},
 
-  };
+};
 
 </script>
 
 <style scoped>
 
-  /* Job
-  /* ------------------- */
-
-  .job {
-    min-width: 260px;
-    max-width: 260px;
-    background: #ffffff;
-    border-radius: 4px !important;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
-    border: 1px solid rgba(0, 0, 0, .09);
-    display: flex;
-    flex-direction: column;
-    color: #535a60;
-  }
-
-  .job__header {
-    border-bottom: 1px solid #e6e6e6;
-    padding: 15px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .job__title {
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 17px;
-    color: #07c;
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 200px;
-  }
-
-  .job__status {
-    display: inline-block;
-    width: 17px;
-    height: 17px;
-    border-radius: 50%;
-    margin-left: 5px;
-  }
-
-  .job__status--lead {
-    background: orange;
-  }
-
-  .job__status--mission-signed {
-    background: green;
-  }
-
-  .job__status--proposal-in-progress {
-    background: #0000FF;
-  }
-
-  .job__status--proposal-sent {
-    background: #6699FF;
-  }
-
-  .job__status--mission-accepted {
-    background-color: #33CC00;
-  }
-
-  .job__content {
-    font-size: 15px;
-    padding: 15px;
-    height: 130px;
-    text-decoration: none;
-    display: block;
-    color: #000;
-    text-align: left;
-  }
-
-  .job__content > p {
-    margin-top: 0;
-  }
-
-  .job__mission {
-    color: #5fba7d;
-    font-weight: 500;
-  }
-
-  .job__customer-wrapper {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .job__customer {
-    color: #07c;
-    font-weight: 500;
-  }
-
-  .job__start-date {
-    color: #07c;
-    font-weight: 500;
-  }
-
-  .job__duration {
-    color: #5fba7d;
-    font-weight: 700;
-  }
-
-  .job__locations {
-    color: #07c;
-    font-weight: 500;
-  }
-
-  .job__locations--empty {
-    color: #9199a1;
-  }
-
-  .job__footer {
-    text-align: center;
-    padding: 15px;
-    border-top: 1px solid #e6e6e6;
-  }
-
-  .job__apply-button {
-    text-transform: uppercase;
-    color: #F57C00;
-    background: #ffffff;
-    border: 1px solid #F48024;
-    cursor: pointer;
-    padding: 15px 30px;
-    border-radius: 4px;
-    width: 100%;
-    margin-bottom: 10px;
-  }
-
-  .job__apply-button:hover {
-    background: #FFE0B2;
-  }
-
-  .job__alert-link {
-    text-decoration: none;
-    font-size: 12px;
-    color: #9199a1;
-  }
-
-  .job__alert-link:hover {
-    text-decoration: underline;
-  }
+/* Job
+/* ------------------- */
+
+.job {
+  min-width: 260px;
+  max-width: 260px;
+  background: #ffffff;
+  border-radius: 4px !important;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
+  border: 1px solid rgba(0, 0, 0, .09);
+  display: flex;
+  flex-direction: column;
+  color: #535a60;
+}
+
+.job__header {
+  border-bottom: 1px solid #e6e6e6;
+  padding: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.job__title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 17px;
+  color: #07c;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.job__status {
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  margin-left: 5px;
+}
+
+.job__status--lead {
+  background: orange;
+}
+
+.job__status--mission-signed {
+  background: green;
+}
+
+.job__status--proposal-in-progress {
+  background: #0000FF;
+}
+
+.job__status--proposal-sent {
+  background: #6699FF;
+}
+
+.job__status--mission-accepted {
+  background-color: #33CC00;
+}
+
+.job__content {
+  font-size: 15px;
+  padding: 15px;
+  height: 130px;
+  text-decoration: none;
+  display: block;
+  color: #000;
+  text-align: left;
+}
+
+.job__content > p {
+  margin-top: 0;
+}
+
+.job__mission {
+  color: #5fba7d;
+  font-weight: 500;
+}
+
+.job__customer-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.job__customer {
+  color: #07c;
+  font-weight: 500;
+}
+
+.job__start-date {
+  color: #07c;
+  font-weight: 500;
+}
+
+.job__duration {
+  color: #5fba7d;
+  font-weight: 700;
+}
+
+.job__locations {
+  color: #07c;
+  font-weight: 500;
+}
+
+.job__locations--empty {
+  color: #9199a1;
+}
+
+.job__footer {
+  text-align: center;
+  padding: 15px;
+  border-top: 1px solid #e6e6e6;
+}
+
+.job__apply-button {
+  text-transform: uppercase;
+  color: #F57C00;
+  background: #ffffff;
+  border: 1px solid #F48024;
+  cursor: pointer;
+  padding: 15px 30px;
+  border-radius: 4px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.job__apply-button:hover {
+  background: #FFE0B2;
+}
+
+.job__apply-button:disabled,
+.job__apply-button:active {
+
+  background: #BDBDBD;
+  border-color: #616161;
+  color: #FAFAFA;
+  cursor: auto;
+}
+
+.job__alert-link {
+  text-decoration: none;
+  font-size: 12px;
+  color: #9199a1;
+}
+
+.job__alert-link:hover {
+  text-decoration: underline;
+}
 
 </style>
diff --git a/client/test/unit/specs/components/JobCard.spec.js b/client/test/unit/specs/components/JobCard.spec.js
index 4ea06e2..75669c2 100644
--- a/client/test/unit/specs/components/JobCard.spec.js
+++ b/client/test/unit/specs/components/JobCard.spec.js
@@ -42,10 +42,17 @@ describe('Unit | Component | JobCard.vue', () => {
 		component = new Constructor({
 			data: {
 				job,
+				isClicked: false,
 			},
 		}).$mount();
 	});
 
+	describe('$data', () => {
+		it('should have isClicked property set to false', () => {
+			expect(component.$data.isClicked).to.be.false;
+		});
+	});
+
 	describe('rendering', () => {
 		it('should display the appropriate project status', () => {
 			expect(component.$el.querySelector('.job__status').getAttribute('class')).to.contain('job__status--proposal-in-progress');
@@ -71,6 +78,10 @@ describe('Unit | Component | JobCard.vue', () => {
 		it('should display the locations', () => {
 			expect(component.$el.querySelector('.job__locations').textContent.trim()).to.equal('OCTO');
 		});
+
+		it('should have enabled button', () => {
+			expect(component.$el.querySelector('.job__apply-button').disabled).to.be.false;
+		});
 	});
 
 	describe('method #trackEvent', () => {
@@ -117,6 +128,23 @@ describe('Unit | Component | JobCard.vue', () => {
 			interestsApi.sendInterest.restore();
 		});
 
+		it('should set isClicked to true', () => {
+      // when
+			component.sendInterest();
+
+      // then
+			expect(component.$data.isClicked).to.be.true;
+		});
+
+		it('should disable the button', () => {
+      // When
+			component.$el.querySelector('button.job__apply-button').click();
+
+			Vue.nextTick().then(() => {
+				expect(component.$el.querySelector('.job__apply-button').disabled).to.be.true;
+			});
+		});
+
 		it('should call the API with good params', () => {
       // when
 			component.sendInterest();
@@ -188,4 +216,3 @@ describe('Unit | Component | JobCard.vue', () => {
 		});
 	});
 });
-