Move query get/set into mixin

7 files changed, 38 insertions, 42 deletions

diff --git a/src/HeroDraftGrid.vue b/src/HeroDraftGrid.vue
index a130218..48dd466 100644
--- a/src/HeroDraftGrid.vue
+++ b/src/HeroDraftGrid.vue
@@ -27,10 +27,12 @@
 import Vue from 'vue';
 import TalentImage from './TalentImage.vue';
 import HeroImage from './HeroImage.vue';
+import RouterParamMixin from './RouterParamMixin.js';
 import * as maps from './maps/maps';
 
 export default Vue.component('hero-draft-grid', {
   props: [ 'reportService' ],
+  mixins: [ RouterParamMixin ],
   data: function() {
     return {
       actors: this.reportService.getActors(),
@@ -38,17 +40,6 @@ export default Vue.component('hero-draft-grid', {
       getTalentName: maps.getTalentName,
     };
   },
-  computed: {
-    selectedActor: {
-      get: function() {
-        return this.$route.query.actor;
-      },
-      set: function(value) {
-        const query = Object.assign({}, this.$route.query, { actor: value });
-        this.$router.push({ query });
-      },
-    },
-  },
   components: {
     TalentImage,
     HeroImage,
diff --git a/src/HeroTalentTable.vue b/src/HeroTalentTable.vue
index 881d441..fee687e 100644
--- a/src/HeroTalentTable.vue
+++ b/src/HeroTalentTable.vue
@@ -29,22 +29,21 @@
 import Vue from 'vue';
 import TalentImage from './TalentImage.vue';
 import HeroImage from './HeroImage.vue';
+import RouterParamMixin from './RouterParamMixin.js';
 import * as maps from './maps/maps';
 
 export default Vue.component('hero-talent-table', {
   props: [ 'reportService' ],
+  mixins: [ RouterParamMixin ],
   data: function() {
     return {
-      totalPicks: this.reportService.getTotalPicks('casual_aral'),
       getHero: maps.getHero,
       getTalentName: maps.getTalentName,
     };
   },
   computed: {
-    selectedMode: {
-      get: function() {
-        return this.$route.query.mode;
-      },
+    totalPicks: function() {
+      return this.reportService.getTotalPicks(this.selectedMode);
     },
     heroReport: function() {
       return this.reportService.getReport(this.selectedMode)
@@ -55,11 +54,6 @@ export default Vue.component('hero-talent-table', {
         .map((entry) => entry.Count)
         .reduce((agg, cur) => agg + cur, 0);
     },
-    selectedActor: {
-      get: function() {
-        return this.$route.query.actor;
-      },
-    },
   },
   components: {
     TalentImage,
diff --git a/src/Highlights.vue b/src/Highlights.vue
index b98e792..02392ee 100644
--- a/src/Highlights.vue
+++ b/src/Highlights.vue
@@ -76,15 +76,12 @@
 <script>
 import Vue from 'vue';
 import TalentBox from './TalentBox.vue';
+import RouterParamMixin from './RouterParamMixin.js';
 
 export default Vue.component('highlights', {
   props: [ 'reportService' ],
+  mixins: [ RouterParamMixin ],
   computed: {
-    selectedMode: {
-      get: function() {
-        return this.$route.query.mode;
-      },
-    },
     stats: function() {
       return {
         topWin: this.reportService.getTopWin(this.selectedMode),
diff --git a/src/Home.vue b/src/Home.vue
index 69de621..b18a3d3 100644
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -11,10 +11,12 @@
 <script>
 import Vue from 'vue';
 import ModeTab from './ModeTab.vue';
+import RouterParamMixin from './RouterParamMixin.js';
 import * as maps from './maps/maps';
 
 export default Vue.component('home', {
   props: [ 'reportService' ],
+  mixins: [ RouterParamMixin ],
   data: function() {
     return {
       modes: this.reportService.getModes(),
@@ -24,12 +26,11 @@ export default Vue.component('home', {
   computed: {
     tabIndex: {
       get: function() {
-        return this.reportService.getModes().indexOf(this.$route.query.mode);
+        return this.reportService.getModes().indexOf(this.selectedMode);
       },
       set: function(index) {
         const mode = this.reportService.getModes()[index];
-        const query = Object.assign({}, this.$route.query, { mode: mode });
-        this.$router.push({ query });
+        this.selectedMode = mode;
       },
     },
   },
diff --git a/src/ReportTable.vue b/src/ReportTable.vue
index ea7f978..ed099c2 100644
--- a/src/ReportTable.vue
+++ b/src/ReportTable.vue
@@ -67,10 +67,12 @@
 <script>
 import Vue from 'vue';
 import HeroImage from './HeroImage.vue';
+import RouterParamMixin from './RouterParamMixin.js';
 import * as maps from './maps/maps';
 
 export default Vue.component('report-table', {
   props: [ 'reportService' ],
+  mixins: [ RouterParamMixin ],
   data: function() {
     return {
       getTalentName: maps.getTalentName,
@@ -79,11 +81,6 @@ export default Vue.component('report-table', {
     };
   },
   computed: {
-    selectedMode: {
-      get: function() {
-        return this.$route.query.mode;
-      },
-    },
     report: function() {
       return this.reportService.getReport(this.selectedMode);
     },
diff --git a/src/RouterParamMixin.js b/src/RouterParamMixin.js
new file mode 100644
index 0000000..92b698d
--- /dev/null
+++ b/src/RouterParamMixin.js
@@ -0,0 +1,22 @@
+export default {
+  computed: {
+    selectedActor: {
+      get: function() {
+        return this.$route.query.actor;
+      },
+      set: function(value) {
+        const query = Object.assign({}, this.$route.query, { actor: value });
+        this.$router.push({ query });
+      },
+    },
+    selectedMode: {
+      get: function() {
+        return this.$route.query.mode;
+      },
+      set: function(value) {
+        const query = Object.assign({}, this.$route.query, { mode: value });
+        this.$router.push({ query });
+      },
+    },
+  },
+};
diff --git a/src/TopTalentsBox.vue b/src/TopTalentsBox.vue
index e0e7cfb..e84b366 100644
--- a/src/TopTalentsBox.vue
+++ b/src/TopTalentsBox.vue
@@ -30,10 +30,12 @@
 import Vue from 'vue';
 import TalentImage from './TalentImage.vue';
 import HeroImage from './HeroImage.vue';
+import RouterParamMixin from './RouterParamMixin.js';
 import * as maps from './maps/maps';
 
 export default Vue.component('hero-search-box', {
   props: [ 'reportService' ],
+  mixins: [ RouterParamMixin ],
   data: function() {
     return {
       getHero: maps.getHero,
@@ -41,17 +43,9 @@ export default Vue.component('hero-search-box', {
     };
   },
   computed: {
-    selectedMode: {
-      get: function() {
-        return this.$route.query.mode;
-      },
-    },
     top10Talents: function() {
       return this.reportService.getTop10Picks(this.selectedMode);
     },
-    totalPicks: function() {
-      return this.reportService.getTotalPicks(this.selectedMode);
-    },
   },
   components: {
     TalentImage,