From f20d9cb50ad5d7105fc99402cbcbbe1dda829bf3 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Mon, 10 Feb 2020 14:57:31 +0530
Subject: [PATCH] autogenview: fix duplicate API calls issue while navigating
 view

The route config creates two groups of section components one for each
related paths that are cache and reused. Once these two groups of
components are mounted, on route change fetchData() is called twice
by two of such cached components beloning to two groups of paths.

This commit fixes this issue by using logical XOR to identify the
current component against related `to` route and the path the component
was in and only calls fetchData if `to` route and currentPath are of
the same group of routes.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/views/AutogenView.vue | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 5baedfa6605..856eba64e1c 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -308,14 +308,39 @@ export default {
       return this.selectedRowKeys.length > 0
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
   mounted () {
+    this.currentPath = this.$route.fullPath
     this.fetchData()
   },
+  beforeRouteUpdate (to, from, next) {
+    this.currentPath = this.$route.fullPath
+    next()
+  },
+  beforeRouteLeave (to, from, next) {
+    this.currentPath = this.$route.fullPath
+    next()
+  },
   watch: {
     '$route' (to, from) {
-      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
-        this.page = 1
+      // The route config creates two groups of section components one for each
+      // related paths. Once these two groups of components are mounted, on
+      // route changes this method is called twice causing multiple API calls.
+      // The following fixes this issue by using logical XOR to identify the
+      // current component against related `to` route and the path the component
+      // was in and only calls fetchData if `to` route and currentPath are of
+      // the same group of routes.
+
+      const related = ['/project', '/event', '/dashboard']
+      const toPath = related.map(o => to.fullPath.includes(o)).includes(true)
+      const inPath = related.map(o => this.currentPath.includes(o)).includes(true)
+      this.needToFetchData = ((toPath ^ inPath) === 0)
+      if (this.needToFetchData && to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
         this.searchQuery = ''
+        this.page = 1
+        this.itemCount = 0
         this.fetchData()
       }
     },
@@ -325,9 +350,6 @@ export default {
       }
     }
   },
-  beforeCreate () {
-    this.form = this.$form.createForm(this)
-  },
   methods: {
     fetchData () {
       if (this.routeName !== this.$route.name) {