Merge pull request #3 from vedovelli/bugfix-ajax

Bugfix Multiple Event Handlers

Author: vedovelli

client/src/App.vue

@@ -31,10 +31,10 @@ export default {
 <style lang="sass" src="assets/sass/app.scss"></style>
 
 <style scoped>
-  .fade-enter-active {
+  .fade-enter-active, .fade-leave-active {
     transition: opacity .5s ease;
   }
-  .fade-enter {
+  .fade-enter, .fade-leave-active {
     opacity: 0;
   }
 </style>

client/src/config.js

@@ -1,2 +1,3 @@
 
+// export const apiUrl = 'http://spa.vedcasts.com.br/api/'
 export const apiUrl = 'http://localhost:8000/api/'

client/src/modules/categories/main.vue

@@ -162,6 +162,19 @@
         return this.$route.name === 'categories.new' || this.$route.name === 'categories.edit'
       },
     },
+    /**
+    * Right before navigate out to another route
+    * clears all event handlers, thus avoiding
+    * multiple handlers to be set and the annoying
+    * behaviour of multiple AJAX calls being made.
+    */
+    beforeRouteLeave(to, from, next) {
+      this.$bus.$off('navigate')
+      this.$bus.$off('category.created')
+      this.$bus.$off('category.updated')
+      jQuery('body').off('keyup')
+      next()
+    },
     mounted() {
       /**
       * Listen to pagination navigate event
@@ -172,15 +185,11 @@
       */
       this.$bus.$on('category.created', () => this.fetch())
       this.$bus.$on('category.updated', () => this.fetch())
+
       /**
-      * We only fetch data the first time
-      * component is mounted. We can set
-      * up a timer to fetch new data
-      * from time to time
+      * Fetch data immediately after component is mounted
       */
-      if (this.pager.data === undefined) {
-        this.fetch()
-      }
+      this.fetch()
     },
     /**
     * This hook is called every time DOM

webservice/app/Providers/EventServiceProvider.php

@@ -29,17 +29,17 @@ public function boot()
 
         Event::listen('tymon.jwt.absent', function () {
             return response()->json(
-                ['reason' => 'token', 'messages' => ['Token não fornecido']], 400);
+                ['reason' => 'token', 'messages' => ['Token not provided']], 400);
         });
 
         Event::listen('tymon.jwt.expired', function () {
             return response()->json(
-                ['reason' => 'token', 'messages' => ['Token expirado']], 400);
+                ['reason' => 'token', 'messages' => ['Expired Token']], 400);
         });
 
         Event::listen('tymon.jwt.invalid', function () {
             return response()->json(
-                ['reason' => 'token', 'messages' => ['Token inválido']], 400);
+                ['reason' => 'token', 'messages' => ['Invalid Token']], 400);
         });
     }
 }